谷歌浏览器扩展:如何将jQuery包含在以编程方式注入的内容脚本中?

zte4gxcn  于 2023-03-22  发布在  jQuery
关注(0)|答案(6)|浏览(171)

当用户点击 browser action 按钮时,我从 background page 注入我的 content script,如下所示:

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

那么我如何从我的content.js内部访问jQuery呢?我没有看到一种同时注入jQuery的方法。

tvokkenx

tvokkenx1#

关于:

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

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

8gsdolmq

8gsdolmq2#

把这个加到你的清单文件里怎么样

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

c9x0cxw03#

更新:
在第一个脚本之后执行第二个脚本在脚本顺序方面会更准确,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属性,如果您希望将脚本注入到文档中的所有帧中,则非常重要。忽略它将只注入顶部帧。由于其他答案中没有提到它,所以猜猜它对您有帮助。脚本可以通过将其添加到manifest来注入,如这里所述。

uqzxnwby

uqzxnwby4#

因为我有很多依赖关系的脚本,所以我使用一个函数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和closure的版本(更美观):

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

}
5kgi1eie

5kgi1eie5#

任何时候你想动态插入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的方法
我在我的about:blank页面上使用这个,当我试图快速模拟一些css的情况时

fcwjkofz

fcwjkofz6#

manifest v3更新

chrome.scripting.executeScript({
target: { tabId: tab.id },
files : [ "jquery.js" ]
}).then(() => chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: your_function,
}));

相关问题