chrome扩展加载外部js

Question

我正在构建一个 chrome 扩展，它使用为特定网络域定制的 JavaScript 库。只能从该特定域调用该库是一个限制（实际上是许可证问题）。

我想将该 js 库加载到我的 chrome 扩展程序中，但由于要使用的库来自 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();

Answer 1

一种非常直接，而且非常危险的方式：

如果这确实是您可以做到这一点的唯一方法（通过 HTTP 加载代码），那么您必须求助于allowing 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();

这应该是最后的手段，因为它打开了您的高特权环境，让任何可以 MITM 连接的人执行任意代码。

由于是 HTTP，因此无法保证发送者的身份或脚本的完整性。

如果此代码被 Chrome 网上应用店拒绝，请不要感到惊讶！

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

使用保护.. 错误，沙盒：

文档中甚至还有完整的指南，"Using eval in Chrome Extensions. Safely."

然后您执行相同操作，但在 sandboxed 页面中（例如，在您的事件/背景页面中的 <iframe>），并使用 postMessage 与其通信。这样，您可以验证通信，而无需为正在评估的代码提供对扩展 API 的任何直接访问。