Setting up Firefox

To make Firefox more useful in helping us debug any bugs we find, we need to set some preferences. Thankfully, there is a list on the Mozilla Developer site to help us.

Beyond setting the preferences to make Firefox more verbose, the one thing that you should do is create a link from your Firefox profile extension directory to the directory where your code is stored.

To do this, create a new file in your extensions directory with the name of your extension used in the install.rdf file, and as its contents use the fully qualified path name to your code folder. In my file I have:

/Users/chris.duckett/tmp/chromenewtab/chromenewtab-0.1

Now we are ready to restart Firefox and see our extension in action.

Hopefully, everything will have worked as it should, and you should see the Add-Ons dialog informing you that our extension is installed.

To test it, we need to add the button to the toolbar. Do to this we customise our toolbar and drag our extension button onto it.

When we press the button, we should get an alert box appearing.

That's all we need to do for our button to do what we want.

Searching Firefox's History

In order to do what we set out to do, recreate the Chrome/Opera start page, we will need to find a way to extract the most visited sites from Firefox. With version 3 of Firefox we can use the HistoryService to expose the data we want.

Replace the contents of overlay.js to the following code:

function create_chromenewtab() {
  // Add tab, then make active
  gBrowser.selectedTab = gBrowser.addTab("about:blank");
  var newTab = gBrowser.getBrowserForTab(gBrowser.selectedTab);
  newTab.addEventListener("load", function() { 
    var historyService = Components.classes["@mozilla.org/browser/nav-history-service;1"].getService(Components.interfaces.nsINavHistoryService);

    // no query parameters will get all history
    var options = historyService.getNewQueryOptions();
    options.queryType=0;
    options.sortingMode = options.SORT_BY_VISITCOUNT_DESCENDING;
    options.maxResults=10;

    var query = historyService.getNewQuery();

    // execute the query
    var result = historyService.executeQuery(query, options);

    result.root.containerOpen=true;
    for(var i=0;i<result.root.childCount;i++){
      newTab.contentDocument.body.innerHTML += "<p><a href=\""+result.root.getChild(i).uri+"\">"+(result.root.getChild(i).title==""?result.root.getChild(i).uri:result.root.getChild(i).title)+"</a></p>";
    }
  
  }, true);
}

This code begins with creating a new tab that shows a blank page and makes it the selected tab. Then a listener is added to the tab that is called every time the tab loads a new page -- that means that if you navigate away from the page that is shown, the code will be executed on each and every page loaded.

The internal function calls the HistoryService, constructs a query to fetch the top 10 pages by visit count, and outputs the results as a series of links.

The bugs and wrap-up

Clearly the resultant page is far removed from our original vision, to load each of the most visited pages we would need thumbnails for each page or to use a canvas object that loads the pages.

Thumbnails are a bad approach and the Canvas object failed abysmally when I tried to implement it -- even when I used the code from the MDC site. Theoretically, the Canvas implementation should work.

And as noted above, the internal function runs on each and every load, but that can be very easily fixed.

But on the other side of the coin, we do have a working extension, and your knowledge of how to create and write your own should be enough to get you started.

Good luck and welcome to the wider world of extensions.