User Tools

Site Tools


developer_center:recipe_book:extensions_and_core:tabbed_browser

Tabbed Browser

Say you want to handle an action when the user types some text in the location bar (otherwise known as the URL bar). This may be because you want to prevent them from changing the page (boooo!), or to redirect them to a cached/archived version of the page (think archive.org/GoogleCache extension? weird, but this is contrived… run with me here).

To do this, we want to add an event handler to the “keypress” event for the urlbar, e.g.

function myOnLoad() {
    // Prevent the user from typing something in the URL bar and moving
    // away from the first tab
    var urlbar = document.getElementById("sb-locationbar-textbox-textbox");
    urlbar.addEventListener("keypress", function(e) {
        if (e.keyCode == 13) {
            // Enter key pressed
            if (window.top.gBrowser.mCurrentBrowser == 
                        window.top.gBrowser.getBrowserAtIndex(0))
            {
                alert("Can not change page on the first tab.");
                e.stopPropagation();
            }
        }
    }, true);
}

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

The above prevents the user from navigating away from the first tab by getting a reference to the current tab (window.top.gBrowser.mCurrentBrowser) and checking it against the first (zero'th) tab (window.top.gBrowser.getBrowserAtIndex(0)). If they're one and the same, then it throws an alert and stops the page from navigating there (e.stopPropagation())

Overriding Tab Closure

If you want to prevent the user from removing certain tabs, or want to insert your own code to run when the user tries to close a tab, you can simple do:

// Save a reference to the original removeTab function
gBrowser.realRemoveTab = gBrowser.removeTab;
// Define our new removeTab function
gBrowser.removeTab = function(aTab) {
    if (window.top.gBrowser.mCurrentBrowser == 
        window.top.gBrowser.getBrowserAtIndex(0))
    {
        alert("Can not close the first tab.");
    } else {
        this.realRemoveTab(aTab);
    }
}

The above prevents the user from closing the first tab.

Tracking the Current Media List

To track the sbIMediaList shown in the browser, you'd need to monitor both loading and tab switching. This is actually quite complicated, so a convenience event has been added.

Listen for “TabContentChange” and re-check the state of gBrowser.currentMediaListView.

function myChangeListener() {
  if (gBrowser.currentMediaListView) {
    alert(gBrowser.currentMediaListView.mediaList.guid);
  } 
}
gBrowser.addEventListener('TabContentChange', myChangeListener, false);
developer_center/recipe_book/extensions_and_core/tabbed_browser.txt · Last modified: 2013/12/28 10:32 by geekshadow