Firefox addon Javascript Object Management

Question

Hey there!
I submitted my add on to the Mozilla add ons site and the editor got back and told me only one problem:

Your preliminary review request has been approved.

Here are a few things that you need to fix in your next version, specially if you want to apply for full approval:

1) In order to prevent conflicts with other add-ons that may be installed by users, you need to wrap your "loose" variables and functions within a JavaScript object. You can see examples on how to do this at https://developer.mozilla.org/en/XUL_School/JavaScript_Object_Management .

So I went there and started reading up... but it's a lot of stuff that feels like gibberish to me and I confused myself (not hard to do at all!)

Using the first example on that page, can you kindly tell me how to modify my xul file?

Presently it looks like this:

  <?xml version="1.0"?>
  <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

  <overlay id="quickfilterOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://quickfilter/content/quickfilter.js">
  </script>
  </overlay>

Thanks in advance! R

EDIT:
Have uploaded the entire add on here: http://www.mediafire.com/?fff6bjzjy6n39nx

Answer 1

It is advisable to encapsulate your code in a namespace to avoid name collisions. Here's what I always do in my addons:

if(!org) var org={};
if(!org.janek) org.janek={};

org.janek.Addon = function() {

  var pub = {};
  var self = this;

  pub.init = function() {
     //
     // Initialize addon, setup listeners, ...
     //
  }

  ...

  self.thisIsAPrivateMethod = function(arg) {
    // method that's only visible inside org.janek.Addon
  }

  return pub;
}();


// Init addin after window loaded
window.addEventListener("load",
                        org.janek.Addon.init,
                        false);

First, I create my own namespace org.janek, making sure it doesn't already exist. Then I add the object Addon which will contain the code for my addon.

Please note the "pub" and "self" objects. Every method that should be callable from other objects is added to the pub object. Private methods are added to self.

To be more specific, I would change the quickfilter_extension to the following code (I included the global prefManager object as an example):

var quickfilter_extension = function() {
    var pub = {};

    // interface for preferences
    pub.prefManager = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);

    pub.init = function() {
        //Initiating the progressListerner
        gBrowser.addProgressListener(quickfilter_urlBarListener, Components.interfaces.nsIWebProgress.NOTIFY_STATE_DOCUMENT);
        //Load the block list xml form server
        quickfilter_quickfilter.request_xml();
    },

    pub.uninit =  function() {
        // Remove the progressListerner
        gBrowser.removeProgressListener(quickfilter_urlBarListener);
    }

    return pub;
}();

Code that uses the prefManager object now needs to go through the quickfilter_extension object:

redirectToAnotherUrl:function()
{
    [ ... omitted ...]
    qucikFilterRedirectCount = quickfilter_extension.prefManager.getCharPref("extensions.quickfilter_redirect_count");

    [ ... omitted ...]
}

The blog for Yahoo's javascript library YUI has a nice article about the pattern .

Answer 2

The reviewer is talking about your JS code, suggesting that you have global variables/functions.

For example:

var x = 1;
function foo() {}

Compare that with:

MyPluginName = {};
MyPluginName.x = 1;
MyPluginName.foo = function(){}