Skip to main content

Visit Mozilla.org

Code snippets:On page load

From MDC

This article is for XUL/JavaScript developers who want to have custom code executed each time a new page is loaded in browser/mail. If you need finer control over custom code execution—for example, as documents are loading or when tabs are switched—see Progress Listeners.

Progress listeners allow extensions to be notified of events associated with documents loading in the browser and with tab switching events. Progress listeners implement the nsIWebProgressListener interface.

Contents

[edit] Creating an overlay

First, you need to create an overlay to one (or more, depending on which applications you target) of the following XUL documents:

ApplicationURI to overlay
Firefoxchrome://browser/content/browser.xul
Thunderbirdchrome://messenger/content/messenger.xul
Navigator from Seamonkeychrome://navigator/content/navigator.xul

[edit] Attaching a script

Attach a script to your overlay, and add a load event listener to appcontent element (browsers) or messagepane (mail) by putting this code in the script: 

window.addEventListener("load", function() { myExtension.init(); }, false);

var myExtension = {
  init: function() {
    var appcontent = document.getElementById("appcontent");   // browser
    if(appcontent)
      appcontent.addEventListener("DOMContentLoaded", this.onPageLoad, true);
    var messagepane = document.getElementById("messagepane"); // mail
    if(messagepane)
      messagepane.addEventListener("load", function () { myExtension.onPageLoad(); }, true);
  },

  onPageLoad: function(aEvent) {
    var doc = aEvent.originalTarget; // doc is document that triggered "onload" event
    // do something with the loaded page.
    // doc.location is a Location object (see below for a link).
    // You can use it to make your code executed on certain pages only.
    if(doc.location.href.search("forum") > -1)
      alert("a forum page is loaded");
  }
}

Current Firefox trunk nightlies will fire the onPageLoad function for not only documents, but xul:images (favicons in tabbrowser). If you only want to handle documents, ensure aEvent.originalTarget.nodeName == "#document" [1].

[edit] Running code on an extension's first run or after an extension's update

Attach a script to your browser overlay, and add a load event listener by putting the following code in the attached script. 

var Prefs = Components.classes["@mozilla.org/preferences-service;1"]
                   .getService(Components.interfaces.nsIPrefService);
Prefs = Prefs.getBranch("extensions.my_extension_name.");


var Overlay = {
  init: function(){
    var ver = -1, firstrun = true;

    var gExtensionManager = Components.classes["@mozilla.org/extensions/manager;1"]
                            .getService(Components.interfaces.nsIExtensionManager);
    var current = gExtensionManager.getItemForID("extension@guid.net").version;
    //gets the version number.
    //"extension@guid.net" should be replaced with your extension's GUID.
		
    try{
	ver = Prefs.getCharPref("version");
	firstrun = Prefs.getBoolPref("firstrun");
    }catch(e){
      //nothing
    }finally{
      if (firstrun){
        Prefs.setBoolPref("firstrun",false);
	
        // Insert code for first run here        

        // The example below loads a page by opening a new tab.
        // Useful for loading a mini tutorial
        window.setTimeout(function(){
          gBrowser.selectedTab = gBrowser.addTab("about:mozilla");
        }, 1500); //Firefox 2 fix - or else tab will get closed
				
      }		
      
      if (ver!=current && !firstrun){ // !firstrun ensures that this section does not get loaded if its a first run.
        Prefs.setCharPref("version",current);
        
        // Insert code if version is different here => upgrade
      }
    }
    window.removeEventListener("load",function(){ Overlay.init(); },true);
  }
};


window.addEventListener("load",function(){ Overlay.init(); },true);

[edit] References

Retrieved from "http://developer.mozilla.org/en/docs/Code_snippets:On_page_load"