How to write a button firefox add-on

Question

I'm experimenting with a firefox plugin, but I'm new to this and wouldn't mind a little push. If I wanted to write a simple plugin that's nothing but a button and when the button is clicked, it displays an alert message like "hello" or something. How would the js for this add-on look like?

Edit: I'm also thinking, it probably doesn't have to be a button as in a toolbar button, probably just a button that appears somewhere on a page and can be activated. But not sure if there's any disadvantages to this method over using an actual toolbar button.

Answer 1

First, you should read these documents.

https://developer.mozilla.org/en/XUL/Events

https://developer.mozilla.org/en/DOM/event.button

https://developer.mozilla.org/en/XUL/button

In XUL, you can create elements after the events dynamically.

https://developer.mozilla.org/en/DOM/document.createEvent https://developer.mozilla.org/en/DOM/document.createElement https://developer.mozilla.org/En/DOM/Node.appendChild

This is a simple example, for more details please read the above links.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
var whichButton = function (e) {
    // Handle different event models
    var e = e || window.event;
    var btnCode;

    if ('object' === typeof e) {
        btnCode = e.button;

        switch (btnCode) {
            case 0:
                alert('Left button clicked.');
            break;
            case 1:
                alert('Middle button clicked.');
            break;
            case 2:
                alert('Right button clicked.');
            break;
            default:
                alert('Unexpected code: ' + btnCode);
        }
    }
}
</script>

<row><button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">Click with Mouse</button></row>

<row><button label="Press Me"
        oncommand="alert('You pressed me!');"/></row>

<row><button label="Click Me"
        oncommand="alert('The width is ' + this.boxObject.width);"/></row>
</window>

For example: if you would like to create something dynamically,, this is one of the way.

<script>
function addToBox()
{
var existingEl  = document.getElementById('addbutton');
  var capt   = document.createElement('groupbox');
  existingEl.appendChild(capt);
var captionEl   = document.createElement('button');
  capt.appendChild(captionEl);
  captionEl.setAttribute('label', 'contact' );
  captionEl.setAttribute('style', 'color: blue;');

}
</script>


<row><button label="Add" oncommand="addToBox()"/></row>
<box id="addbutton"/>

Answer 2

You could use the addon builder to make a restartless addon like this one , to do what you want, like so:

exports.main = function(options) {
  // create the toolbar buton
  var tbb = require("toolbarbutton").ToolbarButton({
    id: "extension-tbb-id",
    label: "Button Name",
    image: "http://...",
    onCommand: function() {
      alert("hello");
    }
  });

  // move the toolbar button to the navigation bar
  if ("install" == options.loadReason) {
    tbb.moveTo({toolbarID: "nav-bar"});
  }
}