0

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

JuanDeLosMuertos
  • 4,532
  • 15
  • 55
  • 87
  • You can do it quite quickly and easily with Crossrider. Simply use its built-in jQuery support and bind the onchange event for $jquery("input[type=file]"). Crossrider will create for your crx, xpi and exe extension files for your cross browser extension. – shdev Jul 06 '11 at 00:06

1 Answers1

4

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.

Matthew Flaschen
  • 278,309
  • 50
  • 514
  • 539
  • I've posted the same question on mozillazine: http://forums.mozillazine.org/viewtopic.php?f=19&t=1239905 check it out, it contains the complete overlay.js – JuanDeLosMuertos May 10 '09 at 11:18
  • Thank for posting the code, however it doesn't appear you've followed any of my advice (re: window.content.document). It would also be more efficient to (if feasible) scan the page only once at load time, and add event listeners only to the file boxes. That would avoid having an onchange on the whole window (which is likely to significantly slow things down). – Matthew Flaschen May 10 '09 at 16:23
  • I'm aware of the best efficiency scanning the page only once, I'll implement this later. The result using both top.window.content.document and aEvent.explicitOriginalTarget is `object HTMLInputElement`, so I think this sould not be a problem... The problem is the way I should follow in order to put a button beside the "file picker", nothing else. Thanks :) – JuanDeLosMuertos May 10 '09 at 16:34
  • Okay, no problem. As for placing the button, there are varies ways. Again, you should get a reference to top.window.content.document (at which point it's just like regular DOM manipulation). Then, you can do something like input.parentNode.appendChild(top.window.content.document.createElement("button")). That's simplified, but you should get the idea. – Matthew Flaschen May 10 '09 at 16:50
  • thank you very much, now I'm able to put the button into the page! Now I have only to find the right position – JuanDeLosMuertos May 10 '09 at 17:25
  • solved! The button is in the right position! :D var button = top.window.content.document.createElement("input"); button.setAttribute("type", "button"); button.setAttribute("value", "valore"); button.setAttribute("name", "nome"); var parentDiv = input.parentNode; parentDiv.insertBefore(button, input); – JuanDeLosMuertos May 10 '09 at 17:40
  • Very glad to hear you got everything ironed out. :) – Matthew Flaschen May 11 '09 at 05:11