58

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);

しかし、まだ機能していません。以前にこの問題に遭遇した人はいますか？

4

7 に答える 7

28

私は以下を使用します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);

})();
于 2009-01-30T19:53:29.580 に答える
10

The following solution makes it possibile to use jQuery in contentScriptFile (Targetting 1.5 Addon-sdk)

In your 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");
          }
    });

};

In your message.js : 

self.on("message", function(message){
    if(message !== "undefined"){
       Notifier.info(message); 
    }
});

Some pitfalls you need to watchs out for:

  • The order of the contentScriptFile array. if message.js would be placed first: jQuery won't be reconized.
  • Do not place a http:// url in the data.url (this does not work)!
  • All your javascript files should be in the data folder. (only main.js should be in lib folder)
于 2012-03-08T20:56:42.870 に答える
3

このステップバイステップを説明する優れた記事がmozillaZineフォーラムにあります：http： //forums.mozillazine.org/viewtopic.php？f = 19＆t = 2105087

まだ試していませんが、ここに情報を複製することを躊躇します。

于 2011-03-08T05:51:14.180 に答える
0

悪い習慣かもしれませんが、インラインに含めることを検討しましたか?

于 2009-01-29T17:04:05.943 に答える
0

それ以外の

$('img',content.document);

あなたが試すことができます

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

私の場合、それは機能します。

于 2013-07-14T08:46:32.137 に答える