CODEWITHSUNDEEP
javascriptfirefox-addonfirefox-addon-sdk
Adam Heath
Adam Heath

Reputation: 4743

Firefox addon-sdk - listen for page navigation

I am trying to port a Chrome plugin to Firefox using the addon-sdk and I cannot find an equivalent method to listen to tab navigation events.

What I need to do is keep data per page (detected from the DOM), and remove this as soon as the user navigates to a new page in the tab (but, maintain the data on refresh)

I Chrome, to do something when a tab changes URL, I can use:

chrome.tabs.onUpdated.addListener(function(tab_id, changeInfo, tab) {
    if(changeInfo.status == 'loading' && changeInfo.url) {
        //DO STUFF AS THE URL CHANGED
    }
});

In Firefox using the addon-sdk I have tried using:

tabs.on('open', function(tab){
  tab.on('ready', function(tab){
    if(tab.cachedURL != tab.url) {
      //DO STUFF AND SET CACHE
    }
  });
});

The problem is that I cannot hook into the initial navigation event, so in-between the user starting navigatiion and the DOM of the new page being ready, the old data is available.

Basically I need a way to hook into the initial navigation of a tab and ideally see where it's going (just as I can in Chrome).

Any thoughts?

Upvotes: 9

Views: 2735

Answers (2)

Lori
Lori

Reputation: 1422

As far as I know, this should capture all cases of opening tabs, switching between tabs and navigating within tabs. The global variable url should contain the url of the active tab at all times, and the console.log call should log all events that affect that.

var tabs = require("sdk/tabs");
var url;

var updateURL = function (tab) {
  var oldURL = url;
  url = tab.url;
  console.log(oldURL+" --> "+url);
};

tabs.on("activate", updateURL);
tabs.on("pageshow", updateURL);

updateURL(tabs.activeTab);

Upvotes: 0

BenoitParis
BenoitParis

Reputation: 3184

At the moment there is no way to do detect page loading with tabs. However you can do it with the start event in page-mods. I'm also interested in doing this the right manner, so please ping me if you find a way without using page-mods: 

var pageMod = require("page-mod");
pageMod.PageMod({
    include: "*", // All DOM windows (ie. all pages + all iframes).
    contentScriptWhen: "start", // page starts loading, at this point you have
                                // the head of the document and no more
    contentScript: "", // inject no script, you can even omit this
    onAttach: function onAttach(worker) {
            if (worker.tab.url == worker.url) // test if at top level
                doStuff(worker.tab.url);
            // cleanup the attached worker
            worker.destroy();
        }
    }
);

Also, I don't know about the speed of the onAttach trigger, as with all message passing in ff extensions, it could add some time (maybe 150ms? please come back to me if you have a benchmark on this)

Upvotes: 11

Related Questions