我正在编写操作当前页面的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
关于我做错的任何想法?
答案 0 :(得分:41)
问题是内容脚本中的JavaScript在其自己的沙盒环境中运行,并且只能访问以下两种方式之一加载的其他JavaScript:
通过manifest:
{
"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,然后pass a message返回到后台页面加载Facebook脚本,以便内容脚本中加载的JavaScript可以访问它。
答案 1 :(得分:6)
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");
});
答案 2 :(得分:0)
如果要将其作为内容脚本加载:
fetch('https://example.com/content.js')
.then(resp => resp.text())
.then(eval)
.catch(console.error)
如果要将其作为后台脚本加载。 以https://example.com/bg.js为例。
<!DOCTYPE html>
<html>
<head>
<script src="https://example.com/bg.js"></script>
</head>
<body>
<div>Empty content</div>
</body>
</html>
"background": {
"page": "background.html"
},
"content_security_policy": "script-src 'self' https://example.com ; object-src 'self'",
要求: