我想在 firefox 扩展中使用 jQuery，我在 xul 文件中导入了库，如下所示：
<script type="application/x-javascript" src="chrome://myExtension/content/jquery.js"> </script>
但是在 xul 文件中无法识别 $() 函数，jQuery() 也无法识别。
我搜索了这个问题并找到了一些解决方案，但没有人与我合作：http: //gluei.com/blog/view/using-jquery-inside-your-firefox-extension http://forums.mozillazine.org/ viewtopic.php?f=19&t=989465
我还尝试将'content.document'对象（引用'document'对象）作为上下文参数传递给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);
})();
以下解决方案使在 contentScriptFile 中使用 jQuery 成为可能（目标 1.5 Addon-sdk）
在你的 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);
}
});
您需要注意的一些陷阱：
mozillaZine 论坛中有一篇出色的文章逐步描述了这一点：http ://forums.mozillazine.org/viewtopic.php?f=19&t=2105087
我还没有尝试过，所以我犹豫在这里复制信息。
事实证明，@sunsean 当前的最佳答案在处理多个负载时无法按预期工作。该函数应正确关闭文档并避免全局状态。
此外，您必须调用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 的副本，就可以了。
我认为这就是 Eric 所说的，但您可以直接从 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
这可能是不好的做法，但是您是否考虑过将其包含在内？
代替
$('img',content.document);
你可以试试
$('img',window.content.document);
就我而言，它有效。