javascript - 在 Chrome 扩展中包含托管 js 和 css

Question

是否可以将托管 js 和 css 添加到 content_script chrome 插件。

"content_scripts": [
    {
      "matches": ["*://*/*"],
      "css": ["bootstrap.min.css", "mystyles.css"],
      "js": ["jquery-1.7.2.min.js", "myscript.js"],
      "all_frames" : true
    }
  ]

这里js和css应该在manifest.json的同一个包下

我想添加托管js，例如

"content_scripts": [
    {
      "matches": ["*://*/*"],
      "css": ["bootstrap.min.css", "mystyles.css"],
      "js": ["https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js", "https://www.example.com/js/myscript.js"],
      "all_frames" : true
    }
  ]

Answer 1

不，不能这样做。

首先，永远不要使用 CDN 将 jQuery 等库传递到您的扩展；根本没有意义，你在节省什么？您会在不应该出现的地方出现网络延迟。

接下来是应用程序逻辑脚本。我可以理解更新它们比更新扩展更快的要求，那么这是有道理的。但是，您不能在 list 中包含类似的非本地文件。

但是，您可以执行以下操作:

1. 注入(inject)一个本地的小型“引导”脚本。

2. Message background page来自引导脚本并请求注入(inject)其余部分。

3. 后台页面获取脚本with XHR (请记住，您将需要主机权限)。

   我也建议使用某种缓存，例如仅尝试每 N 分钟/小时/天获取一次新版本和 saving a copy locally in chrome.storage 。否则，您将再次遇到可怕的延迟。

4. 后台页面使用

   注入(inject)脚本

   chrome.tabs.executeScript(tabId, {code: "..."})
   

   形式programmatic injection .

请注意，所有这些都相对复杂，并且强烈建议不要使用 HTTPS 来传送脚本(否则您很容易受到 MitM 攻击)。除非您有特定要求，要求更新应用逻辑的速度比更新扩展程序的速度快，否则请勿执行此操作。