如何通过Firefox扩展/附加组件将按钮添加到任何网站？

Question

I would like to create an extension that searches the elements on a page, finds a specific element (ex. Facebook like button) and adds my own button next to it. Is this possible and if so how do I go about implementing it?

UPDATE: So I tried to implement the feature I want using:

onPageLoad: function(aEvent) {
    var doc = aEvent.originalTarget; // doc is document that triggered "onload" event

    var fblike = document.getElementsByTagName("fb-root");
    var button = top.window.content.document.createElement("input");
    button.setAttribute("type", "button");
    button.setAttribute("value", "valore");
    button.setAttribute("name", "nome");
    var parentDiv = fblike.parentNode;
    parentDiv.insertBefore(button, fblike);
    alert(button);
},

I still cannot get the button to even show up on the page. Is there anyway to get the button to show just on top of the whole page so I know the problem is finding the 'fb-root' tag? I am trying to detect a Facebook like button.

Answer 1

Finding a specific element on a page in Javascript is pretty trivial - if the element has its own id then you just use document.getElementById(someId) . Adding an element to the DOM is similarly easy (and this all gets even easier using frameworks like jQuery). However, I'm afraid I have no experience writing browser extensions. But I can tell you yes, this is definitely possible. :)

Answer 2

When you work with the page's document you should do so consistently - don't use document because that will refer to the document you are running in (typically the browser window). You should also make sure to create the node in the same document where you will be inserting it (and don't forget to check Error Console, then you should be able to say something more differentiated than "doesn't work"). Your code with mistakes fixed:

var fblike = doc.getElementsByTagName("fb-root");
var button = doc.createElement("input");
button.setAttribute("type", "button");
button.setAttribute("value", "valore");
button.setAttribute("name", "nome");
var parentDiv = fblike.parentNode;
parentDiv.insertBefore(button, fblike);