How to add elements to web page from Firefox extension

Question

I'm going to develop a Firefox extension which should put a button in the loaded pages, when the tag: <input type="file" ... > is found and a file has been selected.

Likewise, I think the skype toolbar does a similar thing: when a website contains a phone number, the Skype extension automatically converts it into a button that can be clicked to call skype contacts.

I'm on a GNU/Linux system, and unfortunately the skype extension does not work on Linux versions of Firefox/skype, so I can't even try to reverse engineer anything...

The firefox extension contains the file overlay.js: this file contains the main logic for the extension. Here I can find <input type="file" ... > nodes simply with this code:

onFileChosen: function(aEvent) {
var input = aEvent.explicitOriginalTarget; 
if(input.type=="file"){
    alert(input.value); }
}

window.addEventListener("change", function(e) {xpitest.onFileChosen(e)},false);

So, when a file has been chosen, an alert window appears and shows the file name.

But, how can I put a button in the page when a file has been chosen?

I've been trying with the various document.parentNode and similars, but nothing seems to work.

Or is it possible that I can't put stuff into the loaded page?

Thanks

Answer 1

From the chrome context, you can get the current content document (e.g. the page with the file chooser) using top.window.content.document . At that point, it's just like your JS is running on the page. If that doesn't help, please post your code with as much info as possible. See also Working with windows in chrome code.

And you definitely can inject things into the page.