Javascript Google Chrome扩展：如何在编程注入的内容脚本中包含jQuery？

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

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

那么如何从

content.js

中访问jQuery呢？我看不到同时注射的方法。

那么：

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

---

您可以从这里下载“jquery.js:

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

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

---

只要您想动态插入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

页面上使用此选项更新：

在第一个脚本之后执行第二个脚本在脚本顺序方面更准确，

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

---

您可以更好地控制脚本的注入方式，如中所述。特别是

allFrames

属性非常重要，如果您希望将脚本注入文档中的所有帧。忽略它将只注入顶部框架。因为在其他答案中没有提到，所以我猜这对你有帮助。始终可以通过将脚本添加到清单（如所述）来注入脚本。

因为我有很多脚本具有许多依赖项，所以我使用一个函数

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

我想这可能有用

更新 带有concat和closure的版本（更美观）：

函数串联输入（id、ar、scrpt）{
如果（scrpt的类型！=“未定义”）ar=ar.concat（[scrpt]）；
var i=ar长度；
var-idx=0；
（功能（）{
var=arguments.callee；
idx++；
如果（idx）那会把他们扔进同一个“孤立的世界”？我来试一试！哈！太棒了。太棒了！谢谢你：但是…如果你使用的是googleapis.com上托管的jQuery怎么办？@Aerovistae你可以下载它，它会更快更安全。而且serg，如此简单却如此有效！太棒的解决方案！
$
仍然没有定义。这会不会让Chrome在每一天都解析jQueryab即使不需要它？@ManuelFaux是的。您需要添加一个“matches”属性来控制它将在其上执行jQuery的域。我在哪里可以找到这个“jQuery.js”？@Daniel您必须下载它（），将其命名为“jQuery.js”如果你想使用他的确切代码，就把它放在同一个目录中。这个答案不是问题的答案。提问者需要一个程序注入（），这是通过单击浏览器操作按钮触发的，而不是在与清单文件中的模式匹配的每个页面上。因为如果有多个脚本具有相同的依赖项，则我可以为该依赖项定义单个数组“ar”，并且只更改每次调用“concatenateInject”的scrpt参数。我非常懒惰；-）我已经使用@Xan建议的
ar.concat（…）
进行了更新。无论如何，我更喜欢维护
scrpt
参数，所以我不必在
concatenateinjects（）
中编写
myarray.concat（'str'）
。记住：我很懒：-）它很好；它是可用的代码。我的意思是像
concatenateinjects>一样使用它（id，ar.concat（script））
用于您呈现的用例，并将其保留为2个参数。是的，但您应该使用第一个参数的回调来注入第二个参数。否则，它们可能会以错误的顺序完成执行，这将很难调试。@Teepeemm是的，这将是正确的解决方案。我将更新答案。
// 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);

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);} );
    }
  })();

}