CODEWITHSUNDEEP
javascriptgoogle-chromefirefoxgoogle-chrome-extensionfirefox-addon
lbrandao
lbrandao

Reputation: 4373

Firefox version of: chrome.tabs.onUpdated.addListener

I have a Chrome extension that listens for updates on a page. The onUpdated method calls the listener after any change made on the page. If you add or remove a DOM node>, the listener is called. UPDATE: it seems it's called after loading requests.

I started to port this extension to Firefox and so far I couldn't find a similar functionality. I think I might need to dig into XPCOM.

Could someone point me to the right direction? Does Firefox offer something similar?

Thanks!

Upvotes: 0

Views: 1510

Answers (3)

willlma
willlma

Reputation: 7543

Unfortunately, you need to wait until a tab is ready to have access to the URL. So, using the Add-on SDK, a simplified version of this (just for the active tab) would be:

main.js

var tabs = require('sdk/tabs');
var tab = tabs.activeTab;
var url = tab.url;
tab.on('ready', function() {
    if (tab.url === url) {
        //user just refreshed the page
        return;
    }
    url = tab.url;
    //The URL is different, let's code…
});

See the docs for the tab module for more info. If you wanted it to work for multiple tabs, you would start with tabs.on('ready', function(tab) {…}); You would then have to create an array of URLs then check if (urls[tab.index] === tab.url) …

Upvotes: 1

Kashif
Kashif

Reputation: 1263

Yes Firefox does support that. It is just that in Firefox extensions can be xul-based, bootstraped or sdk-based and sdk may not support everything you might need for your extension to work.

The following solution applies to both xul-based and bootstraped extensions.

In my bootstrapped extension I use this:

First, define a tabProgressListener. The onLocationChange is what you are looking for

var tabProgressListener = {
  onLocationChange: function (
      /*nsIDOMXULElement*/ aBrowser,
        /*nsIWebProgress*/ aWebProgress,
        /*nsIRequest*/ aRequest,
        /*nsIURI*/ aLocation) {
        myExtension.handleTabLocationChanged(aBrowser, aLocation);
  },

  onProgressChange: function() {},
  onSecurityChange: function() {},
  onStateChange: function() {},
  onStatusChange: function() {},
  onRefreshAttempted: function(
    /*nsIDOMXULElement*/ aBrowser,
    /*nsIWebProgress*/ webProgress,
    /*nsIURI*/ aRefreshURI,
    /*long*/ aMillis,
    /*boolean*/ aSameURI) {
      // must return true to allow http-meta refreshes
      return true;

  },
  onLinkIconAvailable: function() {}
};

and then add tabProgressListener on window load

var gBrowser = document.getElementById('content');
gBrowser.addTabsProgressListener(tabProgressListener);

Finally, remember to remove the progress listener

gBrowser.removeTabsProgressListener(tabProgressListener);

Note that although I am not a fan of addon-sdk, it is much easier to write a sdk extension than a bootstraped one.

Upvotes: 2

Rob W
Rob W

Reputation: 349262

If you have a Chrome extension already, you should definitely look in the Addon SDK when you're trying to port it to a Firefox Add-on (this is the "new" way of writing Firefox add-ons, opposed to writing XUL/XPCOM). This SDK provides most of the "standard extension functionality" that you find in other extension platforms.

I'm a bit puzzled about the way of phrasing your question. Your title is crystal-clear: You're looking for the equivalent of chrome.tabs.onUpdated. However, in your question's body, you're implying that this event is somehow used to detect when a DOM node is added/removed. This is false.

There is not a single equivalent to chrome.tabs.onUpdated in the Add-on SDK:

These events can only be used in the add-on's main.js (equiv. of Chrome's background page). If you want to send a message to a content script, see this guide.

If you're not interested in any of the tab update events (described above), and only in DOM node changes, just stick to content scripts and have almost the same code in your Chrome extension and Firefox add-on. Chrome's content script are declared in the manifest file, whereas Firefox' content scripts are declared in main.js.

Both Chrome and Firefox support Mutation Observers, which can be used to efficiently get notified of DOM node changes.

Upvotes: 6

Related Questions