在后台页面中加载远程网页：Chrome扩展程序 [英] Load remote webpage in background page: Chrome Extension

问题描述

 background：{
page：local.html
} 
  

/ p>

 background：{
page：http：// ....
 } 
  

会失败并显示以下错误：

无法加载后台页面http：// .... 
  

不，这是不可能的。自Chrome 22以来可能 - 查看答案的底部。

您可以 将清单文件中的 https：资源列入白名单，以便可以手动构建后台脚本。确保在扩展中包含后备资源，以防止网络中断：

 <！ - ... doctype等...（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 ）{
 //后退，通过定义备用方法或注入新脚本：
 document.write（'< script src =fallback_bg.js>< / script>'）; 
 
 
 
 $ b $ p 
 $ b 
如果你想动态地构造页面，避免使用 eval 类似的方法，因为这些也是CSP禁止的。您可以编写模板，并请求外部值来填充模板。可以使用 localStorage 来缓存变量。有关缓存外部资源的示例，请参阅 Chrome扩展将外部JavaScript添加到当前页面的HTML 。这个答案引用内容脚本，所以确切的方法不能用于启用缓存脚本（因为您需要使用 eval 来加载脚本）。但是，仍然可以使用缓存技术。 
 
 
 
 
 
我也尝试使用下面的方法，它不工作（包括在这个答案中，这样你就不必自己尝试）：
 
创建一个  Blob  ，然后使用  webkitURL.createObjectURL  创建一个临时URL加载资源。 
  //修改https://stackoverflow.com/a/10371025 
 //而不是`chrome。 （例如使用x.responseType ='arraybuffer'）
 var blob = new Blob（[x.responseText]，{type： '应用程序/ JavaScript的'}）; 
 var url =（window.URL || window.webkitURL）.createObjectURL（blob）; 
 var s = document.createElement（'script'）; 
 s.src = url; 
 document.head.appendChild（s）; 
  
前面的代码会产生以下错误： 
 
 < blockquote> 
 
拒绝加载脚本'blob：chrome-extension％3A // damgmplfpicjkeogacmlgiceidmilllf / 96356d24-3680-4188-812e-5661d23e81df'，因为它违反了以下内容安全策略指令：script-src 'self'chrome-extension-resource：
 
 
 
 
 
在后台页面加载外部资源
 
 
 
从Chrome 22开始，在技术上可行（使用 unsafe-eval  CSP策略）在后台页面中加载非https资源。这显然是不推荐的，因为存在安全问题（因为它对 
 
下面是一个加载任意资源并在后台脚本的上下文中运行它的例子。
 p> 
 
 
 函数loadScript（url）{
 var x = new XMLHttpRequest（）; 
 x.onload = function（）{
 eval（x.responseText）; //< ---- !!! 
}; 
 x.open（'GET'，url）; 
 x.send（）; 
} 
 //用法：
 loadScript（'http://badpractic.es/insecure.js'）; 
  
 
 
 
 
 
   unsafe-eval  必须指定CSP策略。
 
 
与往常一样，要发出跨网申请，必须将网址列入权限部分，或者服务器必须启用 CORS  
 
 
 
 
 
所以，清单应该至少包含： 
 
 <$ p $ code>content_security_policy：script-src'self''unsafe-eval'; object-src'self'，
permissions：[http://badpractic.es /insecure.js]，
background：{scripts：[background.js]} 
  

Is it possible to load a remote webpage into a background page using a chrome extension?

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

works, but

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

fails with the following error:

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

解决方案

No, that's not possible. It is possible since Chrome 22 - see the bottom of the answer.

You can whitelist a https: resource in the manifest file file, so that your background script can manually be constructed. Make sure that you include a fallback resource in your extension, in the case that the network is down:

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

Because of the Content security policy (CSP), you cannot run inline JavaScript, so you have to use external JS files. bg.js may look like:

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

If you want to dynamically construct a page, avoid use of eval-like methods, because these are also forbidden by the CSP. You can write a template, and request external values to populate your template. localStorage can be used to cache variables. For an example on caching external resources, see Chrome extension adding external javascript to current page's html. This answer referred to Content scripts, so the exact method cannot be used to enable caching scripts (because you would need to use eval to load the script). However, the caching technique can still be used.

---

I have also tried to use the following method, which does not work (included in this answer, so that you don't have to try it yourself):
Create a Blob from the AJAX response, then use webkitURL.createObjectURL to create a temporary URL to load the resource.

// 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);

The previous code yields the following error:

Refused to load the script 'blob:chrome-extension%3A//damgmplfpicjkeogacmlgiceidmilllf/96356d24-3680-4188-812e-5661d23e81df' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

Loading external resources in the background page

Since Chrome 22, it is technically possible (using the unsafe-eval CSP policy) to load non-https resources in the background page. This obviously not recommended because of security concerns (because it's susceptible to the MITM attack, for instance).

Here's an example to load an arbitrary resource and run it in the context of the background script.

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');

• The unsafe-eval CSP policy must be specified.
• As usual, to make cross-origin requests, the URL must be whitelisted in the manifest at the permissions section, or the server must enable CORS.

So, the manifest should at least contain:

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

这篇关于在后台页面中加载远程网页：Chrome扩展程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！