Chrome扩展:加载和执行外部脚本

Question

在我的chrome扩展中加载和执行外部js-脚本时有困难。看起来和这个问题一样，但我仍然不明白为什么它在我的情况下不起作用。

我的想法是，我希望在我的内容脚本中有一些默认函数，它应该解析网页内容。对于某些特定的网页，我想要加载和使用特定的解析器，所以我尝试为wep页面加载适当的js-脚本，这个脚本应该扩展默认解析器的功能。

到目前为止，我只尝试从外部脚本执行代码，但是有这样的错误：Unchecked runtime.lastError while running tabs.executeScript: No source code or file specified at Object.callback

这是我的manifest.json

{
"name": "Extension name",
"version": "1.2",
"description": "My chrome extension",
"browser_action": {
    "default_popup": "popup.html",
},
"content_scripts": [{
    "css": [
        "style.css"
    ],
    "js": [
        "bower_components/jquery/dist/jquery.js",
        "bower_components/bootstrap/dist/js/bootstrap.js",
        "content.js"
    ],
    "matches": ["*://*/*"]
}],
"web_accessible_resources": [
    "frame.html",
    "logo-48.png"
],
"icons": {
    "16": "logo-16.png",
    "48": "logo-48.png",
    "128": "logo-128.png"
},
"permissions": [
    "tabs",
    "storage",
    "http://*/",
    "https://*/"
],
"manifest_version": 2

}

我是popup.html

<!doctype html>
 <html>
 <head>
  <title>Title</title>
  <script src="popup.js"></script>
 </head>
 <body>
  <ul>
    <li>Some link</li>
  </ul>
 </body>
</html>

在popup.js中，我执行如下所示的纸条：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(tabs[0].id, {file: "http://127.0.0.1:8000/static/plugin/somesite.js"});
});

我做错什么了，我错过了什么吗？或者我应该用另一种方法来解决这个问题？

Answer 1

google chrome禁止像您这样从外部来源运行脚本，并且会阻止甚至不发布您的扩展。所有脚本都必须在扩展名中。但是有一个解决方案，来自谷歌铬文档

对通过HTTP加载的资源的限制仅适用于直接执行的资源。例如，您仍然可以自由地将XMLHTTPRequest连接到您喜欢的任何源；默认策略不以任何方式限制connections或任何其他CSP指令。

如果急需外部源，可以执行XML请求，并对内容使用eval。下面是代码来自google文档的一部分

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8000/static/plugin/somesite.js", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
      // WARNING! Might be evaluating an evil script!
      var resp = eval("(" + xhr.responseText + ")");
      // Or this if it's work
      chrome.tabs.executeScript(tabs[0].id, {code: xhr.responseText});
  }
}
xhr.send();

或者你可以使用一些库，使用jquery的$.get()或带角的$http。如果在代码中添加eval，则必须在manifest.json中添加以下内容：

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

Answer 2

根据这里的讨论：https://groups.google.com/a/chromium.org/forum/#!topic/chromium-extensions/LIH7LGXeQHo，

从外部源运行脚本可能导致未发布或阻止扩展。

只需提供另一种方法，就可以对内容脚本进行ajax调用，然后调用chrome.tabs.executeScript

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    $.get("http://127.0.0.1:8000/static/plugin/somesite.js", function(result) {
        chrome.tabs.executeScript(tabs[0].id, {code: result});
    }, "text");
});

Answer 3

executeScript的“file”选项仅与嵌入在扩展名中的文件有关。我知道，文献资料对此还不清楚，虽然它可能适用于URL，但听起来像是黑客攻击，而不是特性。为了将外部源的脚本加载到活动页面中，通常必须执行一个脚本，该脚本在加载的文档的DOM中创建脚本标记。

我觉得我以前已经回答过这个问题的一部分：为什么必须使用chrome.tabs.executeScript()来更改当前的网站DOM，以及如何使用jQuery实现同样的效果？

概括地说：

1)为了从扩展中访问网页，需要为其添加权限：

"permissions" : [
       "tabs",
       [...]
       "http://*/*",
       "https://*/*" ], 

2)您需要执行某种代码来创建加载所需内容的DOM脚本元素：

chrome.tabs.executeScript(tab.id, {
    code : 'var script=document.createElement(\'script\');' +
    'script.onload=function() { /*do something in the page after the script was loaded*/ };' +
    'script.src=\'http://127.0.0.1:8000/static/plugin/somesite.js\';' +
    'document.body.appendChild(script);'
}, function (returnedValue) {
    // do something in the extension context after the code was executed
});

看看上面链接中的remex函数，我认为它解决了javascript编写成字符串的许多丑陋问题，如下所示。