javascript - 在谷歌浏览器扩展中加载外部javascript

Question

我正在编写一个 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

关于我做错了什么有什么想法吗？

Answer 1

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

通过manifest :

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

或者使用Programmatic injection :

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

请务必更新您的 list 权限:

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

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

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