How to add a tab, make it active & add event listener to it

Talk about add-ons and extension development.
Post Reply
Orangutan100
Posts: 54
Joined: July 9th, 2015, 11:56 am

How to add a tab, make it active & add event listener to it

Post by Orangutan100 »

Hello,

I'm trying to allow the user to open a tab either in the foreground (i.e., add a tab and make it active) or in the background by ctrl+clicking or ctrl+shift+clicking, respectively, the toolbar icon of my add-on. With either of these methods, I want to wait for the tab to load, and then do some further changes.

Now to do it when the tab is to be opened in the background, I found the code here: https://developer.mozilla.org/en-US/Add ... ed_browser, under the heading 'Manipulating content of a new tab'. I'm copying it here:

Code: Select all

var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
newTabBrowser.addEventListener("load", function () {
  newTabBrowser.contentDocument.body.innerHTML = "<div>hello world</div>";
}, true);
This works perfectly. But I can't find a way to do the same for when the tab is to be opened in the foreground. I know I can add the tab and make it active by using

Code: Select all

gBrowser.selectedTab = gBrowser.addTab("http://www.google.com/");
but how do I wait for it to load completely / add an event listener to it?

Thanks.
Noitidart
Posts: 1168
Joined: September 16th, 2007, 8:01 am

Re: How to add a tab, make it active & add event listener to

Post by Noitidart »

This is the classic way. If you are starting from scratch I would recommend looking into the WebExtension APIs. I personally don't know about them, but it's the future.



With your above code this is how you would do it, Now you can't addEventListener to this specific tab. You have to add it to the gBrowser:

Code: Select all

var { utils:Cu } = Components;
Cu.import('resource://gre/modules/Services.jsm');
var mytab;
function handler(e) {
    // this is not e10s friendly
    var contentWindow = e.originalTarget.defaultView;

   if (contentWindow.frameElement) {
        // its a frame
   } else {
       // its top window
       var curbrowser = gBrowser.getBrowserForContentWindow(contentWindow);
       var curtab = gBrowser.getTabForBrowser(curbrowser);
       if (curtab == mytab) {
            // this is your tab;
       }
   }
}


var win = Services.wm.getMostRecentWindow('navigator:browser');
if (win) {
   var gBrowser = win.gBrowser;

    gBrowser.addEventListener('load', handler, false);

    mytab = gBrowser.loadOneTab('blah.com', { inBackground:false });
// inBackgorund false will focus it. but you can you can focus it at a later time by doing `gBrowser.selectedTab = mytab;` if you save reference to `mytab`

   
} else {
   console.warn('no window of type "browser" is open');
}

Orangutan100
Posts: 54
Joined: July 9th, 2015, 11:56 am

Re: How to add a tab, make it active & add event listener to

Post by Orangutan100 »

Thanks a lot! I will try it out.

BTW, this isn't an add-on really, I just said it to simplify things. It is actually a custom button.
morat
Posts: 6403
Joined: February 3rd, 2009, 6:29 pm

Re: How to add a tab, make it active & add event listener to

Post by morat »

Try this:

Code: Select all

var browser = gBrowser.getBrowserForTab(
  gBrowser.selectedTab = gBrowser.addTab("http://www.mozillazine.org/"));
browser.addEventListener("load", function onLoad() {
  browser.removeEventListener("load", onLoad, true);
  browser.contentDocument.body.style.backgroundColor = "pink";
}, true);
Orangutan100
Posts: 54
Joined: July 9th, 2015, 11:56 am

Re: How to add a tab, make it active & add event listener to

Post by Orangutan100 »

Thanks! I will try it and let you know how it works.

BTW, I think you have helped me separately across three forums by now (I have different names). Thank you for taking the time to help people!
Post Reply