Getting Started With FireFox Plugin

Last week I was building up the FireFox Extension to support our application on FireFox Browser. Here are the few steps to get started :

  • Visit https://builder.addons.mozilla.org
  • Go to Create an Add-on Now
  • Add the following code to the main.js
  • main.js
    1
    2
    3
    4
    5
    6
    7
    8
    
    require("widget").Widget({
      id: "widgetID1",
      label: "My Mozilla Widget",
      contentURL: "http://www.mozilla.org/favicon.ico",
      onClick: function(event) {
          require("tabs").open("http://www.mozilla.org");
      }
    });    
    
  • Click on eye like icon
  • It will ask you to install an addon in case this is your first time with FireFox Extension Builder.

  • Your Extension is installed. Clicking on which will open up a new tab with ‘http://www.mozilla.org’
  • In my case I needed to monitor a few specific pages so I changed the content for main.js something like
  • main.js
    1
    2
    3
    4
    5
    
    var pageMod = require("sdk/page-mod");
    pageMod.PageMod({
      include: "*.mozilla.org",
      contentScript: 'window.alert("Page matches ruleset");'
    });    
    

    This will alert us in case there is a page match with url specified with include. Also we can change the content Script to execute a complete Javascript file or include some other plugins and maipulate DOM.

    main.js
    1
    2
    3
    4
    5
    6
    7
    
    var data = require("sdk/self").data;
    var pageMod = require("sdk/page-mod");
    
    pageMod.PageMod({
      include: "*",
      contentScriptFile: [self.data.url("jquery-1.7.min.js"),self.data.url("my-script.js")]
    });    
    

Sources :

Comments