如何在Firefox扩展中使用jQuery
我想在一个Firefox扩展中使用jQuery，我将这个库导入到xul文件中，像这样：
<script type="application/x-javascript" src="chrome://myExtension/content/jquery.js"> </script> 但是$（）函数在xul文件中不被识别，jQuery（）也不能识别。
我search了这个问题，并find了一些解决scheme，但没有人与我合作： http : //gluei.com/blog/view/using-jquery-inside-your-firefox-extension http://forums.mozillazine.org/ viewtopic.php？F = 19＆T = 989465
我也试过把'content.document'对象（它引用'document'对象）作为上下文parameter passing给jQuery函数，如下所示：
$('img',content.document);
但还是不行，以前有没有人遇到过这个问题？
我使用下面的example.xul ：
<?xml version="1.0"?> <overlay id="example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <head></head> <script type="application/x-javascript" src="jquery.js"></script> <script type="application/x-javascript" src="example.js"></script> </overlay>
这里是一个example.js
(function() { jQuery.noConflict(); $ = function(selector,context) { return new jQuery.fn.init(selector,context||example.doc); }; $.fn = $.prototype = jQuery.fn; example = new function(){}; example.log = function() { Firebug.Console.logFormatted(arguments,null,"log"); }; example.run = function(doc,aEvent) { // Check for website if (!doc.location.href.match(/^http:\/\/(.*\.)?stackoverflow\.com(\/.*)?$/i)) return; // Check if already loaded if (doc.getElementById("plugin-example")) return; // Setup this.win = aEvent.target.defaultView.wrappedJSObject; this.doc = doc; // Hello World this.main = main = $('<div id="plugin-example">').appendTo(doc.body).html('Example Loaded!'); main.css({ background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8 }); main.html(main.html() + ' - jQuery <b>' + $.fn.jquery + '</b>'); }; // Bind Plugin var delay = function(aEvent) { var doc = aEvent.originalTarget; setTimeout(function() { example.run(doc,aEvent); }, 1); }; var load = function() { gBrowser.addEventListener("DOMContentLoaded", delay, true); }; window.addEventListener("pageshow", load, false); })();
以下解决scheme使得在contentScriptFile（Targetting 1.5 Addon-sdk）中使用jQuery成为可能，
在你的main.js中：
exports.main = function() { var pageMod = require("page-mod"); pageMod.PageMod({ include: "*", contentScriptWhen: 'end', contentScriptFile: [data.url("jquery-1.7.1-min.js") , data.url("notifier.js") , data.url("message.js")], onAttach: function onAttach(worker) { //show the message worker.postMessage("Hello World"); } }); };
在你的message.js中：
self.on("message", function(message){ if(message !== "undefined"){ Notifier.info(message); } });
有些缺陷需要注意：
- contentScriptFile数组的顺序。 如果message.js将放在第一位：jQuery将不会被重新调整。
- 不要在data.url中放置http：// url（这不起作用）！
- 所有的JavaScript文件应该在数据文件夹中。 （只有main.js应该在lib文件夹中）
在mozillaZine论坛中有一篇很好的文章，它是一步一步描述的： http ://forums.mozillazine.org/viewtopic.php?f=19&t=2105087
我还没有尝试过，尽pipe如此，我犹豫在这里复制信息。
我想这是埃里克说的，但你可以直接从URL加载Javascript。
javascript:var%20s=document.createElement('script');s.setAttribute('src','http://YOURJAVASCRIPTFILE.js');document.getElementsByTagName('body')[0].appendChild(s);void(s);
我假设你想要你的扩展加载JQuery，所以你可以轻松地操纵页面元素？ 我公司的实验室有这样的使用Javascript直接在这里： http : //parkerfox.co.uk/labs/pixelperfect
结果发现当前的@sunsean答案在处理多个负载时并不像预期的那样工作 。 该function应该正确地closures文档，并避免全局状态。
此外，你必须调用jQuery.noConflict(true)才能真正避免与其他插件的冲突！
这是我要写的人（然后，我会避免像瘟疫一样的jQuery（附加组件）…）。 首先是覆盖XUL
<?xml version="1.0"?> <overlay id="test-addon-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript" src="jquery.js"/> <script type="text/javascript" src="overlay.js"/> </overlay>
然后覆盖脚本：
// Use strict mode in particular to avoid implicitly var declarations (function() { "use strict"; // Main runner function for each content window. // Similar to SDK page-mod, but without the security boundaries. function run(window, document) { // jquery setup. per https://stackoverflow.com/a/496970/484441 $ = function(selector,context) { return new jq.fn.init(selector,context || document); }; $.fn = $.prototype = jq.fn; if (document.getElementById("my-example-addon-container")) { return; } let main = $('<div id="my-example-addon-container">'); main.appendTo(document.body).text('Example Loaded!'); main.click(function() { //<--- added this function main.text(document.location.href); }); main.css({ background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8 }); }; const log = Components.utils.reportError.bind(Components.utils); // Do not conflict with other add-ons using jquery. const jq = jQuery.noConflict(true); gBrowser.addEventListener("DOMContentLoaded", function load(evt) { try { // Call run with this == window ;) let doc = evt.target.ownerDocument || evt.target; if (!doc.location.href.startsWith("http")) { // Do not even attempt to interact with non-http(s)? sites. return; } run.call(doc.defaultView, doc.defaultView, doc); } catch (ex) { log(ex); } }, true); })();
这是一个完整的插件作为一个要点 。 只是在jQuery的副本，应该是很好的去。
这可能是不好的做法，但是你有没有考虑过把它包含在内？
代替
$('img',content.document);
你可以试试
$('img',window.content.document);
在我的情况下，它的作品。
