Geek Answers Handbook

How to write a Firefox add-on button

I am experimenting with the firefox plugin, but I'm new to this and don't mind pushing a little. If I wanted to write a simple plugin in which there is nothing but a button, and when the button is pressed, a warning message like "hello" or something like that is displayed. What will js look like for this add-ons?

Edit: I also think that this probably should not be a button, like a button on a toolbar, maybe just a button that appears somewhere on the page and can be activated. But not sure if there are any drawbacks to this method when using the actual toolbar button.

+4
source share
2 answers

You can use the add-on constructor to make a reloadable add-on like this one to do what you want, for example:

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"}); } }
+2
source

You must read these documents first.

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 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 check out the links above.

 <?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 want to create something dynamically, this is one 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"/>
+2
source

More articles:


All Articles