Remove an item from a web page using a Firefox extension
I am going to develop a firefox extension that adds a button next to file input fields (tag <input type="file">
) when selecting a file.
The overlay.js file, which contains the extension logic, handles the "select file" event with this method:
var xpitest = {
...
onFileChosen: function(e) {
var fileInput = e.explicitOriginalTarget;
if(fileInput.type=="file"){
var parentDiv = fileInput.parentNode;
var newButton = top.window.content.document.createElement("input");
newButton.setAttribute("type", "button");
newButton.setAttribute("id", "Firefox.Now_button_id");
newButton.setAttribute("value", "my button");
newButton.setAttribute("name", "Firefox.Now_button_name");
parentDiv.insertBefore(newButton, fileInput);
}
}
...
}
window.addEventListener("change", function(e) {xpitest.onFileChosen(e)},false);
My problem is that every time I select a file a new button is added, see this image:
http://img11.imageshack.us/img11/5844/sshotn.png
If I select the same file more than once, no new button appears (that's correct).
As we can see, when the file was first entered, only one file was selected.
On the second, I selected two different files, in fact two buttons were created ...
On the third, I selected three different files.
The correct behavior should be as follows:
- when the file is selected create a my_button next to the input field
- If my_button exists, delete it and create another one (I need it , I have to hook it up to a custom event that will do something with the filename)
My question is, how can I remove the button correctly? Please note that the my_button html code does not appear in the page source!
thanks
a source to share
solvable. I have set an ID for each with the following method:
onPageLoad: function(e){
var inputNodes = top.window.content.document.getElementsByTagName("input");
for(var i=0; i<inputNodes.length; i++){
if(inputNodes[i].type=="file")
inputNodes[i].setAttribute("id",i.toString());
}
}
I only call this method on page load:
var appcontent = document.getElementById("appcontent"); // browser
if(appcontent)
appcontent.addEventListener("DOMContentLoaded", xpitest.onPageLoad, true);
Then I changed the onFileChosen method as follows:
onFileChosen: function(e) {
var fileInput = e.explicitOriginalTarget;
if(fileInput.type=="file"){
var parentDiv = fileInput.parentNode;
var buttonId = fileInput.id + "Firefox.Now_button_id";
var oldButton = top.window.content.document.getElementById(buttonId);
if(oldButton!=null){
parentDiv.removeChild(oldButton);
this.count--;
}
var newButton = top.window.content.document.createElement("input");
newButton.setAttribute("type", "button");
newButton.setAttribute("id", buttonId);
newButton.setAttribute("value", "my button");
newButton.setAttribute("name", "Firefox.Now_button_name");
parentDiv.insertBefore(newButton, fileInput);
this.count++;
}
}
a source to share