Chrome扩展加载外部JS

Question

Chrome扩展加载外部JS

javascripthtmlgoogle-chrome-extensionxmlhttprequestmessage-passing

3

我正在开发一个Chrome扩展程序，该程序使用了一个针对特定Web域定制的JavaScript库。这个库只能从特定域名调用（实际上是许可证问题）。

我想将这个js库加载到我的Chrome扩展程序中，但是扩展程序会出现内容安全策略（Content Security Policy）错误，因为要使用的库来自HTTP（而不是HTTPS）URL。我在StackOverflow上搜索过，唯一的选择是将该文件本地加载或通过消息传递加载。

请问有人能告诉我应该在我的background.js和content.js中添加什么代码，以及在manifest.json中添加哪些权限吗？

获取该js库的网站是例如http://library.com/js/xy.js。我知道在content.js中还应该有其他一些代码。如何从该域名加载代码？

manifest.json:

{
    "manifest_version": 2,
    "name": "abc",
    "version": "0.2",
    "description": "abc",
    "content_security_policy": "script-src 'self'; object-src 'self'",
    "browser_action": {
        "default_icon": "MM_logo_2009.png",
        "default_popup": "tab/popup.html"
    },
    "background": {
        "scripts": ["event.js"],
        "persistent": false
    },
    "permissions": [
        "http://library.com/js/xy.js",
        "bookmarks",
        "tabs",
        "storage",
        "http://*/*", 
        "https://*/*"
    ]
}

event.js:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://library.com/js/xy.js", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        // innerText does not let the attacker inject HTML elements.
        document.getElementById("resp").innerText = xhr.responseText;
    }
}
xhr.send();

- Ammad Akhtar

等等，你需要在内容脚本中还是事件脚本本身？你需要更好地解释一下。 - Xan

我只需要将库注入到我的扩展中，这个event.js是我的后台页面，这段代码是在其中编写的。@Xan - Ammad Akhtar

“Injected to my extension”是有歧义的，因为您还使用了内容脚本。您想在哪里注入它 - 后台？内容脚本上下文？页面上下文？ - Xan

@Xan在内容脚本中，但应该有一种适当的方式来进行通信，例如后台页面应该调用类似chrome.tabs.executeScript(null, { file: 'content.js' });的东西。 - Ammad Akhtar

保存我的responseText？@Xan - Ammad Akhtar

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Xan · Accepted Answer

一种非常直接，但极其危险的方法：

如果这确实是您唯一能够实现此操作（通过HTTP加载代码）的方式，那么您必须采用允许eval的方式：

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

然后

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://library.com/js/xy.js", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        eval(xhr.responseText);
    }
}
xhr.send();

这应该是最后的手段，因为它会将你高度特权的环境暴露给任何可以中间人攻击你连接的人执行任意代码。

由于它是HTTP，所以根本无法保证发送者的身份或脚本的完整性。

如果这段代码被Chrome Web Store拒绝，请不要感到惊讶！

幸运的是，有一种方法可以至少部分减轻风险。

使用保护措施.. 呃，沙盒:

文档中甚至有一个完整的指南，“在Chrome扩展中使用eval。安全。”

然后，您可以在一个沙盒页面（例如事件/后台页中的<iframe>）中执行相同的操作，并使用postMessage进行通信。这样，您就可以验证通信并且不会为正在评估的代码提供任何直接访问扩展API的权限。