在 google chrome 扩展中加载外部 javascript

IT技术 javascript google-chrome facebook-graph-api google-chrome-extension
2021-02-21 11:46:27

我正在编写一个 Google Chrome 扩展程序来操作当前页面（基本上是添加一个按钮）。

在我的内容脚本中，我想加载 Facebook Graph API：

$fbDiv = $(document.createElement('div')).attr('id', 'fb-root');
$fbScript = $(document.createElement('script')).attr('src', 'https://connect.facebook.net/en_US/all.js');
$(body).append($fbDiv);
$(body).append($fbScript);

console.log("fbScript: " + typeof $fbScript.get(0));
console.log("fbScript parent: " + typeof $fbScript.parent().get(0));
console.log("find through body: " + typeof $(body).find($fbScript.get(0)).get(0));

但是，脚本似乎没有添加到body. 这是控制台日志：

fbScript: object
fbScript parent: undefined
find through body: undefined

关于我做错了什么的任何想法？

3个回答

问题在于内容脚本中的 JavaScript 在其自己的沙盒环境中运行，并且只能访问以以下两种方式之一加载的其他 JavaScript：

通过清单：

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "js": ["https://connect.facebook.net/en_US/all.js"]
    }
  ],
  ...
}

或使用程序化注入：

/* in background.html */
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null,
                       {file:"https://connect.facebook.net/en_US/all.js"});
});

请务必更新您的清单权限：

/* in manifest.json */
"permissions": [
    "tabs", "https://connect.facebook.net"
 ],

附加脚本标签实际上会在包含页面的上下文中评估 JavaScript，在您的 JavaScript 可以访问的 JavaScript 沙箱之外。

此外，由于 FB 脚本要求“fb-root”位于 DOM 中，因此您可能需要使用编程方法，以便您可以首先使用元素更新 DOM，然后将消息传递回后台页面以加载 Facebook 脚本，以便内容脚本中加载的 JavaScript 可以访问它。

嗨，我的印象是你需要做这个或什么...... developer.chrome.com/extensions/contentSecurityPolicy.html ....但是这会起作用吗。现在。2013 年。
2021-05-09 11:46:27
根据developer.chrome.com/extensions/，这不再正确...
2021-05-10 11:46:27
这会在内容页面上加载一个脚本，但我希望在扩展中加载一个脚本
2021-05-16 11:46:27

Google Chrome 扩展不再允许直接注入外部代码，但是您仍然可以使用 Ajax 调用下载代码并将其提供给注入器，就像它是一个代码块一样。

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    $.get("http://127.0.0.1:8000/static/plugin/somesite.js", function(result) {
        chrome.tabs.executeScript(tabs[0].id, {code: result});
    }, "text");
});

来源：https : //stackoverflow.com/a/36645710/720665

如果要将其加载为内容脚本：

fetch('https://example.com/content.js')
  .then(resp => resp.text())
  .then(eval)
  .catch(console.error)

如果要将其作为后台脚本加载。以https://example.com/bg.js为例。

  1. 将远程js脚本添加到后台页面文件中，这里命名为background.html
<!DOCTYPE html>
<html>
<head>
  <script src="https://example.com/bg.js"></script>
</head>
<body>
<div>Empty content</div>
</body>
</html>
  1. 将https://example.com添加到 manifest.json 的 content_security_policy：
"background": {
  "page": "background.html"
},
"content_security_policy": "script-src 'self' https://example.com ; object-src 'self'",

要求：

  1. 远程 js 脚本必须通过https而不是 http 提供服务。
  2. 您应该在后台部分指定页面而不是脚本数组
其它你可能感兴趣的问题
上一篇为什么不在页面内容中使用 iframe 的好理由 下一篇typescript：在类型“{“A”：字符串；}