úterý 22. března 2011

jQuery a doplněk Firefoxu?

Ano, jde to... Není to těžké narvat jQuery do doplňku Firefoxu a ukážu vám jak.
Tuto funkcionalitu jsem řešil s jQuery 1.5.1 a Firefoxem 3.6.15.
Nebudu sem rozepisovat jak se dělá celý doplněk Firefoxu, k tomu vám pomůžou jiné weby jako například How to develop a Firefox extension nebo přímo i XUL School Tutorial.

Celý kouzlo je v tom, že nelze nahrát jQuery před zavoláním spouštěcí metody v JavaScriptu, protože pak nastává kolize s Firefoxem a může se stát, že zmizí tlačítka v toolbaru nebo dokonce zmizí i jiný doplněk.

Soubor knihovny jQuery nahrajte do složky chrome/content/
Ve vašem hlavním JavaScriptovém souboru doplňku chrome/content/nazev.souboru.js použijte metodu spouštění. Tento kousek kódu vložte nebo zeměňte za starý na konci souboru:
window.addEventListener("load", function(e) {
  mujDoplnek.onLoad(e);
}, false);

Celý základní kód JavaScriptu s načtením jQuery by mohl vypadat například takto:

var mujDoplnek= function () {
var prefManager = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
var jQuery;

return {
  init : function () {
    gBrowser.addEventListener("load", function () {
      var autoRun = prefManager.getBoolPref("extensions.mujdoplnek.autorun");
      if (autoRun) {
        mujDoplnek.run();
      }
    }, false);
  },

  run : function () {
    mujDoplnek.jQuery = mujDoplnek.onLoad(content.window.event);
    mujDoplnek.start();

    // zde lze použít volání jQuery jak jsme zvyklí
    // například mujDoplnek.jQuery("div").slideUp(250);
  },

  onLoad : function(e){
    return mujDoplnek.loadjQuery(content.window);
  },

  loadjQuery: function(wnd){
    var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader);
    loader.loadSubScript("chrome://mujdoplnek/content/jquery-1.5.1.js", wnd);
    var jQuery = wnd.jQuery.noConflict(true); // důležité nastavení, aby nenastala kolize s jinou knihovnou nebo s jiným JavasCriptem na stránkách
    return jQuery;
  },

  start : function(){
    // zde také lze použít volání jQuery jak jsme zvyklí
    // například mujDoplnek.jQuery("div").slideDown(250);

    alert(mujDoplnek.jQuery("div").length);
  }

};
}();
window.addEventListener("load", function(e) {
  mujDoplnek.onLoad(e);
}, false);

Neříkám, že je to dokonalé, spoustu věcí tam bude třeba ještě odchytat, ale postupem času to tady upravím do dokonalosti :-)

Žádné komentáře:

Okomentovat

 
]]>