Question

我想在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);

但仍然无效有没有人遇到过这个问题？

Answer 1

我使用以下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);

})();

Answer 2

以下解决方案可以在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); 
    }
});

您需要注意的一些陷阱：

contentScriptFile数组的顺序。如果message.js放在第一位：jQuery将不会被重新组合。
不要在data.url中放置http：// url（这不起作用）！
您的所有javascript文件都应位于数据文件夹中。（只有main.js应该在lib文件夹中）

Answer 3

mozillaZine论坛中有一篇很好的文章逐步描述了这一点：http://forums.mozillazine.org/viewtopic.php?f=19&t=2105087

我还没有尝试过，尽管如此，我仍然犹豫在这里复制信息。

Answer 4

我认为这就是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

Answer 5

通过@sunsean does not work as expected when it comes to handling multiple loads计算出当前的答案。该函数应正确关闭文档并避免全局状态。

此外，您必须致电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);
})();

这是a complete add-on as a gist。只需放入一份jquery副本就可以了。

Answer 6

这可能是不好的做法，但您是否考虑过将其包含在内？

Answer 7

而不是

$('img',content.document);

你可以尝试

$('img',window.content.document);

就我而言，它有效。

如何在Firefox扩展中使用jQuery

7 个答案: