谷歌浏览器扩展:如何在程序化注入的内容脚本中包含jQuery?

当用户点击浏览器动作button时,我从后台页面注入我的内容脚本 ,如下所示:

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”: http : //jquery.com/download/

如何将其添加到您的清单文件

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

由于我有很多依赖关系的脚本,我使用了一个函数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); 

认为这可能是有用的。

UPDATE

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

更新:

在第一个脚本之后执行第二个脚本在脚本顺序方面更加准确, 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属性非常重要。 忽略它只会注入顶部框架。 由于它没有在其他答案中提到,所以猜测它可以帮助你。 脚本可以通过将其添加到清单中来进行注入,如此处所述。

任何时候你想dynamic插入jQuery,我推荐这个脚本

我个人有一个Chrome自定义search“ $ ”,它取代了$

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

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

我在我的about:blank页面上使用这个,当我试图快速模拟一些CSS的情况