10

是否可以使用 chrome 扩展将远程网页加载到背景页面中？

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

有效，但是

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

失败并出现以下错误：

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

1 回答 1

13

不，那是不可能的。从 Chrome 22 开始就有可能- 请参阅答案的底部。

您可以 将清单文件文件中的资源列入白名单https:，以便手动构建您的后台脚本。确保您在扩展程序中包含一个备用资源，以防网络出现故障：

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

由于内容安全策略 (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-like 方法，因为 CSP 也禁止使用这些方法。您可以编写模板，并请求外部值来填充您的模板。localStorage可用于缓存变量。有关缓存外部资源的示例，请参阅Chrome 扩展将外部 javascript 添加到当前页面的 html。这个答案引用了Content scripts，因此不能使用确切的方法来启用缓存脚本（因为您需要使用它eval来加载脚本）。但是，仍然可以使用缓存技术。

我也尝试使用以下方法，但不起作用（包含在此答案中，因此您不必自己尝试）：从 AJAX 响应
创建一个，然后使用创建一个临时 URL 来加载资源。BlobwebkitURL.createObjectURL

// 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//dmgmplfpicjkeogacmlgiceidmilllf/96356d24-3680-4188-812e-5661d23e81df' 因为它违反了以下内容安全策略指令：“script-src 'self' chrome-extension-resource: ”。

在后台页面加载外部资源

从 Chrome 22 开始，技术上可以（使用unsafe-evalCSP 策略）在后台页面加载非 https 资源。出于安全考虑，这显然不推荐（例如，因为它容易受到MITM 攻击）。

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

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 策略。
  • 像往常一样，要发出跨域请求，URL 必须在清单中的permissions部分列入白名单，或者服务器必须启用CORS。

因此，清单至少应包含：

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"permissions": ["http://badpractic.es/insecure.js"],
"background": {"scripts": ["background.js"] }
于 2012-08-07T12:35:32.327 回答