How can I check if url of current browser tab is changed?

Question

I need it to use in my Firefox extension. I already tried window.onload event listener, and check if current url == old url, and it's a good idea, but it doesn't work when page loads PDF.

I saw hash changed function too but it works only with Firefox 3.6; I need it to work at least with Firefox 3.

So, I need an event listener that check if document.location changes.

Answer 1

For example, you could use:

var mainWindow = window
    .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
    .getInterface(Components.interfaces.nsIWebNavigation)
    .QueryInterface(Components.interfaces.nsIDocShellTreeItem).rootTreeItem
    .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
    .getInterface(Components.interfaces.nsIDOMWindow);

mainWindow.getBrowser().addEventListener("DOMContentLoaded",
                        your_function, false);

But, the point is, you need to add the listener to the browser, not window.

EDIT
See https://developer.mozilla.org/En/Code_snippets/Tabbed_browser for info on accessing the browser from different contexts, as well as some other useful info.

EDIT
Just to add a little more detail....

function your_function(event) {
    if (event.originalTarget instanceof HTMLDocument) {
    var doc = event.originalTarget;
        // if it's just a frame element, then return and wait for the
        // main event to fire.
        if (event.originalTarget.defaultView.frameElement)
             return;

        // now you can use doc.location however you want
    }
}

Note that this will respond to pages opened in any tab, not a specific tab.

---

For a specific tab, you could use something like this:

var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
newTabBrowser.addEventListener("load", function () {
    newTabBrowser.contentDocument.body.innerHTML = "<div>hello world</div>";
}, true);

The above adds a new tab and then adds a listener. However, for all tabs, you'll need something like the following. And then add the "DOMContentLoaded" event listener on each tab when added (and removed when closed).

You may also want to see: https://developer.mozilla.org/En/Code_snippets/Tabbed_browser#Notification_when_a_tab_is_added_or_removed and https://developer.mozilla.org/En/Code_snippets/Tabbed_browser#Getting_document_of_currently_selected_tab

(For preservation)

function exampleTabAdded(event) {
  var browser = gBrowser.getBrowserForTab(event.target);
  // browser is the XUL element of the browser that's been added
}

function exampleTabMoved(event) {
  var browser = gBrowser.getBrowserForTab(event.target);
  // browser is the XUL element of the browser that's been moved
}

function exampleTabRemoved(event) {
  var browser = gBrowser.getBrowserForTab(event.target);
  // browser is the XUL element of the browser that's been removed
}

// During initialisation
var container = gBrowser.tabContainer;
container.addEventListener("TabOpen", exampleTabAdded, false);
container.addEventListener("TabMove", exampleTabMoved, false);
container.addEventListener("TabClose", exampleTabRemoved, false);

// When no longer needed
container.removeEventListener("TabOpen", exampleTabAdded, false);
container.removeEventListener("TabMove", exampleTabMoved, false);
container.removeEventListener("TabClose", exampleTabRemoved, false);

This should get you 99% of the way there.

Answer 2

Add a Progress Listener and monitor location changes inside tab. Cover tab swithches with Addon SDK.

To install a listener, convert SDK tab to its raw (old) representation using viewFor. Backward conversion is possible with modelFor and getTabForContentWindow.

const tabs = require("sdk/tabs");
const {viewFor} = require('sdk/view/core');
const {modelFor} = require('sdk/model/core');
const {getBrowserForTab, getTabForContentWindow} = require("sdk/tabs/utils");
const {Ci, Cu} = require("chrome");
Cu.import("resource://gre/modules/XPCOMUtils.jsm", this);

var progressListener = {
QueryInterface: XPCOMUtils.generateQI([Ci.nsIWebProgressListener, Ci.nsISupportsWeakReference]),
    onLocationChange: function(aProgress, aRequest, aURI) {
        var highLevel= modelFor(getTabForContentWindow(aProgress.DOMWindow));
        console.log("onLocationChange ", highLevel.url);
    }
};

tabs.on('open', function(newTab) {
    var lowLevel = viewFor(newTab);
    var browser = getBrowserForTab(lowLevel);
    browser.addProgressListener(progressListener);
});

Inspired by Converting to chrome windows