web-dev-qa-db-ja.com

Firefox拡張機能でjQueryを使用する方法

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-extensionhttp://forums.mozillazine.org/viewtopic.php?f=19&t=989465

また、 'content.document'オブジェクト（ 'document'オブジェクトを参照する）を、次のようにjQuery関数のコンテキストパラメーターとして渡そうとしました。

$('img',content.document);

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

javascriptjqueryfirefoxfirefox-addon
57
user434917

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

})();
28
sunsean

次のソリューションにより、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フォルダーにある必要があります）
10
David

この詳細な手順を説明するmozillaZineフォーラムには優れた記事があります。 http://forums.mozillazine.org/viewtopic.php?f=19&t=2105087

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

3
Skrud

@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のコピーをドロップするだけで、うまくいくはずです。

2
nmaier

これはエリックが言っていたことだと思いますが、JavascriptをURLから直接ロードできます。

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

2
Craig Stanford

の代わりに

$('img',content.document);

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

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

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

0
Alexander Loginov

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

0
Eric Wendelin