Question

是否可以使用Chrome扩展程序将远程网页加载到后台页面？

"background": {
    "page": "local.html"
  }

有效，但

"background": {
    "page": "http://...."
  }

因以下错误而失败：

Could not load background page http://....

Answer 1

~~不，这是不可能的。~~自Chrome 14以来可能 - 请参阅答案的底部。

您可以 whitelist a https: resource in the manifest file文件，以便您可以手动构建后台脚本。如果网络出现故障，请确保在您的分机中包含备用资源：

<!-- ... doctype etc ... (background.html) -->
<script src="https://..../external_bg.js"></script>
<script src="bg.js"></script>

由于Content security policy (CSP)，您无法运行内联JavaScript，因此必须使用外部JS文件。 bg.js可能如下所示：

if (!window.namespace_of_external_bg) {
    // Fallback, by defining fallback methods or injecting a new script:
    document.write('<script src="fallback_bg.js"></script>');
}

如果要动态构建页面，请避免使用类似eval的方法，因为CSP也禁止这些方法。您可以编写模板，并请求外部值来填充模板。 localStorage可用于缓存变量。有关缓存外部资源的示例，请参阅Chrome extension adding external javascript to current page's html。这个答案涉及内容脚本，因此不能使用确切的方法来启用缓存脚本（因为您需要使用eval来加载脚本）。但是，仍然可以使用缓存技术。

我也尝试使用以下方法，无法正常工作（包含在此答案中，因此您无需亲自尝试）：
从AJAX响应中创建Blob，然后使用webkitURL.createObjectURL创建临时URL以加载资源。

// Modification of https://stackoverflow.com/a/10371025
// Instead of `chrome.tabs.executeScript`, use 
// x.responseText  or  x.response (eg when using x.responseType='arraybuffer')
var blob = new Blob([x.responseText], {type: 'application/javascript'});
var url = (window.URL || window.webkitURL).createObjectURL(blob);
var s = document.createElement('script');
s.src = url;
document.head.appendChild(s);

之前的代码会产生以下错误：

拒绝加载脚本'blob：chrome-extension％3A // damgmplfpicjkeogacmlgiceidmilllf / 96356d24-3680-4188-812e-5661d23e81df'，因为它违反了以下内容安全策略指令：“script-src'self'chrome-extension -resource：”

在后台页面中加载外部资源

从Chrome 22开始，技术上可以（使用unsafe-eval CSP策略）在后台页面中加载非https资源。这显然是不推荐，因为存在安全问题（例如，因为它容易受MITM attack影响）。

以下是加载任意资源并在后台脚本的上下文中运行它的示例。

function loadScript(url) {
    var x = new XMLHttpRequest();
    x.onload = function() {
        eval(x.responseText); // <---- !!!
    };
    x.open('GET', url);
    x.send();
}
// Usage:
loadScript('http://badpractic.es/insecure.js');

必须指定 unsafe-eval CSP政策。
像往常一样，要制作跨源请求，必须在permissions部分的清单中将网址列入白名单，否则服务器必须启用CORS。

所以，清单应该至少包含：

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"permissions": ["http://badpractic.es/insecure.js"],
"background": {"scripts": ["background.js"] }

在后台页面加载远程网页：Chrome扩展程序

1 个答案:

在后台页面中加载外部资源