Google Chrome 扩展：如何在以编程方式注入的内容脚本中包含 jQuery？答案

【问题标题】：Google Chrome Extensions: How to include jQuery in programmatically injected content script?Google Chrome 扩展：如何在以编程方式注入的内容脚本中包含 jQuery？
【发布时间】：2011-01-15 05:06:26
【问题描述】：

当用户单击浏览器操作按钮时，我正在从背景页面注入我的内容脚本，如下所示：

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript(null, { file: "content.js" });
});

那么如何从我的content.js 中访问 jQuery？我没有看到同时注入的方法。

【问题讨论】：

标签： javascript jquery google-chrome-extension

【解决方案1】：

怎么样：

chrome.tabs.executeScript(null, { file: "jquery.js" }, function() {
    chrome.tabs.executeScript(null, { file: "content.js" });
});

你可以从这里下载“jquery.js”：http://jquery.com/download/

【讨论】：

这会把他们扔进同一个“孤立的世界”？我会试一试！
哈！杰出的。作品！谢谢：D
但是...如果您使用的是 googleapis.com 上托管的 jQuery 怎么办？
@Aerovistae 你也可以直接下载，更快更安全。还有serg，简单而有效！绝妙的解决方案！
$ 仍未定义。

【解决方案2】：

如何将其添加到清单文件中

"content_scripts": [
    {
        "js": [
                "jquery.js", 
                "contentscript.js"
            ]
    }
],

【讨论】：

这难道不会让 Chrome 在每个选项卡中解析 jQuery，即使它不需要？
@ManuelFaux 是的。您需要添加一个“匹配”属性来控制它将在其上执行 jQuery 的域。
在哪里可以找到这个“jquery.js”？
@Daniel 你必须下载它（code.jquery.com），如果你想使用他的确切代码，请将其命名为“jquery.js”并将其保留在同一目录中
这个答案不是问题的解决方案。提问者需要程序化注入 (developer.chrome.com/extensions/content_scripts#pi)，它是通过点击浏览器操作按钮触发的，而不是在与清单文件中的模式匹配的每个页面上。

【解决方案3】：

更新：

在第一个脚本之后执行第二个脚本在脚本顺序方面会更准确，result 是选项卡列表中脚本执行结果的数组。

chrome.tabs.executeScript(null, {file:'js/jquery-2.1.1.min.js'}, function(result){
    chrome.tabs.executeScript(null, {file:'js/myscript.js'});
});

旧：

在您的脚本之后注入 Jquery 将能够在您的脚本中访问 Jquery。

chrome.tabs.executeScript(null, {file:'js/jquery-2.1.1.min.js'});
chrome.tabs.executeScript(null, {file:'js/myscript.js'});

如here 中所述，您可以更好地控制脚本的注入方式。特别是allFrames 属性很重要，如果您希望将脚本注入文档中的所有框架。忽略它只会注入顶部框架。由于其他答案中未提及它，因此猜测它可以帮助您。始终可以通过将脚本添加到清单中来注入脚本，如here 所述。

【讨论】：

是的，但是你应该使用第一个的回调来注入第二个。否则，他们可能会以错误的顺序完成执行，这将很难调试。
@Teepeemm 是的，这将是正确的解决方案。我会更新答案。

【解决方案4】：

由于我有很多依赖项的脚本，我使用了一个函数concatenateInjection，它接受三个参数：

//id: the tab id to pass to executeScript
//ar: an array containing scripts to load ( index order corresponds to execution order)
//scrpt (opzional): the last script to execute (if not provided, than the last script is the last insert in previous array)

function concatenateInjections(id, ar, scrpt){
  var i = ar.length;
  var idx = 0;

  function inject(idx){
    idx++;
    if(idx <= i){
      var f = ar[idx-1];
      chrome.tabs.executeScript(id, { file: f }, function() {
          inject(idx);
      });
    }else{
      if(typeof scrpt === 'undefined') return;
      chrome.tabs.executeScript(id, { file: scrpt });
    }
  }
  inject(idx);
}

及用法示例：

// id is tab id

// sources: first execute jquery, than default.js and anime.js in the end
var def = [
  "lib/jquery-1.11.3.min.js", 
  "lib/default.js", 
  "injection/anime.js"
];

// run concatenate injections
concatenateInjections(id, def);

认为这可能很有用。

更新

带有 concat 和闭包的版本（更美观）：

function concatenateInjections(id, ar, scrpt){

  if( typeof scrpt !== 'undefined' ) ar = ar.concat([scrpt]);

  var i = ar.length;
  var idx = 0 ;

  (function (){
    var that = arguments.callee;
    idx++;
    if(idx <= i){
      var f = ar[idx-1];
      chrome.tabs.executeScript(id, { file: f }, function(){ that(idx);} );
    }
  })();

}

【讨论】：

因为如果有多个具有相同依赖关系的脚本，那么我可以为此依赖定义一个数组“ar”，并且只更改每次调用“concatenateInject”的 scrpt 参数。我很懒;-)
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
我已经按照@Xan 的建议使用ar.concat(...) 进行了更新。无论如何，我更喜欢维护scrpt 参数，所以我不必在concatenateInjections() 中写myarray.concat('str')。记住：我很懒 :-)
没关系；这是可用的代码。我的意思是像 concatenateInjections(id, ar.concat(script)) 一样将它用于您提出的用例并将其保留为 2 个参数。

【解决方案5】：

任何时候你想动态插入 jQuery，我推荐这个脚本

我个人有一个 Chrome 自定义搜索“$”，它将$ 替换为

javascript:
var jq = document.createElement('script');
jq.onload = function(){};
jq.src = "https://code.jquery.com/jquery-2.1.1.min.js";
document.querySelector('head').appendChild(jq);

javascript: 只是从 url 栏运行 javascript 的方式

当我试图快速模拟一些 css 情况时，我在我的 about:blank 页面上使用它

【讨论】：