How to open an addon page in Firefox?

Add-ons Development
#1

I’m developing a Firefox (SDK) addon that, at some point, needs to open an internal page (so resource://<addon_id>/data/path/to/some_page.html) and still be able to retain the ability to communicate with the addon.

Here are the strategies I’ve employed so far but which have all failed.

  1. Open a new tab using sdk/tabs.open and hope that, since it’s an internal page, self.port is available in the page’s context to the scripts and they can both listen and emit messages. Didn’t work – self isn’t available at all.

  2. Open a new tab using sdk/tabs.open and inject a content script. self this time is available, however no messages are sent to or received from the addon. This seems to be some sort of security measure. Interestingly the failure to send or receive messages is silent and thus there are no messages dumped to the console.

  3. Open a new tab using sdk/tabs.open, gain direct access to the tab’s (DOM) window object and send/receive messages via the window.postMessage API. This seems to require invoking getBrowserForTab and then accessing contentWindow.wrappedJSObject. However, invoking getBrowserForTab in the onOpened handler of the sdk/tabs.open call returns undefined.

I’m stuck.

It seems I’d have a much easier time implementing this with a panel but alas this strategy isn’t available to me as the page needs to be modeless. How can this be achieved?

#2

I encountered a similar problem with tabs. I’m not sure whether my problem is equivalent, but I did manage to get read/write access to a tab. Here’s a link to what I came up with:

http://voodothosting.com/23/wordpress/?p=33

1 Like
#3

Hi Miguel,

I am such a beginner I only have the idea but as yet do not know how to write the code for an Add-on. Your comment comes close to what I want to do and my apologies if I take away from your post.

I’d like an Add-on that changes my Homepage each day of the week. I have no idea of the syntax but from your text I created this:

day of week = Monday resource://<addon_id>/data/path/to/Australia_Page.html
day of week = Tuesday resource://<addon_id>/data/path/to/UK_Page.html
day of week = Wednesday resource://<addon_id>/data/path/to/USA_Page.html
day of week = Thursday resource://<addon_id>/data/path/to/Australia_Page.html
day of week = Friday resource://<addon_id>/data/path/to/USA_Page.html
day of week = Saturday resource://<addon_id>/data/path/to/UK_Page.html
day of week = Sunday resource://<addon_id>/data/path/to/USA_Page.html

I enjoy business/share market and rotating my homepage automatically would really push my brain in the right direction.

Do you think I can use this as a basis?

Thanks,

Dan

#4

Hey Dan did you make any progress?

This is easy to do, I would change he newtab url preference based on date.

#5

Hi Noitidart,

Thanks for taking the time to reply, I’m a guy who like to try/learn anything that seems possible !

I have not yet made progress because I am still trying to work out which language these Add-ons are written.

I’ve tried looking around the previous Add-on Developer’s site but could not find a simple “How To Get Started” page which showed the basics of an Add-on structure or how to even load them into Firefox.

The next step for me is to get a similar Add-on, open it in text editor and insert my comments below and see if it works.

Your idea of date sounds interesting but I cant’ see how to simply express three or four web pages rotating through the dates with out building some code from day 01 to day 31.

I know what I would like but my skills are at kindergarten level right now :slight_smile:

Thanks for your interest,

Dan

#6

Hey folks,
You are mixing things up I think (but I´m not a pro neither).

First you need to open a tab maybe like this:

var self = require('sdk/self');
var tabs = require("sdk/tabs");
tabs.open(self.data.url('panel.html'));

Now you have a page loaded, but for communication you need a contentScript to run. E. g. like this

tabs.on('activate', function(tab) {
  var worker = tab.attach({
    contentScriptFile: self.data.url('my.js')
  });
  worker.port.on("html", function(message) {
    console.log(message)
  })
});

And in that my.js you can access self.port etc.
I hope I made myself clear :smile:
This snippets may not work out of the box (I didn´t compile them).

Maybe this tutorial article helps:

Cheers,
Paul

1 Like
#7

By the way, maybe this snippet might help too. It´s from my own addon thus not very didactical, but should do the job. It is the function openPage which opens a tab with a given URL. Please note, that the argument is a URL-Object, so it allows to pass more stuff (see e.g. tabs.open). The second argument scans all open tabs to check whether this URL is already opened and focusses that instead. But you can modify it to your convenience :wink:

The second function findTab is used somewhere else in my code thats why it is a seperate function, but it could be merged into openPage. I added some call examples at the bottom.

function openPage(urlObject, focusIfExists){    
    if(!urlObject || !urlObject.url){
        console.log('Error opening page...');
        return;
    }
    
    var isOpen = false;
    
    if(focusIfExists){
        let tab = findTab(urlObject.url);
        if(tab){
            isOpen = true;
            tab.reload();
            tab.activate();
            log('Focussing already opened tab( ' + urlObject.url + ' )...');
        }
    }
    if(!isOpen){
        tabs.open(urlObject);
        log('Opening new tab in new window...');
    }
}

function findTab(url){
    for each (let win in windows){
        for each (let tab in win.tabs){
            if(tab.url == url){
                log(url + ' found open');
                return tab;
            }
        }
    }
    return false;
}

// Some call examples here:
openPage({url:'https://addons.mozilla.org/addon/auto-plugin-checker/'}, true)

openPage({
    url: 'about:addons',
    onReady: function(tab) {
        tab.attach({
            contentScriptWhen: 'end',
            contentScriptFile: data.url('my.js')
        });
    }
}, true);
1 Like