Eine Schaltfläche zur Symbolleiste hinzufügen

Eine einfache Schaltfläche

In diesem Abschnitt erstellen wir eine Erweiterung, die der Symbolleiste eine Schaltfläche hinzufügt. Wenn Benutzer darauf klicken, öffnen wir https://developer.mozilla.org in einem neuen Tab.

Erstellen Sie zunächst ein neues Verzeichnis namens „button“ und darin eine Datei namens „manifest.json“ mit folgendem Inhalt:

{
  "description": "Demonstrating toolbar buttons",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },

  "browser_action": {
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }
}

Damit legen wir ein Hintergrundskript namens „background.js“ und eine browser action (Schaltfläche) fest, deren Symbole sich im Verzeichnis „icons“ befinden.

Erstellen Sie als Nächstes im Verzeichnis „buttons“ das Verzeichnis „icons“ und speichern Sie darin die beiden folgenden Symbole:

„page-16.png“:

„page-32.png“:

Wir verwenden zwei Symbole, damit auf Displays mit hoher Pixeldichte das größere angezeigt werden kann. Der Browser wählt das für das jeweilige Display am besten geeignete Symbol aus.

Erstellen Sie als Nächstes im Stammverzeichnis der Erweiterung die Datei „background.js“ mit folgendem Inhalt:

function openPage() {
  browser.tabs.create({
    url: "https://developer.mozilla.org",
  });
}

browser.browserAction.onClicked.addListener(openPage);

Dieser Code reagiert auf das Klickereignis der browser action. Wenn das Ereignis ausgelöst wird, wird die Funktion openPage() ausgeführt. Sie öffnet die angegebene Seite mithilfe der API tabs.

Die vollständige Erweiterung sollte nun so aussehen:

button/
    icons/
        page-16.png
        page-32.png
    background.js
    manifest.json

Installieren Sie die Erweiterung. Klicken Sie in der Symbolleiste auf die Schaltfläche „Erweiterungen“ (Puzzleteil-Symbol) und suchen Sie die Erweiterung. Öffnen Sie das Menü mit den drei Punkten der Erweiterung und wählen Sie An Symbolleiste anheften. Klicken Sie nun auf die Schaltfläche in der Symbolleiste:

Ein Popup hinzufügen

Fügen wir der Schaltfläche nun ein Popup hinzu. Ersetzen Sie den Inhalt von manifest.json durch Folgendes:

{
  "description": "Demonstrating toolbar buttons",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",

  "browser_action": {
    "default_popup": "popup/choose_page.html",
    "default_icon": {
      "16": "icons/page-16.png",
      "32": "icons/page-32.png"
    }
  }
}

Wir haben gegenüber der ursprünglichen Version zwei Änderungen vorgenommen:

• Wir haben den Verweis auf „background.js“ entfernt, weil wir die Logik der Erweiterung nun im Skript des Popups verarbeiten. Ein Hintergrundskript und ein Popup können auch gleichzeitig verwendet werden; in diesem Fall benötigen wir das Hintergrundskript jedoch nicht.
• Wir haben "default_popup": "popup/choose_page.html" hinzugefügt. Damit teilen wir dem Browser mit, dass diese browser action beim Anklicken ein Popup anzeigen soll, dessen Dokument sich unter „popup/choose_page.html“ befindet.

Nun müssen wir das Popup erstellen. Erstellen Sie ein Verzeichnis namens „popup“ und darin eine Datei namens „choose_page.html“ mit folgendem Inhalt:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="choose_page.css" />
  </head>
  <body>
    <div class="page-choice">developer.mozilla.org</div>
    <div class="page-choice">support.mozilla.org</div>
    <div class="page-choice">addons.mozilla.org</div>
    <script src="choose_page.js"></script>
  </body>
</html>

Wie Sie sehen, handelt es sich um eine normale HTML-Seite mit drei <div>-Elementen, die jeweils den Namen einer Mozilla-Website enthalten. Sie bindet außerdem eine CSS-Datei und eine JavaScript-Datei ein, die wir als Nächstes hinzufügen.

Erstellen Sie im Verzeichnis „popup“ eine Datei namens „choose_page.css“ mit folgendem Inhalt:

html,
body {
  width: 300px;
}

.page-choice {
  width: 100%;
  padding: 4px;
  font-size: 1.5em;
  text-align: center;
  cursor: pointer;
}

.page-choice:hover {
  background-color: #cff2f2;
}

Damit gestalten wir das Popup.

Erstellen Sie als Nächstes im Verzeichnis „popup“ eine Datei namens „choose_page.js“ mit folgendem Inhalt:

document.addEventListener("click", (event) => {
  if (!event.target.classList.contains("page-choice")) {
    return;
  }

  const chosenPage = `https://${event.target.textContent}`;
  browser.tabs.create({
    url: chosenPage,
  });
});

In unserem JavaScript-Code reagieren wir auf Klicks auf die Auswahlmöglichkeiten im Popup. Zunächst prüfen wir, ob auf eine der auswählbaren Seiten geklickt wurde. Falls nicht, geschieht nichts weiter. Andernfalls erstellen wir daraus eine URL und öffnen die entsprechende Seite in einem neuen Tab. Beachten Sie, dass wir WebExtension-APIs in Popup-Skripten genauso verwenden können wie in Hintergrundskripten.

Die endgültige Verzeichnisstruktur der Erweiterung sollte so aussehen:

button/
    icons/
        page-16.png
        page-32.png
    popup/
        choose_page.css
        choose_page.html
        choose_page.js
    manifest.json

Laden Sie die Erweiterung neu und klicken Sie auf die Schaltfläche, um das Popup zu öffnen:

Page actions

Page actions funktionieren ähnlich wie browser actions. Sie sind jedoch für Aktionen vorgesehen, die nur für bestimmte Seiten relevant sind, statt für den Browser insgesamt.

Während browser actions immer angezeigt werden, erscheinen page actions nur in Tabs, in denen sie relevant sind. Schaltflächen für page actions werden in der URL-Leiste statt in der Browser-Symbolleiste angezeigt.

Weitere Informationen

• Manifest-Schlüssel browser_action

• API browserAction

• Beispiele für browser actions:

  • beastify
  • Bookmark it!
  • favourite-colour
  • open-my-page-button

• Manifest-Schlüssel page_action

• API pageAction

• Beispiele für page actions:

  • chill-out