谷歌浏览器扩展：如何在程序化注入的内容脚本中包含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的情况
