在 google chrome 扩展中加载外部 javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7781851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading external javascript in google chrome extension
提问by Gezim
I'm writing a Google Chrome extension which manipulates the current page (basically adds a button).
我正在编写一个 Google Chrome 扩展程序来操作当前页面（基本上是添加一个按钮）。
In my content script, I want to load the Facebook Graph API:
在我的内容脚本中，我想加载 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));
However, the script doesn't seem to added to body. Here's the console log:
但是，脚本似乎没有添加到body. 这是控制台日志：
fbScript: object
fbScript parent: undefined
find through body: undefined
Any ideas on what I'm doing wrong?
关于我做错了什么的任何想法？
回答by Adam Ayres
The issue is that the JavaScript inside the content scripts runs in its own sandboxed environment and only has access to other JavaScript that was loaded in one of two ways:
问题在于内容脚本中的 JavaScript 在其自己的沙盒环境中运行，并且只能访问以以下两种方式之一加载的其他 JavaScript：
Via the manifest:
通过清单：
{
"name": "My extension",
...
"content_scripts": [
{
"js": ["https://connect.facebook.net/en_US/all.js"]
}
],
...
}
Or using Programmatic injection:
或者使用程序化注入：
/* in background.html */
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{file:"https://connect.facebook.net/en_US/all.js"});
});
Be sure to update your manifest permissions:
请务必更新您的清单权限：
/* in manifest.json */
"permissions": [
"tabs", "https://connect.facebook.net"
],
Appending a script tag will in effect evaluate the JavaScript in the context of the containing page, outside of the JavaScript sandbox that your JavaScript has access to.
附加脚本标签实际上会在包含页面的上下文中评估 JavaScript，在您的 JavaScript 可以访问的 JavaScript 沙箱之外。
Also, since the FB script requires the "fb-root" to be in the DOM, you will probably need to use the programmatic approach so that you can first update the DOM with the element, then pass a messageback to the background page to load the Facebook script so it is accessible to the JavaScript that is loaded in the content scripts.
此外，由于 FB 脚本要求“fb-root”位于 DOM 中，因此您可能需要使用编程方法，以便您可以首先使用元素更新 DOM，然后将消息传递回后台页面以加载 Facebook 脚本，以便内容脚本中加载的 JavaScript 可以访问它。
回答by David Salamon
Google Chrome extensions no longer allow injecting external code directly, however you can still download the code with an Ajax call and feed it to the injector as if it was a code block.
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");
});
