Einen Button zur Toolbar hinzufügen

Um einen Button zur Toolbar hinzuzufügen, verwende das widget-Module.

Erstelle ein neues Verzeichnis, navigiere mit der Eingabeaufforderung in dieses Verzeichnis, und gib cfx init ein. Dann öffne die Datei "main.js" im "lib"-Verzeichnis und gib folgenden Code ein:

var widgets = require("sdk/widget");
var tabs = require("sdk/tabs");
 
var widget = widgets.Widget({
  id: "mozilla-link",
  label: "Mozilla website",
  contentURL: "https://www.mozilla.org/favicon.ico",
  onClick: function() {
    tabs.open("https://www.mozilla.org/");
  }
});

Das Widget wird wird zur AddOn-Leiste (unten am Fensterrand) hinzugefügt:

Du kannst leider nicht die Standart-Position des Icons ändern, aber der User kann den Standort jederzeit verändern. Das id-Attribut ist zwingend erforderlich. Es speichert die Position des Icons und sollte nicht verändert weren, da sonst wieder der Standart wiederhergestellt wird.

Beim Aktivieren wird dieser Link geöffnet: https://www.mozilla.org.

Das Icon angeben (URL)

Wenn Du dieses Widget verwendest, kannst Du das Icon via contentURL: anzeigen. Das kann eine lokale, aber auch eine externe Datei sein. Allerdings lässt es sich nicht empfehlen Icons im Internet zu verwenden, da bei einem Serverausfall die Grafik nicht geladen werden kann. Das Beispiel verwendet eine Grafik namens "my-icon.png" aus dem AddOn-Verzeichnis (data):

var widgets = require("sdk/widget");
var tabs = require("sdk/tabs");
var self = require("sdk/self");

var widget = widgets.Widget({
  id: "mozilla-link",
  label: "Mozilla website",
  contentURL: self.data.url("my-icon.png"),
  onClick: function() {
    tabs.open("https://www.mozilla.org/");
  }
});

Du kannst das Icon immer mit contentURL ändern!

Responding To the User

You can listen for click, mouseover, and mouseout events by passing handler functions as the corresponding constructor options. The widget example above assigns a listener to the click event using the onClick option, and there are similar onMouseover and onMouseout options.

To handle user interaction in more detail, you can attach a content script to the widget. Your add-on script and the content script can't directly access each other's variables or call each other's functions, but they can send each other messages.

Here's an example. The widget's built-in onClick property does not distinguish between left and right mouse clicks, so to do this we need to use a content script. The script looks like this:

window.addEventListener('click', function(event) {
  if(event.button == 0 && event.shiftKey == false)
    self.port.emit('left-click');
  if(event.button == 2 || (event.button == 0 && event.shiftKey == true))
    self.port.emit('right-click');
    event.preventDefault();
}, true);

It uses the standard DOM addEventListener() function to listen for click events, and handles them by sending the corresponding message to the main add-on code. Note that the messages "left-click" and "right-click" are not defined in the widget API itself, they're custom events defined by the add-on author.

Save this script in your data directory as "click-listener.js".

Next, modify main.js to:

• pass in the script by setting the contentScriptFile property
• listen for the new events:

var widgets = require("sdk/widget");
var tabs = require("sdk/tabs");
var self = require("sdk/self");

var widget = widgets.Widget({
  id: "mozilla-link",
  label: "Mozilla website",
  contentURL: "https://www.mozilla.org/favicon.ico",
  contentScriptFile: self.data.url("click-listener.js")
});
widget.port.on("left-click", function(){
  console.log("left-click");
});
widget.port.on("right-click", function(){
  console.log("right-click");
});

Now execute cfx run again, and try right- and left-clicking on the button. You should see the corresponding string written to the command shell.

Attaching a Panel

If you supply a panel object to the widget's constructor, then the panel will be shown when the user clicks the widget:

var data = require("sdk/self").data;
var clockPanel = require("sdk/panel").Panel({
  width:215,
  height:160,
  contentURL: data.url("clock.html")
});
require("sdk/widget").Widget({
  id: "open-clock-btn",
  label: "Clock",
  contentURL: data.url("History.png"),
  panel: clockPanel
});

To learn more about working with panels, see the tutorial on displaying a popup.

Learning More

To learn more about the widget module, see its API reference documentation.

To learn more about content scripts, see the content scripts guide.