From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- .../add-ons/webextensions/api/bookmarks/index.html | 121 ++++ .../add-ons/webextensions/api/lesezeich/index.html | 121 ---- .../webextensions/arbeiten_mit_taps_api/index.html | 608 --------------------- .../add-ons/webextensions/beispiele/index.html | 22 - .../deine_erste_weberweiterung/index.html | 155 ------ .../deine_zweite_erweiterung/index.html | 357 ------------ .../add-ons/webextensions/examples/index.html | 22 + .../working_with_the_tabs_api/index.html | 608 +++++++++++++++++++++ .../your_first_webextension/index.html | 155 ++++++ .../your_second_webextension/index.html | 357 ++++++++++++ 10 files changed, 1263 insertions(+), 1263 deletions(-) create mode 100644 files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_api/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/beispiele/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/examples/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html (limited to 'files/de/mozilla/add-ons') diff --git a/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html b/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html new file mode 100644 index 0000000000..7c43bda2af --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html @@ -0,0 +1,121 @@ +--- +title: Lesezeichen +slug: Mozilla/Add-ons/WebExtensions/API/Lesezeich. +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks +--- +
{{AddonSidebar}}
+ +

Die WebExtensions {{WebExtAPIRef("bookmarks")}} API erlaubt es einer Erweiterung mit dem Lesezeichensystem des Browsers interagieren und dieses zu manipulieren. Sie können die API verwenden, um für Seiten Lesezeichen zu setzen, vorhandene Lesezeichen abzurufen und Lesezeichen zu bearbeiten, zu entfernen und zu organisieren.

+ +

Um diese API zu verwenden, muss die Erweiterung die Berechtigung "Lesezeichen" in der manifest.json Datei besitzen.

+ +

Types

+ +
+
{{WebExtAPIRef("bookmarks.BookmarkTreeNodeUnmodifiable")}}
+
Ein {{jsxref("String")}} enum, das angibt, warum ein Lesezeichen oder ein Ordner unmodifizierbar ist.
+
{{WebExtAPIRef("bookmarks.BookmarkTreeNode")}}
+
Stellt ein Lesezeichen oder einen Ordner im Lesezeichenbaum dar.
+
{{WebExtAPIRef("bookmarks.CreateDetails")}}
+
Enthält Informationen, die bei der Erstellung eines neuen Lesezeichens an die {{WebExtAPIRef("bookmarks.create()")}} Funktion übergeben werden.
+
+ +

Functions

+ +
+
{{WebExtAPIRef("bookmarks.create()")}}
+
Erstellt ein Lesezeichen oder Ordner.
+
{{WebExtAPIRef("bookmarks.get()")}}
+
Ruft eine oder mehrere {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ab und übergibt eine Lesezeichen-ID oder ein Array von Lesezeichen ID.
+
{{WebExtAPIRef("bookmarks.getChildren()")}}
+
Ruft die Kinder des angegebenen {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ab.
+
{{WebExtAPIRef("bookmarks.getRecent()")}}
+
Ruft eine angeforderte Anzahl von zuletzt hinzugefügten Lesezeichen ab.
+
{{WebExtAPIRef("bookmarks.getSubTree()")}}
+
Ruft einen Teil des Lesezeichenbaums ab und beginnt am angegebenen Knoten.
+
{{WebExtAPIRef("bookmarks.getTree()")}}
+
Ruft den gesamten Lesezeichenbaum in ein Array von {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} Objekte auf.
+
{{WebExtAPIRef("bookmarks.move()")}}
+
Moves the specified {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} to a new location in the bookmark tree.
+
{{WebExtAPIRef("bookmarks.remove()")}}
+
Removes a bookmark or an empty bookmark folder, given the node's ID.
+
{{WebExtAPIRef("bookmarks.removeTree()")}}
+
Recursively removes a bookmark folder; that is, given the ID of a folder node, removes that node and all its descendants.
+
{{WebExtAPIRef("bookmarks.search()")}}
+
Searches for {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}s matching a specified set of criteria.
+
{{WebExtAPIRef("bookmarks.update()")}}
+
Updates the title and/or URL of a bookmark, or the name of a bookmark folder, given the bookmark's ID.
+
+ +

Events

+ +
+
{{WebExtAPIRef("bookmarks.onCreated")}}
+
Fired when a bookmark or folder is created.
+
{{WebExtAPIRef("bookmarks.onRemoved")}}
+
Fired when a bookmark or folder is removed. When a folder is removed recursively, a single notification is fired for the folder, and none for its contents.
+
{{WebExtAPIRef("bookmarks.onChanged")}}
+
Fired when a bookmark or folder changes. Currently, only title and url changes trigger this.
+
{{WebExtAPIRef("bookmarks.onMoved")}}
+
Fired when a bookmark or folder is moved to a different parent folder or to a new offset within its folder.
+
{{WebExtAPIRef("bookmarks.onChildrenReordered")}}
+
Fired when the user has sorted the children of a folder in the browser's UI. This is not called as a result of a {{WebExtAPIRef("bookmarks.move", "move()")}}.
+
{{WebExtAPIRef("bookmarks.onImportBegan")}}
+
Fired when a bookmark import session is begun. Expensive observers should ignore {{WebExtAPIRef("bookmarks.onCreated")}} updates until {{WebExtAPIRef("bookmarks.onImportEnded")}} is fired. Observers should still handle other notifications immediately.
+
{{WebExtAPIRef("bookmarks.onImportEnded")}}
+
Fired when a bookmark import session has finished.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.bookmarks")}}

+ + + +

Edge incompatibilities

+ +

Promises are not supported in Edge. Use callbacks instead.

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.bookmarks API. This documentation is derived from bookmarks.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html b/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html deleted file mode 100644 index 7c43bda2af..0000000000 --- a/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Lesezeichen -slug: Mozilla/Add-ons/WebExtensions/API/Lesezeich. -translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks ---- -
{{AddonSidebar}}
- -

Die WebExtensions {{WebExtAPIRef("bookmarks")}} API erlaubt es einer Erweiterung mit dem Lesezeichensystem des Browsers interagieren und dieses zu manipulieren. Sie können die API verwenden, um für Seiten Lesezeichen zu setzen, vorhandene Lesezeichen abzurufen und Lesezeichen zu bearbeiten, zu entfernen und zu organisieren.

- -

Um diese API zu verwenden, muss die Erweiterung die Berechtigung "Lesezeichen" in der manifest.json Datei besitzen.

- -

Types

- -
-
{{WebExtAPIRef("bookmarks.BookmarkTreeNodeUnmodifiable")}}
-
Ein {{jsxref("String")}} enum, das angibt, warum ein Lesezeichen oder ein Ordner unmodifizierbar ist.
-
{{WebExtAPIRef("bookmarks.BookmarkTreeNode")}}
-
Stellt ein Lesezeichen oder einen Ordner im Lesezeichenbaum dar.
-
{{WebExtAPIRef("bookmarks.CreateDetails")}}
-
Enthält Informationen, die bei der Erstellung eines neuen Lesezeichens an die {{WebExtAPIRef("bookmarks.create()")}} Funktion übergeben werden.
-
- -

Functions

- -
-
{{WebExtAPIRef("bookmarks.create()")}}
-
Erstellt ein Lesezeichen oder Ordner.
-
{{WebExtAPIRef("bookmarks.get()")}}
-
Ruft eine oder mehrere {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ab und übergibt eine Lesezeichen-ID oder ein Array von Lesezeichen ID.
-
{{WebExtAPIRef("bookmarks.getChildren()")}}
-
Ruft die Kinder des angegebenen {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ab.
-
{{WebExtAPIRef("bookmarks.getRecent()")}}
-
Ruft eine angeforderte Anzahl von zuletzt hinzugefügten Lesezeichen ab.
-
{{WebExtAPIRef("bookmarks.getSubTree()")}}
-
Ruft einen Teil des Lesezeichenbaums ab und beginnt am angegebenen Knoten.
-
{{WebExtAPIRef("bookmarks.getTree()")}}
-
Ruft den gesamten Lesezeichenbaum in ein Array von {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} Objekte auf.
-
{{WebExtAPIRef("bookmarks.move()")}}
-
Moves the specified {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} to a new location in the bookmark tree.
-
{{WebExtAPIRef("bookmarks.remove()")}}
-
Removes a bookmark or an empty bookmark folder, given the node's ID.
-
{{WebExtAPIRef("bookmarks.removeTree()")}}
-
Recursively removes a bookmark folder; that is, given the ID of a folder node, removes that node and all its descendants.
-
{{WebExtAPIRef("bookmarks.search()")}}
-
Searches for {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}s matching a specified set of criteria.
-
{{WebExtAPIRef("bookmarks.update()")}}
-
Updates the title and/or URL of a bookmark, or the name of a bookmark folder, given the bookmark's ID.
-
- -

Events

- -
-
{{WebExtAPIRef("bookmarks.onCreated")}}
-
Fired when a bookmark or folder is created.
-
{{WebExtAPIRef("bookmarks.onRemoved")}}
-
Fired when a bookmark or folder is removed. When a folder is removed recursively, a single notification is fired for the folder, and none for its contents.
-
{{WebExtAPIRef("bookmarks.onChanged")}}
-
Fired when a bookmark or folder changes. Currently, only title and url changes trigger this.
-
{{WebExtAPIRef("bookmarks.onMoved")}}
-
Fired when a bookmark or folder is moved to a different parent folder or to a new offset within its folder.
-
{{WebExtAPIRef("bookmarks.onChildrenReordered")}}
-
Fired when the user has sorted the children of a folder in the browser's UI. This is not called as a result of a {{WebExtAPIRef("bookmarks.move", "move()")}}.
-
{{WebExtAPIRef("bookmarks.onImportBegan")}}
-
Fired when a bookmark import session is begun. Expensive observers should ignore {{WebExtAPIRef("bookmarks.onCreated")}} updates until {{WebExtAPIRef("bookmarks.onImportEnded")}} is fired. Observers should still handle other notifications immediately.
-
{{WebExtAPIRef("bookmarks.onImportEnded")}}
-
Fired when a bookmark import session has finished.
-
- -

Browser compatibility

- -

{{Compat("webextensions.api.bookmarks")}}

- - - -

Edge incompatibilities

- -

Promises are not supported in Edge. Use callbacks instead.

- -

{{WebExtExamples("h2")}}

- -
Acknowledgements - -

This API is based on Chromium's chrome.bookmarks API. This documentation is derived from bookmarks.json in the Chromium code.

- -

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

-
- - diff --git a/files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_api/index.html b/files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_api/index.html deleted file mode 100644 index 39498fa606..0000000000 --- a/files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_api/index.html +++ /dev/null @@ -1,608 +0,0 @@ ---- -title: Arbeiten mit Taps API -slug: Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API -tags: - - tabs -translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API ---- -

{{AddonSidebar}}

- -

Tabs lassen einen Benutzer mehrere Webseiten in seinem Browserfenster öffnen und wechseln dann zwischen diesen Webseiten. Mit der Tabs API können Sie mit diesen Tabs arbeiten und diese manipulieren, um Programme zu erstellen, die Nutzern neue Möglichkeiten bieten, mit Tabs zu arbeiten oder die Funktionen Ihrer Erweiterung zu liefern.

- -

In diesem "how-to"-Artikel schauen wir uns an:

- - - -

Wir schließen dann mit Blick auf einige andere, andere Funktionen, die von der API angeboten werden.

- -
-

Hinweis: Es gibt einige Tab-API-Funktionen, die an anderer Stelle abgedeckt sind. Dies sind die Methoden, die Sie verwenden können, um den Inhalt der Registerkarten mit Skripten zu manipulieren  ({{WebExtAPIRef("tabs.connect")}},  {{WebExtAPIRef("tabs.sendMessage")}} und  {{WebExtAPIRef("tabs.executeScript")}}). Wenn Sie mehr Informationen über diese Methoden wünschen, lesen Sie die Artikelinhaltskripte Concepts und die Anleitung ändern Sieeine Webseite.

-
- -

Berechtigungen und die Tabs API

- -

Für die meisten Tabs API-Funktionen benötigen Sie keine Berechtigungen; Es gibt jedoch einige Ausnahmen:

- - - -

Im Folgenden können Sie in der manifest.json-Datei Ihrer Erweiterung die Erlaubnis "Tabs " beantragen :

- -
"permissions": [
-  "<all_urls>",
-  "tabs"
-],
- -

Diese Anfrage gibt Ihnen die Nutzung aller Tabs API-Funktion auf allen Websites, die Ihr Nutzer besucht. Es gibt auch einen alternativen Ansatz für die Anforderung von Berechtigungen zur Verwendung von {{WebExtAPIRef("tabs.executeScript")}} or {{WebExtAPIRef("tabs.insertCSS")}}, bei dem Sie keine Host-Erlaubnis benötigen, in Form von "activeTab". Diese Erlaubnis bietet die gleichen Rechte wie "Tabs" mit< all _ urls >,aber mit zwei Einschränkungen:

- - - -

Der Vorteil dieses Ansatzes ist, dass der Benutzer keine Berechtigung erhält, die besagt, dass Ihre Erweiterung "Zugriff auf Ihre Daten für alle Websites" kann. Das liegt daran , dass < all _ urls > Erlaubnis einer Erweiterung die Möglichkeit gibt, Skripte in jedem Tab auszuführen, zu jeder Zeit, die sie mag, während "activeTab" darauf beschränkt ist, der Erweiterung zu erlauben, eine vom Benutzer angeforderte Aktion in der Aktuelle Registerkarte.

- -

Mehr über Tabs und ihre Eigenschaften entdecken

- -

Es wird Gelegenheiten geben, in denen Sie eine Liste aller Tabs in allen Browser-Fenstern erhalten wollen. Zu anderen Zeiten möchten Sie vielleicht eine Untergruppe von Tabs finden, die bestimmten Kriterien entsprechen, wie zum Beispiel solchen, die von einem bestimmten Tab geöffnet werden oder Seiten aus einer bestimmten Domain anzeigen. Und wenn Sie Ihre Liste der Tabs haben, werden Sie wahrscheinlich mehr über ihre Eigenschaften wissen wollen.

- -

Hier kommt die {{WebExtAPIRef("tabs.query")}} in den Fall. Wird allein verwendet, um alle Tabs zu erhalten oder das queryInfo-Objekt zu nehmen —, um Abfragekriterien anzugeben, wie zum Beispiel, ob die Registerkarte im aktuellen Fenster aktiv ist, oder eines oder mehrere von 17 Kriterien —  {{WebExtAPIRef("tabs.query")}} gibt ein Array von  {{WebExtAPIRef("tabs.Tab")}} Objekte, die Informationen über die Registerkarten enthalten.

- -

Wenn Sie nur Informationen über den aktuellen Reiter wünschen, können Sie eine {{WebExtAPIRef("tabs.Tab")}} erhalten. Objekt für diese Registerkarte mit {{WebExtAPIRef("tabs.getCurrent")}}. Wenn Sie eine Tab-ID haben, können Sie die  {{WebExtAPIRef("tabs.Tab")}} Objekt mit {{WebExtAPIRef("tabs.get")}}.

- -
-

notiz:

- - -
- -

Wie man mit dem Beispiel geht

- -

Um zu sehen, wie  {{WebExtAPIRef("tabs.query")}} und  {{WebExtAPIRef("tabs.Tab")}} werden verwendet, lassen Sie uns durch, wie  das Tabs-Tabs-Tabs Beispiel fügt die Liste von" Schalter auf Tabs "zu seiner Toolbar-Taste Popup.

- -

- -

manifest.json

- -

Hier ist das manifest.json:

- -
{
-  "browser_action": {
-    "browser_style": true,
-    "default_title": "Tabs, tabs, tabs",
-    "default_popup": "tabs.html"
-  },
-  "description": "A list of methods you can perform on a tab.",
-  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs",
-  "manifest_version": 2,
-  "name": "Tabs, tabs, tabs",
-  "permissions": [
-    "tabs"
-  ],
-  "version": "1.0"
-}
- -
-

Hinweis:

- - -
- -

Tabs.html

- -

Tabs.html definiert den Inhalt des Popups der Erweiterung:

- -
<!DOCTYPE html>
-
-<html>
-
- <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="tabs.css"/>
- </head>
-
-<body>
-
- <div class="panel">
-    <div class="panel-section panel-section-header">
-     <div class="text-section-header">Tabs-tabs-tabs</div>
-    </div>
-
-    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
-
-
-…
-
-Define the other menu items
-…
-
-    <div class="switch-tabs">
-
-     <p>Switch to tab</p>
-
-     <div id="tabs-list"></div>
-
-    </div>
- </div>
-
- <script src="tabs.js"></script>
-
-</body>
-
-</html>
- -

Hier ist eine Zusammenfassung der oben genannten tut:

- -
    -
  1. Die Menüpunkte werden deklariert.
    2. -
  2. Ein leerer Div mit der ID-Tabs-Liste wird deklariert, um die Liste der Tabs zu enthalten.
    3. -
  3. Tabs.js heißt.
    4. -
- -

Tabs.js

- -

In tabs.jswerdenwir sehen, wie die Liste der Tabs aufgebaut und zum Popup hinzugefügt wird.  

- -

Das Popup schaffen

- -

Zunächst wird ein Event-Handler hinzugefügt, um ListTabs () auszuführen , wenn tabs.html geladen wird:

- -
document.addEventListener ("DOMContentLoaded", hört Tabs);
- -

Das erste, was listTabs () tut, ist getCurrentWindowTabs ()zu nennen. Hier wird ein {{WebExtAPIRef("tabs.query")}} verwendet, um eine  {{WebExtAPIRef("tabs.Tab")}} zu erhalten. Objekt für die Tabs im aktuellen Fenster:

- -
function getCurrentWindowTabs() {
-  return browser.tabs.query({currentWindow: true});
-}
- -

Jetzt ist listTabs() bereit , den Inhalt für das Popup zu erstellen.

- -

Zunächst:

- -
    -
  1. Schnappen Sie sich die tabs-list div.
    2. -
  2. Erstellen Sie ein Dokumentenfragment (in das die Liste eingebaut wird).
    3. -
  3. Setzen Sie Zähler.
    4. -
  4. Klären Sie den Inhalt der Tabs-Liste div.
    5. -
- -
function listTabs() {
- getCurrentWindowTabs().then((tabs) => {
-    let tabsList = document.getElementById('tabs-list');
-    let currentTabs = document.createDocumentFragment();
-    let limit = 5;
-    let counter = 0;
-
-    tabsList.textContent = '';
- -

Als nächstes werden wir die Links für jeden Tab erstellen:

- -
    -
  1. Schleifen Sie sich durch die ersten 5 Elemente aus der   {{WebExtAPIRef("tabs.Tab")}} Objekt.
    2. -
  2. Fügen Sie für jeden Artikel einen Hyperlink zum Dokumentenfragment hinzu. -
      -
    • Das Etikett des Links — das heißt, sein Text — wird mit dem Titel des Tab gesetzt (oder mit der ID, wenn er keinen Titel hat).
      • -
    • Die Adresse des Links wird mit der Personalausweis des Tabs gesetzt.
      • -
    -
    3. -
- -
 for (let tab of tabs) {
-     if (!tab.active && counter <= limit) {
-        let tabLink = document.createElement('a');
-
-        tabLink.textContent = tab.title || tab.id;
-
-       tabLink.setAttribute('href', tab.id);
-        tabLink.classList.add('switch-tabs');
-        currentTabs.appendChild(tabLink);
-     }
-
-     counter += 1;
-
-    }
- -

Schließlich wird das Dokumentenfragment auf die Tabs-Liste div geschrieben:

- -
  tabsList.appendChild(currentTabs);
-  });
-}
- -

Arbeiten mit dem aktiven Reiter

- -

Ein weiteres verwandtes Beispielmerkmal ist die Info-Option "Alert active tab", die alle Registerkarten [{WebExtAPIRef ("-Register) ablegt. Tab ")} Objekteigenschaften für die aktive Registerkarte in einen Alarm:

- -
 else if (e.target.id === "tabs-alertinfo") {
-   callOnActiveTab((tab) => {
-     let props = "";
-     for (let item in tab) {
-       props += `${ item } = ${ tab[item] } \n`;
-     }
-     alert(props);
-   });
- }
- -

Wobei callOnActiveTab() das aktive Tab-Objekt findet, indem man sich durch die Registerkarten {{WebExtAPIRef("tabs.Tab")}} schlodert. Tab ")} Objekte, die nach dem Gegenstand mit aktivem Satz suchen:

- -
document.addEventListener("click", function(e) {
- function callOnActiveTab(callback) {
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
- }
-}
- -

Tabs erstellen, duplizieren, verschieben, aktualisieren, neu laden und entfernen

- -

Nachdem Sie Informationen über die Registerkarten gesammelt haben, werden Sie höchstwahrscheinlich etwas mit ihnen machen wollen — entweder den Benutzern Funktionen für die Manipulation und Verwaltung von Registern bieten oder Funktionen in Ihrer Erweiterung implementieren.

- -

Folgende Funktionen stehen zur Verfügung:

- - - -
-

notiz:

- -

Diese Funktionen erfordern alle die ID (oder IDs) der Registerkarte, die sie manipulieren:

- - - -

Während die folgenden Funktionen auf dem aktiven Tab (sofern keine Tab-ID zur Verfügung gestellt wird) wirken:

- - -
- -

Wie man mit dem Beispiel geht

- -

Das Beispiel Tabs-Tabs übt all diese Funktionen aus, bis hin zur Aktualisierung der URL eines Tabs. Die Art und Weise, in der diese APIs verwendet werden, ist ähnlich, so dass wir uns eine der am meisten involvierten Implementierungen ansehen werden, die des "Move active tab to the beginning of the the. Option "Option der Fensterliste.

- -

Aber zunächst ist hier eine Demonstration des Features in Aktion:

- -

{{EmbedYouTube("-lJRzTIvhxo")}}

- -

manifest.json

- -

Keine der Funktionen benötigt eine Betriebsgenehmigung, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.

- -

Tabs.html

- -

Tabs.html definiert das "Menü", das im Popup angezeigt wird, das die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben" enthält, mit einer Reihe von <a> Tags, die von einem visuellen Separator gruppiert sind. Jeder Menüpunkt erhält eine ID, die in tabs.js verwendet wird, um festzustellen, welcher Menüpunkt angefordert wird.

- -
  <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
-    <a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
-
-    <div class="panel-section-separator"></div>
-
-
-    <a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
-
-    <a href="#" id="tabs-reload">Reload active tab</a><br>
-    <a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
- -

Tabs.js

- -

Um das in tabs.html definierte "Menü" zu implementieren, enthält tabs.js einen Hörer für Klicks in tabs.html:

- -
document.addEventListener("click", function(e) {
- function callOnActiveTab(callback) {
-
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
-}
-}
- -

Eine Reihe von ifAnweisungen dann schauen, um die ID des Artikels geklickt.

- -

Dieser Code-Snippet ist für die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben":

- -
 if (e.target.id === "tabs-move-beginning") {
-   callOnActiveTab((tab, tabs) => {
-     var index = 0;
-     if (!tab.pinned) {
-       index = firstUnpinnedTab(tabs);
-     }
-     console.log(`moving ${tab.id} to ${index}`)
-     browser.tabs.move([tab.id], {index});
-   });
- }
- -

Es ist erwähnenswert, die Verwendung von console.log (). Auf diese Weise können Sie Informationen an die Debugger-Konsole ausgeben , was bei der Lösung von Problemen, die während der Entwicklung gefunden wurden, nützlich sein kann.

- -

- -

Der Bewegungscode ruft zunächst callOnActiveTab () an , der wiederum getCurrentWindowTabs () anruft, um eine {{WebExtAPIRef("tabs.Tab")}} Objekt, das die Registerkarten des aktiven Fensters enthält. Es schleift sich dann durch das Objekt, um das aktive Tab-Objekt zu finden und zurückzugeben:

- -
function callOnActiveTab(callback) {
-   getCurrentWindowTabs().then((tabs) => {
-     for (var tab of tabs) {
-       if (tab.active) {
-         callback(tab, tabs);
-       }
-     }
-   });
- }
- -

Gepinnte Tabs

- -

Eine Besonderheit von Registern ist, dass  der Benutzer Tabs in ein Fenster einfügen kann. Gepinnte Tabs werden am Anfang der Tab-Liste platziert und können nicht verschoben werden. Das bedeutet, dass die früheste Position, in die sich ein Tab bewegen kann, die erste Position nach einem gefiederten Tabs ist. Also , firstUnpinnedTab () wird aufgerufen, um die Position des ersten ungepasten Tab zu finden, indem man durch das Tabs-Objekt Looping:

- -
function firstUnpinnedTab(tabs) {
- for (var tab of tabs) {
-   if (!tab.pinned) {
-     return tab.index;
-   }
- }
-}
- -

Wir haben jetzt alles, was zum Verschieben des Tab notwendig ist: Das aktive Tab-Objekt, von dem wir die Reiter-ID erhalten können und die Position, in die der Reiter verschoben werden soll. So können wir den Schritt umsetzen:

- -
browser.tabs.move ([tab.id], {index});
- -

Die restlichen Funktionen zum Duplizieren, Laden, Erstellen und Entfernen von Tabs werden ähnlich implementiert.

- -

Manipulationen eines Tab

- -

Die nächste Reihe von Funktionen ermöglicht es Ihnen, die Zoomstufe in einem Tab zu erhalten  ({{WebExtAPIRef("tabs.getZoom")}}) und zu setzen ({{WebExtAPIRef("tabs.setZoom")}}) . Sie können auch die Zoom-Einstellungen abrufen ({{WebExtAPIRef("tabs.getZoomSettings")}}) , aber zum Zeitpunkt des Schreibens war die Möglichkeit, die Einstellungen zu setzen ({{WebExtAPIRef("tabs.setZoomSettings")}}) , war in Firefox nicht verfügbar.

- -

Der Zoomwert kann zwischen 30% und 300% liegen (dargestellt als Dezimalzahl 0,3 bis 3).

- -

In Firefox sind die Standard-Zoom-Einstellungen:

- - - -

Wie man mit dem Beispiel geht

- -

Das  Beispiel der Tabs-Tabs-Tabs enthält drei Vorführungen der Zoom-Funktion: Zoomen, Zoomen und Zoom zurücksetzen. Hier ist das Feature in Aktion:

- -

{{EmbedYouTube("RFr3oYBCg28")}}

- -

Schauen wir uns an, wie der Zoom-In umgesetzt wird.

- -

manifest.json

- -

Keine der Zoom-Funktionen benötigt Berechtigungen, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.

- -

Tabs.html

- -

Wir haben bereits darüber diskutiert, wie der tabs.html die Optionen für diese Erweiterung definiert, nichts Neues oder Einzigartiges wird getan, um die Zoom-Optionen zur Verfügung zu stellen.

- -

Tabs.js

- -

Tabs.js beginnt mit der Definition mehrerer Konstanten, die im Zoom-Code verwendet werden:

- -
const ZOOM_INCREMENT = 0.2;
-const MAX_ZOOM = 3;
-const MIN_ZOOM = 0.3;
-const DEFAULT_ZOOM = 1;
- -

Es verwendet dann den gleichen Hörer, den wir zuvor besprochen haben, so dass es auf Klicks in tabs.html wirken kann.

- -

Für den Zoom in der Funktion läuft das:

- -
else if (e.target.id === "tabs-add-zoom") {
-   callOnActiveTab((tab) => {
-     var gettingZoom = browser.tabs.getZoom(tab.id);
-     gettingZoom.then((zoomFactor) => {
-       //the maximum zoomFactor is 3, it can't go higher
-       if (zoomFactor >= MAX_ZOOM) {
-         alert("Tab zoom factor is already at max!");
-       } else {
-         var newZoomFactor = zoomFactor + ZOOM_INCREMENT;
-         //if the newZoomFactor is set to higher than the max accepted
-         //it won't change, and will never alert that it's at maximum
-         newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
-         browser.tabs.setZoom(tab.id, newZoomFactor);
-       }
-     });
-   });
- }
- -

Dieser Code verwendet callOnActiveTab () , um die Details des aktiven Tab zu erhalten, dann wird {{WebExtAPIRef("tabs.getZoom")}} den aktuellen Zoom-Faktor der Registerkarte erhalten. Der aktuelle Zoom wird mit dem definierten Maximum (MAX _ ZOOM)und einem Alarm verglichen, der ausgegeben wird, wenn sich der Tab bereits im Maximalzoom befindet. Andernfalls wird der Zoom-Level erhöht, aber auf den maximalen Zoom beschränkt, dann wird der Zoom mit {{WebExtAPIRef("tabs.getZoom")}}. gesetzt .

- -

Manipulationen eines Tabs CSS

- -

Eine weitere wichtige Fähigkeit, die die Tabs API bietet, ist die Möglichkeit, die CSS innerhalb eines Tab zu manipulieren — neue CSS zu einem Tab hinzufügen ({{WebExtAPIRef ("tabu Die [[Datei]] der [[Datei]] der [[Datei]] der [[Datei]] der [[Datei]] ist (" tabs.removeCSS ")).

- -

Dies kann zum Beispiel nützlich sein, wenn Sie bestimmte Seitenelemente markieren oder das Standardlayout der Seite ändern wollen.

- -

Wie man mit dem Beispiel geht

- -

Das Apply-css-Beispiel nutzt diese Funktionen, um der Webseite im aktiven Tab einen roten Rand hinzuzufügen. Hier ist das Feature in Aktion:

- -

{{EmbedYouTube ("bcK-GT2Dyhs")}

- -

Gehen wir durch, wie es aufgebaut ist.

- -

manifest.json

- -

Um die CSS-Funktionen nutzen zu können, benötigen Sie entweder:

- - - -

Letzteres ist das nützlichste, da es einer Erweiterung erlaubt,  {{WebExtAPIRef("tabs.insertCSS")}} und  {{WebExtAPIRef("tabs.removeCSS")}} in der aktiven Registerkarte zu verwenden, wenn sie von der Browser-oder Seitenaktion, dem Kontextmenü oder einem Shortcut der Erweiterung ausgeführt wird.

- -
{
-  "description": "Adds a page action to toggle applying CSS to pages.",
-
- "manifest_version": 2,
- "name": "apply-css",
- "version": "1.0",
- "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
-
- "background": {
-
-    "scripts": ["background.js"]
- },
-
- "page_action": {
-
-    "default_icon": "icons/off.svg",
-    "browser_style": true
- },
-
- "permissions": [
-    "activeTab",
-    "tabs"
- ]
-
-}
- -

Sie werden darauf hinweisen, dass zusätzlich zu "activeTab" die Erlaubnis " Tabs"angefordert wird. Diese zusätzliche Erlaubnis ist erforderlich, um das Skript der Erweiterung in die Lage zu versetzen, auf die URL des Registers zuzugreifen, deren Bedeutung wir gleich sehen werden.

- -

Die anderen Hauptmerkmale in der manifest.json-Datei sind die Definition von:

- - - -

Background.js

- -

Beim Start setzt background.js einige Konstanten, um die zu bewendenden CSS zu definieren, Titel für die "Seitenaktion", und eine Liste von Protokollen, in denen die Erweiterung funktioniert:

- -
const CSS = "body { border: 20px solid red; }";
-const TITLE_APPLY = "Apply CSS";
-const TITLE_REMOVE = "Remove CSS";
-const APPLICABLE_PROTOCOLS = ["http:", "https:"];
- -

Wenn die Erweiterung zum ersten Mal geladen wird, verwendet sie {{WebExtAPIRef("tabs.query")}}, um eine Liste aller Tabs im aktuellen Browserfenster zu erhalten. Es schleit sich dann durch die Tabs, die InitializePageAction()rufen.

- -
var gettingAllTabs = browser.tabs.query({});
-
-gettingAllTabs.then((tabs) => {
- for (let tab of tabs) {
-   initializePageAction(tab);
- }
-});
- -

InitializePageAction verwendet protokolIsApplicable () , um festzustellen, ob die URL der aktiven Registerkarte eine ist, auf die die CSS angewendet werden kann:

- -
function protocolIsApplicable(url) {
- var anchor =  document.createElement('a');
- anchor.href = url;
- return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
-}
- -

Wenn das Beispiel dann auf der Registerkarte wirken kann, setzt initializePageAction () das PageAction-Symbol und den Titel des Tab, um die "Off"-Versionen zu verwenden, bevor die PageAction-Version sichtbar gemacht wird:

- -
function initializePageAction(tab) {
-
- if (protocolIsApplicable(tab.url)) {
-   browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
-   browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
-   browser.pageAction.show(tab.id);
- }
-}
- -

Als Nächstes wartet ein Zuhörer auf der pageAction.onClicked darauf, dass das PageAction-Symbol angeklickt wird  , und ruft toggleCSS an , wenn es ist.

- -
browser.pageAction.onClicked.addListener (toggleCSS);
- -

ToggleCSS () erhält den Titel der PageAction und nimmt dann die beschriebene Aktion auf:

- - - -
function toggleCSS(tab) {
-
-
- function gotTitle(title) {
-
-    if (title === TITLE_APPLY) {
-     browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
-     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
-     browser.tabs.insertCSS({code: CSS});
-    } else {
-     browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
-     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
-     browser.tabs.removeCSS({code: CSS});
-    }
- }
-
- var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
-
- gettingTitle.then(gotTitle);
-}
- -

Um sicherzustellen, dass die PageAction nach jedem Update auf den Tab gültig ist, ruft ein Zuhörer auf  {{WebExtAPIRef("tabs.onUpdated")}} jedes Mal, wenn der Tab aktualisiert wird, auf initializePageAction () , um zu überprüfen, ob der Reiter immer noch ein Protokoll, auf das das CSS angewendet werden kann.

- -
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
- initializePageAction(tab);
-});
- -

Einige weitere interessante Fähigkeiten

- -

Es gibt noch ein paar andere Tabs API-Funktionen, die nicht in einen der früheren Abschnitte passen:

- - - -

Weitere Informationen

- -

Wenn Sie mehr über die Tabs API erfahren möchten, schauen Sie sich an:

- - - -

 

diff --git a/files/de/mozilla/add-ons/webextensions/beispiele/index.html b/files/de/mozilla/add-ons/webextensions/beispiele/index.html deleted file mode 100644 index 627dbe559d..0000000000 --- a/files/de/mozilla/add-ons/webextensions/beispiele/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Beispiele für Erweiterungen -slug: Mozilla/Add-ons/WebExtensions/Beispiele -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Examples ---- -
{{AddonSidebar}}
- -

Um zu veranschaulichen, wie Erweiterungen entwickelt werden, gibt es von uns ein Repository mit einfachen Beispielerweiterungen unter https://github.com/mdn/webextensions-examples. Dieser Artikel beschreibt die WebExtension-APIs, die in diesem Repository verwendet werden.

- -

Diese Beispiele funktionieren in Firefox Nightly: Die meisten funktionieren in früheren Versionen von Firefox, aber überprüfen Sie zur Sicherheit den Schlüssel strict_min_version in der Datei manifest.json der Erweiterung.
-
- Wenn Sie diese Beispiele ausprobieren möchten, haben Sie drei Möglichkeiten:
-
- 1.  Klonen Sie das Repository, und laden Sie die Erweiterung direkt aus dem Quellverzeichnis mit der Funktion "Load Temporary Add-on". Die Erweiterung bleibt solange geladen, bis Sie Firefox neu starten.
- 2. Klonen Sie das Repository und verwenden Sie dann das web-ext Befehlszeilentool, um Firefox mit der installierten Erweiterung auszuführen.
- 3. Klonen Sie das Repository und gehen Sie dann zum Build-Verzeichnis. Dieses enthält "Build"- und "Signed"-Versionen aller Beispiele; Sie können sie also einfach in Firefox öffnen (mit Datei / Datei öffnen) und sie dauerhaft installieren, genau wie eine Erweiterung, die Sie von addons.mozilla.org installieren würden.
-
- Wenn Sie einen Beitrag zum Repository leisten möchten, senden Sie uns ein Pull-Request!

- -

{{WebExtAllExamples}}

diff --git a/files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/index.html b/files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/index.html deleted file mode 100644 index b48b805b98..0000000000 --- a/files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Deine erste Erweiterung -slug: Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung -tags: - - Anleitung - - Erweiterung - - Weberweiterung -translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension ---- -
{{AddonSidebar}}
- -

In diesem Artikel wird die Erstellung einer Erweiterung (Extension) für Firefox komplett beschrieben. Diese Erweiterung soll einen roten Rand zu jeder Seite, die von "mozilla.org" oder einer Subdomain geladen wurde, hinzufügen.

- -

Der Quellcode für dieses Beispiel ist auf GitHub auffindbar: https://github.com/mdn/webextensions-examples/tree/master/borderify.

- -

Als Erstes benötigst du Firefox Version 45 oder neuer.

- -

Schreiben der Erweiterung

- -

Erstelle ein neues Verzeichnis und navigiere zu diesem:

- -
mkdir borderify
-cd borderify
- -

manifest.json

- -

Jetzt erstelle eine Datei namens "manifest.json" direkt in dem "borderify" -Verzeichnis mit dem folgenden Inhalt:

- -
{
-
-  "manifest_version": 2,
-  "name": "Borderify",
-  "version": "1.0",
-
-  "description": "Adds a red border to all webpages matching mozilla.org.",
-
-  "icons": {
-    "48": "icons/border-48.png"
-  },
-
-  "content_scripts": [
-    {
-      "matches": ["*://*.mozilla.org/*"],
-      "js": ["borderify.js"]
-    }
-  ]
-
-}
- - - -

Der interessanteste Key hier ist  content_scripts, welcher Firefox auffordert, ein Skript in allen Webseiten zu laden, deren URLs einem spezifischen Muster zuzuordnen sind. In diesem Fall fragen wir Firefox nach dem Skript namens "borderify.js", um es in allen HTTP oder HTTPS Seiten von "mozilla.org" oder einer Subdomain zu laden.

- - - -
-

In manchen Situation musst eine ID für deine Erweiterung festlegen. Wenn du eine Add-on ID festlegen musst, schreibe den  applications key in manifest.json und setze die gecko.id-Eigenschaft:

- -
"applications": {
-  "gecko": {
-    "id": "borderify@example.com"
-  }
-}
-
- -

icons/border-48.png

- -

Die Erweiterung sollte ein Icon haben. Dieses wird neben dem Erweiterungseintrag in dem Add-ons manager angezeigt. Unsere manifest.json gibt den Ort des Icons unter "icons/border-48.png" an.

- -

Erstelle das "icons" Verzeichnis direkt in dem "borderify" Verzeichnis. Speichere dort ein Icon namens "border-48.png".  Du kannst dazu das von unserem Beispiel benutzen, welches von der Google Material Design Iconsammlung stammt und unter den Richtlinien der Creative Commons Attribution-ShareAlike Lizenz steht.

- -

Wenn du dich entscheidest ein eigenes Icon zu verwenden, dann sollte dieses 48x48 Pixel groß sein. Du kannst ebenfalls ein 96x96 Pixel großes Icon für hochauflösende Bildschirme, übergeben, welches dann als die 96 Property des icons-Objekts in der manifest.json festgelegt wird:

- -
"icons": {
-  "48": "icons/border-48.png",
-  "96": "icons/border-96.png"
-}
- -

Alternativ kannst du auch eine SVG-Datei übergeben, welche dann automatisch korrekt skaliert wird.
- (Beachte: Wenn du SVG verwendest und dein Symbol Text enthält, kannst du das Werkzeug "convert to path" deines SVG-Editors verwenden, um den Text zu verflachen, so dass er mit einer einheitlichen Größe/Position skaliert wird.

- - - -

borderify.js

- -

Schließlich erstelle eine Datei namens "borderify.js" direkt in dem "borderify"-Verzeichnis mit diesem Inhalt:

- -
document.body.style.border = "5px solid red";
- -

Dieses Skript wird in Seiten geladen, welche mit dem Muster des  content_scripts-Keys in der manifest.json Datei übereinstimmen. Das Skript hat direkten Zugriff auf das Dokument, genauso wie die Skripte, die von der Seite selbst geladen werden.

- - - -

Probiere es aus:

- -

Als Erstes stelle sicher, dass du die richtigen Dateien an den richtigen Orten hast:

- -
borderify/
-    icons/
-        border-48.png
-    borderify.js
-    manifest.json
- -

Installiere nun das Plugin

- -

Öffne "about:debugging" in Firefox, klicke "Add-on temporär laden" und wähle eine beliebige Datei aus deinem Erweiterungsverzeichnis:

- -

{{EmbedYouTube("cer9EUKegG4")}}

- -

Die Erweiterung wird nun ausgeführt und ist solange aktiv, bis du Firefox neustartest.

- -

Alternativ kannst du Erweiterung auch von der Kommandozeile mit dem web-ext Tool ausführen.

- -

Teste es nun aus

- -

Nun besuche eine Seite von "mozilla.org". Du solltest jetzt einen roten Rand um die Seite erkennen:

- -

{{EmbedYouTube("rxBQl2Z9IBQ")}}

- -
-

Versuche es allerdings nicht auf addons.mozilla.org! Content Scripts werden zurzeit auf dieser Domain geblockt.

-
- -

Experimentiere nun ein bisschen. Bearbeite das "content script", um die Farbe des Randes zu ändern oder mache etwas anderes mit dem Seiteninhalt. Speichere das "content script", lade die Erweiterungsdateien in about:debugging neu mit Hilfe des "Neu laden"-Knopfs. Du kannst die Änderungen sofort sehen:

- -

{{EmbedYouTube("NuajE60jfGY")}}

- - - -

Verpacken und Veröffentlichen

- -

Damit andere Personen deine Erweiterung benutzen können musst du deine Erweiterung verpacken und zum Signieren an Mozilla senden. Um mehr darüber zu lernen, siehe  "Deine Erweiterung veröffentlichen".

- -

Was nun?

- -

Jetzt hast du eine Vorstellung vom Prozess der WebExtension-Entwicklung für Firefox erhalten. Versuche:

- - diff --git a/files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/index.html b/files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/index.html deleted file mode 100644 index cc002d0b24..0000000000 --- a/files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/index.html +++ /dev/null @@ -1,357 +0,0 @@ ---- -title: Deine zweite Erweiterung -slug: Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung -translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension ---- -

{{AddonSidebar}}

- -

Wenn du den Artikel "Deine erste Erweiterung" gelesen hast, hast du schon eine Vorstellung, wie man eine Erweiterung schreibt. In diesem Artikel werden wir eine komplexere Erweiterung schreiben, die mehr APIs benutzt.

- -

Die Erweiterung fügt eine neue Schaltfläche zu Firefox hinzu. Wenn der Nutzer diese anklickt, wird ihm ein Popup angezeigt auf dem er ein Tier auswählen kann. Sobald er eines ausgewählt hat, wird der aktulle Inhalt der Website mit dem Bild des ausgewählten Tieres ersetzt.

- -

Um das zu implementieren werden wir:

- - - -

Man kann die Struktur der Erweiterung wie folgt darstellen:

- -

- -

Es ist eine einfache Erweiterung, aber es zeigt viele der Grundkonzepte der WebExtensions API:

- - - -

Der komplette Quellcode der Erweiterung ist auf GitHub zu finden.

- -

Um die Erweiterung zu erstellen, brauchst du mindestens Firefox 45.

- -

Die Erweiterung schreiben

- -

Erstelle einen neuen Ordner und öffne ihn:

- -
mkdir beastify
-cd beastify
- -

manifest.json

- -

Erstelle jetzt eine Datei namens "manifest.json" und füge den folgenden Inhalt ein:

- -
{
-
-  "manifest_version": 2,
-  "name": "Beastify",
-  "version": "1.0",
-
-  "description": "Erstellt eine Schaltfläche in der Toolbar. Klicke auf eine der Schaltflächen, um ein Tier auszuwählen. Der Inhalt des gerade geöffneten Tabs wird dann mit dem Bild des ausgewählten Tieres ersetzt. Nachschlagen: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
-  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
-  "icons": {
-    "48": "icons/beasts-48.png"
-  },
-
-  "permissions": [
-    "activeTab"
-  ],
-
-  "browser_action": {
-    "default_icon": "icons/beasts-32.png",
-    "default_title": "Beastify",
-    "default_popup": "popup/choose_beast.html"
-  },
-
-  "web_accessible_resources": [
-    "beasts/frog.jpg",
-    "beasts/turtle.jpg",
-    "beasts/snake.jpg"
-  ]
-
-}
-
- - - -

Beachte, dass alle Pfade relativ zur manifest.json angegeben werden.

- -

Das Icon

- -

Die Erweiterung soll ein Icon beinhalten, das neben dem Eintrag der Erweiterung in der Add-ons-Verwaltung angezeigt wird (diese kannst du durch Aufrufen der URL "about:addons" öffnen). In manifest.json haben wir festgelegt, dass wir ein Icon für die Toolbar unter "icons/beasts-48.png" bereitstellen.

- -

Erstelle das "icons"-Verzeichnis and speichere dort das Icon namens "beasts-48.png".  Du kannst das Icon aus unserem Beispiel verwenden, welches aus dem Aha-Soft’s Free Retina Icon-Set stammt und gemäß seiner Lizenzbestimmungen genutzt wird.

- -

Wenn du dich entscheidest, ein eigenes Icon zu verwenden, sollte es eine Auflösung von 48x48 Pixeln besitzen. Zusätzlich kannst du ein 96x96 Pixel großes Icon für hochaufgelöste Bildschirme bereitstellen. In diesem Fall wird es unter der Eigenschaft 96 des icons Objekts in manifest.json aufgeführt:

- -
"icons": {
-  "48": "icons/beasts-48.png",
-  "96": "icons/beasts-96.png"
-}
- -

Die Toolbar-Schaltfläche

- -

Die Toolbar-Schaltfläche benötigt ebenfalls ein Icon, das laut unserer manifest.json unter "icons/beasts-32.png" bereitsteht.

- -

Speichere ein Icon namens "beasts-32.png" im Verzeichnis "icons".Du kannst das Icon aus unserem Beispiel verwenden, welches aus dem IconBeast Lite Icon-Set stammt und gemäß seiner Lizenzbestimmungen genutzt wird.

- -

Wenn du kein Popup einsetzt, dann wird ein Klick-Event zur Erweiterung gesendet, sobald der Benutzer die Schaltfläche anklickt. Wenn du hingegen ein Popup einsetzt, wird dieses Klick-Event nicht gesendet, sondern das Popup wird geöffnet. Da wir ein Popup verwenden wollen, soll dieses im nächsten Schritt erstellt werden.

- -

Das Popup

- -

Mithilfe des Popups soll der Benutzer eines von drei Tieren auswählen können.

- -

Erstelle ein neues Verzeichnis namens "popup" in der obersten Ebene des Erweiterungsverzeichnisses. Dieses Verzeichnis wird den Code für das Popup enthalten. Das Popup besteht aus drei Dateien:

- - - -

choose_beast.html

- -

Die HTML-Datei sieht folgendermaßen aus:

- -
<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="choose_beast.css"/>
-  </head>
-
-  <body>
-    <div class="button beast">Frog</div>
-    <div class="button beast">Turtle</div>
-    <div class="button beast">Snake</div>
-    <div class="button clear">Reset</div>
-
-    <script src="choose_beast.js"></script>
-  </body>
-
-</html>
- -

Es gibt ein Element für jedes Tier. Beachte, dass in dieser Datei auch die CSS- und JavaScript-Dateien verlinkt werden, genau wie auf einer Website.

- -

choose_beast.css

- -

Die CSS-Datei legt die Größe des Popups fest, stellt sicher, dass die drei Auswahlmöglichkeiten, den verfügbaren Platz ausfüllen und legt das grundlegende Styling fest:

- -
html, body {
-  width: 100px;
-}
-
-.button {
-  margin: 3% auto;
-  padding: 4px;
-  text-align: center;
-  font-size: 1.5em;
-  cursor: pointer;
-}
-
-.beast:hover {
-  background-color: #CFF2F2;
-}
-
-.beast {
- background-color: #E5F2F2;
-}
-
-.clear {
- background-color: #FBFBC9;
-}
-
-.clear:hover {
- background-color: #EAEAC9;
-}
-
- -

choose_beast.js

- -

In der JavaScript-Datei des Popups empfangen wir Klick-Events. Wenn ein Klick auf eines der Tiere erfolgte, wird das Content Script zum aktiven Tab hinzugefügt. Sobald das Content Script geladen wird, übergeben wir ihm eine Nachricht mit der Auswahl des Tieres:

- -
/*
-Given the name of a beast, get the URL to the corresponding image.
-*/
-function beastNameToURL(beastName) {
-  switch (beastName) {
-    case "Frog":
-      return browser.extension.getURL("beasts/frog.jpg");
-    case "Snake":
-      return browser.extension.getURL("beasts/snake.jpg");
-    case "Turtle":
-      return browser.extension.getURL("beasts/turtle.jpg");
-  }
-}
-
-/*
-Listen for clicks in the popup.
-
-If the click is on one of the beasts:
-  Inject the "beastify.js" content script in the active tab.
-
-  Then get the active tab and send "beastify.js" a message
-  containing the URL to the chosen beast's image.
-
-If it's on a button which contains class "clear":
-  Reload the page.
-  Close the popup. This is needed, as the content script malfunctions after page reloads.
-*/
-
-document.addEventListener("click", (e) => {
-  if (e.target.classList.contains("beast")) {
-    var chosenBeast = e.target.textContent;
-    var chosenBeastURL = beastNameToURL(chosenBeast);
-
-    browser.tabs.executeScript(null, {
-      file: "/content_scripts/beastify.js"
-    });
-
-    var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
-    gettingActiveTab.then((tabs) => {
-      browser.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
-    });
-  }
-  else if (e.target.classList.contains("clear")) {
-    browser.tabs.reload();
-    window.close();
-  }
-});
-
- -

It uses three WebExtensions API functions:

- - - -

The content script

- -

Create a new directory, under the extension root, called "content_scripts" and create a new file in it called "beastify.js", with the following contents:

- -
/*
-beastify():
-* removes every node in the document.body,
-* then inserts the chosen beast
-* then removes itself as a listener
-*/
-function beastify(request, sender, sendResponse) {
-  removeEverything();
-  insertBeast(request.beastURL);
-  browser.runtime.onMessage.removeListener(beastify);
-}
-
-/*
-Remove every node under document.body
-*/
-function removeEverything() {
-  while (document.body.firstChild) {
-    document.body.firstChild.remove();
-  }
-}
-
-/*
-Given a URL to a beast image, create and style an IMG node pointing to
-that image, then insert the node into the document.
-*/
-function insertBeast(beastURL) {
-  var beastImage = document.createElement("img");
-  beastImage.setAttribute("src", beastURL);
-  beastImage.setAttribute("style", "width: 100vw");
-  beastImage.setAttribute("style", "height: 100vh");
-  document.body.appendChild(beastImage);
-}
-
-/*
-Assign beastify() as a listener for messages from the extension.
-*/
-browser.runtime.onMessage.addListener(beastify);
-
- -

The content script adds a listener to messages from the extension (specifically, from "choose_beast.js" above). In the listener, it:

- - - -

The beasts

- -

Finally, we need to include the images of the animals.

- -

Create a new directory called "beasts", and add the three images in that directory, with the appropriate names. You can get the images from the GitHub repository, or from here:

- -

- -

Testing it out

- -

First, double check that you have the right files in the right places:

- -
beastify/
-
-    beasts/
-        frog.jpg
-        snake.jpg
-        turtle.jpg
-
-    content_scripts/
-        beastify.js
-
-    icons/
-        beasts-32.png
-        beasts-48.png
-
-    popup/
-        choose_beast.css
-        choose_beast.html
-        choose_beast.js
-
-    manifest.json
- -

Starting in Firefox 45, you can install extensions temporarily from disk.

- -

Open "about:debugging" in Firefox, click "Load Temporary Add-on", and select your manifest.json file. You should then see the extension's icon appear in the Firefox toolbar:

- -

{{EmbedYouTube("sAM78GU4P34")}}

- -

Open a web page, then click the icon, select a beast, and see the web page change:

- -

{{EmbedYouTube("YMQXyAQSiE8")}}

- -

Developing from the command line

- -

You can automate the temporary installation step by using the web-ext tool. Try this:

- -
cd beastify
-web-ext run
diff --git a/files/de/mozilla/add-ons/webextensions/examples/index.html b/files/de/mozilla/add-ons/webextensions/examples/index.html new file mode 100644 index 0000000000..627dbe559d --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/examples/index.html @@ -0,0 +1,22 @@ +--- +title: Beispiele für Erweiterungen +slug: Mozilla/Add-ons/WebExtensions/Beispiele +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Examples +--- +
{{AddonSidebar}}
+ +

Um zu veranschaulichen, wie Erweiterungen entwickelt werden, gibt es von uns ein Repository mit einfachen Beispielerweiterungen unter https://github.com/mdn/webextensions-examples. Dieser Artikel beschreibt die WebExtension-APIs, die in diesem Repository verwendet werden.

+ +

Diese Beispiele funktionieren in Firefox Nightly: Die meisten funktionieren in früheren Versionen von Firefox, aber überprüfen Sie zur Sicherheit den Schlüssel strict_min_version in der Datei manifest.json der Erweiterung.
+
+ Wenn Sie diese Beispiele ausprobieren möchten, haben Sie drei Möglichkeiten:
+
+ 1.  Klonen Sie das Repository, und laden Sie die Erweiterung direkt aus dem Quellverzeichnis mit der Funktion "Load Temporary Add-on". Die Erweiterung bleibt solange geladen, bis Sie Firefox neu starten.
+ 2. Klonen Sie das Repository und verwenden Sie dann das web-ext Befehlszeilentool, um Firefox mit der installierten Erweiterung auszuführen.
+ 3. Klonen Sie das Repository und gehen Sie dann zum Build-Verzeichnis. Dieses enthält "Build"- und "Signed"-Versionen aller Beispiele; Sie können sie also einfach in Firefox öffnen (mit Datei / Datei öffnen) und sie dauerhaft installieren, genau wie eine Erweiterung, die Sie von addons.mozilla.org installieren würden.
+
+ Wenn Sie einen Beitrag zum Repository leisten möchten, senden Sie uns ein Pull-Request!

+ +

{{WebExtAllExamples}}

diff --git a/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html b/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html new file mode 100644 index 0000000000..39498fa606 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html @@ -0,0 +1,608 @@ +--- +title: Arbeiten mit Taps API +slug: Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API +tags: + - tabs +translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API +--- +

{{AddonSidebar}}

+ +

Tabs lassen einen Benutzer mehrere Webseiten in seinem Browserfenster öffnen und wechseln dann zwischen diesen Webseiten. Mit der Tabs API können Sie mit diesen Tabs arbeiten und diese manipulieren, um Programme zu erstellen, die Nutzern neue Möglichkeiten bieten, mit Tabs zu arbeiten oder die Funktionen Ihrer Erweiterung zu liefern.

+ +

In diesem "how-to"-Artikel schauen wir uns an:

+ + + +

Wir schließen dann mit Blick auf einige andere, andere Funktionen, die von der API angeboten werden.

+ +
+

Hinweis: Es gibt einige Tab-API-Funktionen, die an anderer Stelle abgedeckt sind. Dies sind die Methoden, die Sie verwenden können, um den Inhalt der Registerkarten mit Skripten zu manipulieren  ({{WebExtAPIRef("tabs.connect")}},  {{WebExtAPIRef("tabs.sendMessage")}} und  {{WebExtAPIRef("tabs.executeScript")}}). Wenn Sie mehr Informationen über diese Methoden wünschen, lesen Sie die Artikelinhaltskripte Concepts und die Anleitung ändern Sieeine Webseite.

+
+ +

Berechtigungen und die Tabs API

+ +

Für die meisten Tabs API-Funktionen benötigen Sie keine Berechtigungen; Es gibt jedoch einige Ausnahmen:

+ + + +

Im Folgenden können Sie in der manifest.json-Datei Ihrer Erweiterung die Erlaubnis "Tabs " beantragen :

+ +
"permissions": [
+  "<all_urls>",
+  "tabs"
+],
+ +

Diese Anfrage gibt Ihnen die Nutzung aller Tabs API-Funktion auf allen Websites, die Ihr Nutzer besucht. Es gibt auch einen alternativen Ansatz für die Anforderung von Berechtigungen zur Verwendung von {{WebExtAPIRef("tabs.executeScript")}} or {{WebExtAPIRef("tabs.insertCSS")}}, bei dem Sie keine Host-Erlaubnis benötigen, in Form von "activeTab". Diese Erlaubnis bietet die gleichen Rechte wie "Tabs" mit< all _ urls >,aber mit zwei Einschränkungen:

+ + + +

Der Vorteil dieses Ansatzes ist, dass der Benutzer keine Berechtigung erhält, die besagt, dass Ihre Erweiterung "Zugriff auf Ihre Daten für alle Websites" kann. Das liegt daran , dass < all _ urls > Erlaubnis einer Erweiterung die Möglichkeit gibt, Skripte in jedem Tab auszuführen, zu jeder Zeit, die sie mag, während "activeTab" darauf beschränkt ist, der Erweiterung zu erlauben, eine vom Benutzer angeforderte Aktion in der Aktuelle Registerkarte.

+ +

Mehr über Tabs und ihre Eigenschaften entdecken

+ +

Es wird Gelegenheiten geben, in denen Sie eine Liste aller Tabs in allen Browser-Fenstern erhalten wollen. Zu anderen Zeiten möchten Sie vielleicht eine Untergruppe von Tabs finden, die bestimmten Kriterien entsprechen, wie zum Beispiel solchen, die von einem bestimmten Tab geöffnet werden oder Seiten aus einer bestimmten Domain anzeigen. Und wenn Sie Ihre Liste der Tabs haben, werden Sie wahrscheinlich mehr über ihre Eigenschaften wissen wollen.

+ +

Hier kommt die {{WebExtAPIRef("tabs.query")}} in den Fall. Wird allein verwendet, um alle Tabs zu erhalten oder das queryInfo-Objekt zu nehmen —, um Abfragekriterien anzugeben, wie zum Beispiel, ob die Registerkarte im aktuellen Fenster aktiv ist, oder eines oder mehrere von 17 Kriterien —  {{WebExtAPIRef("tabs.query")}} gibt ein Array von  {{WebExtAPIRef("tabs.Tab")}} Objekte, die Informationen über die Registerkarten enthalten.

+ +

Wenn Sie nur Informationen über den aktuellen Reiter wünschen, können Sie eine {{WebExtAPIRef("tabs.Tab")}} erhalten. Objekt für diese Registerkarte mit {{WebExtAPIRef("tabs.getCurrent")}}. Wenn Sie eine Tab-ID haben, können Sie die  {{WebExtAPIRef("tabs.Tab")}} Objekt mit {{WebExtAPIRef("tabs.get")}}.

+ +
+

notiz:

+ + +
+ +

Wie man mit dem Beispiel geht

+ +

Um zu sehen, wie  {{WebExtAPIRef("tabs.query")}} und  {{WebExtAPIRef("tabs.Tab")}} werden verwendet, lassen Sie uns durch, wie  das Tabs-Tabs-Tabs Beispiel fügt die Liste von" Schalter auf Tabs "zu seiner Toolbar-Taste Popup.

+ +

+ +

manifest.json

+ +

Hier ist das manifest.json:

+ +
{
+  "browser_action": {
+    "browser_style": true,
+    "default_title": "Tabs, tabs, tabs",
+    "default_popup": "tabs.html"
+  },
+  "description": "A list of methods you can perform on a tab.",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs",
+  "manifest_version": 2,
+  "name": "Tabs, tabs, tabs",
+  "permissions": [
+    "tabs"
+  ],
+  "version": "1.0"
+}
+ +
+

Hinweis:

+ + +
+ +

Tabs.html

+ +

Tabs.html definiert den Inhalt des Popups der Erweiterung:

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="tabs.css"/>
+ </head>
+
+<body>
+
+ <div class="panel">
+    <div class="panel-section panel-section-header">
+     <div class="text-section-header">Tabs-tabs-tabs</div>
+    </div>
+
+    <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
+
+
+…
+
+Define the other menu items
+…
+
+    <div class="switch-tabs">
+
+     <p>Switch to tab</p>
+
+     <div id="tabs-list"></div>
+
+    </div>
+ </div>
+
+ <script src="tabs.js"></script>
+
+</body>
+
+</html>
+ +

Hier ist eine Zusammenfassung der oben genannten tut:

+ +
    +
  1. Die Menüpunkte werden deklariert.
    2. +
  2. Ein leerer Div mit der ID-Tabs-Liste wird deklariert, um die Liste der Tabs zu enthalten.
    3. +
  3. Tabs.js heißt.
    4. +
+ +

Tabs.js

+ +

In tabs.jswerdenwir sehen, wie die Liste der Tabs aufgebaut und zum Popup hinzugefügt wird.  

+ +

Das Popup schaffen

+ +

Zunächst wird ein Event-Handler hinzugefügt, um ListTabs () auszuführen , wenn tabs.html geladen wird:

+ +
document.addEventListener ("DOMContentLoaded", hört Tabs);
+ +

Das erste, was listTabs () tut, ist getCurrentWindowTabs ()zu nennen. Hier wird ein {{WebExtAPIRef("tabs.query")}} verwendet, um eine  {{WebExtAPIRef("tabs.Tab")}} zu erhalten. Objekt für die Tabs im aktuellen Fenster:

+ +
function getCurrentWindowTabs() {
+  return browser.tabs.query({currentWindow: true});
+}
+ +

Jetzt ist listTabs() bereit , den Inhalt für das Popup zu erstellen.

+ +

Zunächst:

+ +
    +
  1. Schnappen Sie sich die tabs-list div.
    2. +
  2. Erstellen Sie ein Dokumentenfragment (in das die Liste eingebaut wird).
    3. +
  3. Setzen Sie Zähler.
    4. +
  4. Klären Sie den Inhalt der Tabs-Liste div.
    5. +
+ +
function listTabs() {
+ getCurrentWindowTabs().then((tabs) => {
+    let tabsList = document.getElementById('tabs-list');
+    let currentTabs = document.createDocumentFragment();
+    let limit = 5;
+    let counter = 0;
+
+    tabsList.textContent = '';
+ +

Als nächstes werden wir die Links für jeden Tab erstellen:

+ +
    +
  1. Schleifen Sie sich durch die ersten 5 Elemente aus der   {{WebExtAPIRef("tabs.Tab")}} Objekt.
    2. +
  2. Fügen Sie für jeden Artikel einen Hyperlink zum Dokumentenfragment hinzu. +
      +
    • Das Etikett des Links — das heißt, sein Text — wird mit dem Titel des Tab gesetzt (oder mit der ID, wenn er keinen Titel hat).
      • +
    • Die Adresse des Links wird mit der Personalausweis des Tabs gesetzt.
      • +
    +
    3. +
+ +
 for (let tab of tabs) {
+     if (!tab.active && counter <= limit) {
+        let tabLink = document.createElement('a');
+
+        tabLink.textContent = tab.title || tab.id;
+
+       tabLink.setAttribute('href', tab.id);
+        tabLink.classList.add('switch-tabs');
+        currentTabs.appendChild(tabLink);
+     }
+
+     counter += 1;
+
+    }
+ +

Schließlich wird das Dokumentenfragment auf die Tabs-Liste div geschrieben:

+ +
  tabsList.appendChild(currentTabs);
+  });
+}
+ +

Arbeiten mit dem aktiven Reiter

+ +

Ein weiteres verwandtes Beispielmerkmal ist die Info-Option "Alert active tab", die alle Registerkarten [{WebExtAPIRef ("-Register) ablegt. Tab ")} Objekteigenschaften für die aktive Registerkarte in einen Alarm:

+ +
 else if (e.target.id === "tabs-alertinfo") {
+   callOnActiveTab((tab) => {
+     let props = "";
+     for (let item in tab) {
+       props += `${ item } = ${ tab[item] } \n`;
+     }
+     alert(props);
+   });
+ }
+ +

Wobei callOnActiveTab() das aktive Tab-Objekt findet, indem man sich durch die Registerkarten {{WebExtAPIRef("tabs.Tab")}} schlodert. Tab ")} Objekte, die nach dem Gegenstand mit aktivem Satz suchen:

+ +
document.addEventListener("click", function(e) {
+ function callOnActiveTab(callback) {
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+ }
+}
+ +

Tabs erstellen, duplizieren, verschieben, aktualisieren, neu laden und entfernen

+ +

Nachdem Sie Informationen über die Registerkarten gesammelt haben, werden Sie höchstwahrscheinlich etwas mit ihnen machen wollen — entweder den Benutzern Funktionen für die Manipulation und Verwaltung von Registern bieten oder Funktionen in Ihrer Erweiterung implementieren.

+ +

Folgende Funktionen stehen zur Verfügung:

+ + + +
+

notiz:

+ +

Diese Funktionen erfordern alle die ID (oder IDs) der Registerkarte, die sie manipulieren:

+ + + +

Während die folgenden Funktionen auf dem aktiven Tab (sofern keine Tab-ID zur Verfügung gestellt wird) wirken:

+ + +
+ +

Wie man mit dem Beispiel geht

+ +

Das Beispiel Tabs-Tabs übt all diese Funktionen aus, bis hin zur Aktualisierung der URL eines Tabs. Die Art und Weise, in der diese APIs verwendet werden, ist ähnlich, so dass wir uns eine der am meisten involvierten Implementierungen ansehen werden, die des "Move active tab to the beginning of the the. Option "Option der Fensterliste.

+ +

Aber zunächst ist hier eine Demonstration des Features in Aktion:

+ +

{{EmbedYouTube("-lJRzTIvhxo")}}

+ +

manifest.json

+ +

Keine der Funktionen benötigt eine Betriebsgenehmigung, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.

+ +

Tabs.html

+ +

Tabs.html definiert das "Menü", das im Popup angezeigt wird, das die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben" enthält, mit einer Reihe von <a> Tags, die von einem visuellen Separator gruppiert sind. Jeder Menüpunkt erhält eine ID, die in tabs.js verwendet wird, um festzustellen, welcher Menüpunkt angefordert wird.

+ +
  <a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
+    <a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
+
+    <div class="panel-section-separator"></div>
+
+
+    <a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
+
+    <a href="#" id="tabs-reload">Reload active tab</a><br>
+    <a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
+ +

Tabs.js

+ +

Um das in tabs.html definierte "Menü" zu implementieren, enthält tabs.js einen Hörer für Klicks in tabs.html:

+ +
document.addEventListener("click", function(e) {
+ function callOnActiveTab(callback) {
+
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+}
+}
+ +

Eine Reihe von ifAnweisungen dann schauen, um die ID des Artikels geklickt.

+ +

Dieser Code-Snippet ist für die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben":

+ +
 if (e.target.id === "tabs-move-beginning") {
+   callOnActiveTab((tab, tabs) => {
+     var index = 0;
+     if (!tab.pinned) {
+       index = firstUnpinnedTab(tabs);
+     }
+     console.log(`moving ${tab.id} to ${index}`)
+     browser.tabs.move([tab.id], {index});
+   });
+ }
+ +

Es ist erwähnenswert, die Verwendung von console.log (). Auf diese Weise können Sie Informationen an die Debugger-Konsole ausgeben , was bei der Lösung von Problemen, die während der Entwicklung gefunden wurden, nützlich sein kann.

+ +

+ +

Der Bewegungscode ruft zunächst callOnActiveTab () an , der wiederum getCurrentWindowTabs () anruft, um eine {{WebExtAPIRef("tabs.Tab")}} Objekt, das die Registerkarten des aktiven Fensters enthält. Es schleift sich dann durch das Objekt, um das aktive Tab-Objekt zu finden und zurückzugeben:

+ +
function callOnActiveTab(callback) {
+   getCurrentWindowTabs().then((tabs) => {
+     for (var tab of tabs) {
+       if (tab.active) {
+         callback(tab, tabs);
+       }
+     }
+   });
+ }
+ +

Gepinnte Tabs

+ +

Eine Besonderheit von Registern ist, dass  der Benutzer Tabs in ein Fenster einfügen kann. Gepinnte Tabs werden am Anfang der Tab-Liste platziert und können nicht verschoben werden. Das bedeutet, dass die früheste Position, in die sich ein Tab bewegen kann, die erste Position nach einem gefiederten Tabs ist. Also , firstUnpinnedTab () wird aufgerufen, um die Position des ersten ungepasten Tab zu finden, indem man durch das Tabs-Objekt Looping:

+ +
function firstUnpinnedTab(tabs) {
+ for (var tab of tabs) {
+   if (!tab.pinned) {
+     return tab.index;
+   }
+ }
+}
+ +

Wir haben jetzt alles, was zum Verschieben des Tab notwendig ist: Das aktive Tab-Objekt, von dem wir die Reiter-ID erhalten können und die Position, in die der Reiter verschoben werden soll. So können wir den Schritt umsetzen:

+ +
browser.tabs.move ([tab.id], {index});
+ +

Die restlichen Funktionen zum Duplizieren, Laden, Erstellen und Entfernen von Tabs werden ähnlich implementiert.

+ +

Manipulationen eines Tab

+ +

Die nächste Reihe von Funktionen ermöglicht es Ihnen, die Zoomstufe in einem Tab zu erhalten  ({{WebExtAPIRef("tabs.getZoom")}}) und zu setzen ({{WebExtAPIRef("tabs.setZoom")}}) . Sie können auch die Zoom-Einstellungen abrufen ({{WebExtAPIRef("tabs.getZoomSettings")}}) , aber zum Zeitpunkt des Schreibens war die Möglichkeit, die Einstellungen zu setzen ({{WebExtAPIRef("tabs.setZoomSettings")}}) , war in Firefox nicht verfügbar.

+ +

Der Zoomwert kann zwischen 30% und 300% liegen (dargestellt als Dezimalzahl 0,3 bis 3).

+ +

In Firefox sind die Standard-Zoom-Einstellungen:

+ + + +

Wie man mit dem Beispiel geht

+ +

Das  Beispiel der Tabs-Tabs-Tabs enthält drei Vorführungen der Zoom-Funktion: Zoomen, Zoomen und Zoom zurücksetzen. Hier ist das Feature in Aktion:

+ +

{{EmbedYouTube("RFr3oYBCg28")}}

+ +

Schauen wir uns an, wie der Zoom-In umgesetzt wird.

+ +

manifest.json

+ +

Keine der Zoom-Funktionen benötigt Berechtigungen, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.

+ +

Tabs.html

+ +

Wir haben bereits darüber diskutiert, wie der tabs.html die Optionen für diese Erweiterung definiert, nichts Neues oder Einzigartiges wird getan, um die Zoom-Optionen zur Verfügung zu stellen.

+ +

Tabs.js

+ +

Tabs.js beginnt mit der Definition mehrerer Konstanten, die im Zoom-Code verwendet werden:

+ +
const ZOOM_INCREMENT = 0.2;
+const MAX_ZOOM = 3;
+const MIN_ZOOM = 0.3;
+const DEFAULT_ZOOM = 1;
+ +

Es verwendet dann den gleichen Hörer, den wir zuvor besprochen haben, so dass es auf Klicks in tabs.html wirken kann.

+ +

Für den Zoom in der Funktion läuft das:

+ +
else if (e.target.id === "tabs-add-zoom") {
+   callOnActiveTab((tab) => {
+     var gettingZoom = browser.tabs.getZoom(tab.id);
+     gettingZoom.then((zoomFactor) => {
+       //the maximum zoomFactor is 3, it can't go higher
+       if (zoomFactor >= MAX_ZOOM) {
+         alert("Tab zoom factor is already at max!");
+       } else {
+         var newZoomFactor = zoomFactor + ZOOM_INCREMENT;
+         //if the newZoomFactor is set to higher than the max accepted
+         //it won't change, and will never alert that it's at maximum
+         newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
+         browser.tabs.setZoom(tab.id, newZoomFactor);
+       }
+     });
+   });
+ }
+ +

Dieser Code verwendet callOnActiveTab () , um die Details des aktiven Tab zu erhalten, dann wird {{WebExtAPIRef("tabs.getZoom")}} den aktuellen Zoom-Faktor der Registerkarte erhalten. Der aktuelle Zoom wird mit dem definierten Maximum (MAX _ ZOOM)und einem Alarm verglichen, der ausgegeben wird, wenn sich der Tab bereits im Maximalzoom befindet. Andernfalls wird der Zoom-Level erhöht, aber auf den maximalen Zoom beschränkt, dann wird der Zoom mit {{WebExtAPIRef("tabs.getZoom")}}. gesetzt .

+ +

Manipulationen eines Tabs CSS

+ +

Eine weitere wichtige Fähigkeit, die die Tabs API bietet, ist die Möglichkeit, die CSS innerhalb eines Tab zu manipulieren — neue CSS zu einem Tab hinzufügen ({{WebExtAPIRef ("tabu Die [[Datei]] der [[Datei]] der [[Datei]] der [[Datei]] der [[Datei]] ist (" tabs.removeCSS ")).

+ +

Dies kann zum Beispiel nützlich sein, wenn Sie bestimmte Seitenelemente markieren oder das Standardlayout der Seite ändern wollen.

+ +

Wie man mit dem Beispiel geht

+ +

Das Apply-css-Beispiel nutzt diese Funktionen, um der Webseite im aktiven Tab einen roten Rand hinzuzufügen. Hier ist das Feature in Aktion:

+ +

{{EmbedYouTube ("bcK-GT2Dyhs")}

+ +

Gehen wir durch, wie es aufgebaut ist.

+ +

manifest.json

+ +

Um die CSS-Funktionen nutzen zu können, benötigen Sie entweder:

+ + + +

Letzteres ist das nützlichste, da es einer Erweiterung erlaubt,  {{WebExtAPIRef("tabs.insertCSS")}} und  {{WebExtAPIRef("tabs.removeCSS")}} in der aktiven Registerkarte zu verwenden, wenn sie von der Browser-oder Seitenaktion, dem Kontextmenü oder einem Shortcut der Erweiterung ausgeführt wird.

+ +
{
+  "description": "Adds a page action to toggle applying CSS to pages.",
+
+ "manifest_version": 2,
+ "name": "apply-css",
+ "version": "1.0",
+ "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css",
+
+ "background": {
+
+    "scripts": ["background.js"]
+ },
+
+ "page_action": {
+
+    "default_icon": "icons/off.svg",
+    "browser_style": true
+ },
+
+ "permissions": [
+    "activeTab",
+    "tabs"
+ ]
+
+}
+ +

Sie werden darauf hinweisen, dass zusätzlich zu "activeTab" die Erlaubnis " Tabs"angefordert wird. Diese zusätzliche Erlaubnis ist erforderlich, um das Skript der Erweiterung in die Lage zu versetzen, auf die URL des Registers zuzugreifen, deren Bedeutung wir gleich sehen werden.

+ +

Die anderen Hauptmerkmale in der manifest.json-Datei sind die Definition von:

+ + + +

Background.js

+ +

Beim Start setzt background.js einige Konstanten, um die zu bewendenden CSS zu definieren, Titel für die "Seitenaktion", und eine Liste von Protokollen, in denen die Erweiterung funktioniert:

+ +
const CSS = "body { border: 20px solid red; }";
+const TITLE_APPLY = "Apply CSS";
+const TITLE_REMOVE = "Remove CSS";
+const APPLICABLE_PROTOCOLS = ["http:", "https:"];
+ +

Wenn die Erweiterung zum ersten Mal geladen wird, verwendet sie {{WebExtAPIRef("tabs.query")}}, um eine Liste aller Tabs im aktuellen Browserfenster zu erhalten. Es schleit sich dann durch die Tabs, die InitializePageAction()rufen.

+ +
var gettingAllTabs = browser.tabs.query({});
+
+gettingAllTabs.then((tabs) => {
+ for (let tab of tabs) {
+   initializePageAction(tab);
+ }
+});
+ +

InitializePageAction verwendet protokolIsApplicable () , um festzustellen, ob die URL der aktiven Registerkarte eine ist, auf die die CSS angewendet werden kann:

+ +
function protocolIsApplicable(url) {
+ var anchor =  document.createElement('a');
+ anchor.href = url;
+ return APPLICABLE_PROTOCOLS.includes(anchor.protocol);
+}
+ +

Wenn das Beispiel dann auf der Registerkarte wirken kann, setzt initializePageAction () das PageAction-Symbol und den Titel des Tab, um die "Off"-Versionen zu verwenden, bevor die PageAction-Version sichtbar gemacht wird:

+ +
function initializePageAction(tab) {
+
+ if (protocolIsApplicable(tab.url)) {
+   browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
+   browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
+   browser.pageAction.show(tab.id);
+ }
+}
+ +

Als Nächstes wartet ein Zuhörer auf der pageAction.onClicked darauf, dass das PageAction-Symbol angeklickt wird  , und ruft toggleCSS an , wenn es ist.

+ +
browser.pageAction.onClicked.addListener (toggleCSS);
+ +

ToggleCSS () erhält den Titel der PageAction und nimmt dann die beschriebene Aktion auf:

+ + + +
function toggleCSS(tab) {
+
+
+ function gotTitle(title) {
+
+    if (title === TITLE_APPLY) {
+     browser.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"});
+     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE});
+     browser.tabs.insertCSS({code: CSS});
+    } else {
+     browser.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"});
+     browser.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY});
+     browser.tabs.removeCSS({code: CSS});
+    }
+ }
+
+ var gettingTitle = browser.pageAction.getTitle({tabId: tab.id});
+
+ gettingTitle.then(gotTitle);
+}
+ +

Um sicherzustellen, dass die PageAction nach jedem Update auf den Tab gültig ist, ruft ein Zuhörer auf  {{WebExtAPIRef("tabs.onUpdated")}} jedes Mal, wenn der Tab aktualisiert wird, auf initializePageAction () , um zu überprüfen, ob der Reiter immer noch ein Protokoll, auf das das CSS angewendet werden kann.

+ +
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
+ initializePageAction(tab);
+});
+ +

Einige weitere interessante Fähigkeiten

+ +

Es gibt noch ein paar andere Tabs API-Funktionen, die nicht in einen der früheren Abschnitte passen:

+ + + +

Weitere Informationen

+ +

Wenn Sie mehr über die Tabs API erfahren möchten, schauen Sie sich an:

+ + + +

 

diff --git a/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html new file mode 100644 index 0000000000..b48b805b98 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -0,0 +1,155 @@ +--- +title: Deine erste Erweiterung +slug: Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung +tags: + - Anleitung + - Erweiterung + - Weberweiterung +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +

In diesem Artikel wird die Erstellung einer Erweiterung (Extension) für Firefox komplett beschrieben. Diese Erweiterung soll einen roten Rand zu jeder Seite, die von "mozilla.org" oder einer Subdomain geladen wurde, hinzufügen.

+ +

Der Quellcode für dieses Beispiel ist auf GitHub auffindbar: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Als Erstes benötigst du Firefox Version 45 oder neuer.

+ +

Schreiben der Erweiterung

+ +

Erstelle ein neues Verzeichnis und navigiere zu diesem:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Jetzt erstelle eine Datei namens "manifest.json" direkt in dem "borderify" -Verzeichnis mit dem folgenden Inhalt:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Adds a red border to all webpages matching mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

Der interessanteste Key hier ist  content_scripts, welcher Firefox auffordert, ein Skript in allen Webseiten zu laden, deren URLs einem spezifischen Muster zuzuordnen sind. In diesem Fall fragen wir Firefox nach dem Skript namens "borderify.js", um es in allen HTTP oder HTTPS Seiten von "mozilla.org" oder einer Subdomain zu laden.

+ + + +
+

In manchen Situation musst eine ID für deine Erweiterung festlegen. Wenn du eine Add-on ID festlegen musst, schreibe den  applications key in manifest.json und setze die gecko.id-Eigenschaft:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}
+
+ +

icons/border-48.png

+ +

Die Erweiterung sollte ein Icon haben. Dieses wird neben dem Erweiterungseintrag in dem Add-ons manager angezeigt. Unsere manifest.json gibt den Ort des Icons unter "icons/border-48.png" an.

+ +

Erstelle das "icons" Verzeichnis direkt in dem "borderify" Verzeichnis. Speichere dort ein Icon namens "border-48.png".  Du kannst dazu das von unserem Beispiel benutzen, welches von der Google Material Design Iconsammlung stammt und unter den Richtlinien der Creative Commons Attribution-ShareAlike Lizenz steht.

+ +

Wenn du dich entscheidest ein eigenes Icon zu verwenden, dann sollte dieses 48x48 Pixel groß sein. Du kannst ebenfalls ein 96x96 Pixel großes Icon für hochauflösende Bildschirme, übergeben, welches dann als die 96 Property des icons-Objekts in der manifest.json festgelegt wird:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

Alternativ kannst du auch eine SVG-Datei übergeben, welche dann automatisch korrekt skaliert wird.
+ (Beachte: Wenn du SVG verwendest und dein Symbol Text enthält, kannst du das Werkzeug "convert to path" deines SVG-Editors verwenden, um den Text zu verflachen, so dass er mit einer einheitlichen Größe/Position skaliert wird.

+ + + +

borderify.js

+ +

Schließlich erstelle eine Datei namens "borderify.js" direkt in dem "borderify"-Verzeichnis mit diesem Inhalt:

+ +
document.body.style.border = "5px solid red";
+ +

Dieses Skript wird in Seiten geladen, welche mit dem Muster des  content_scripts-Keys in der manifest.json Datei übereinstimmen. Das Skript hat direkten Zugriff auf das Dokument, genauso wie die Skripte, die von der Seite selbst geladen werden.

+ + + +

Probiere es aus:

+ +

Als Erstes stelle sicher, dass du die richtigen Dateien an den richtigen Orten hast:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Installiere nun das Plugin

+ +

Öffne "about:debugging" in Firefox, klicke "Add-on temporär laden" und wähle eine beliebige Datei aus deinem Erweiterungsverzeichnis:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

Die Erweiterung wird nun ausgeführt und ist solange aktiv, bis du Firefox neustartest.

+ +

Alternativ kannst du Erweiterung auch von der Kommandozeile mit dem web-ext Tool ausführen.

+ +

Teste es nun aus

+ +

Nun besuche eine Seite von "mozilla.org". Du solltest jetzt einen roten Rand um die Seite erkennen:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

Versuche es allerdings nicht auf addons.mozilla.org! Content Scripts werden zurzeit auf dieser Domain geblockt.

+
+ +

Experimentiere nun ein bisschen. Bearbeite das "content script", um die Farbe des Randes zu ändern oder mache etwas anderes mit dem Seiteninhalt. Speichere das "content script", lade die Erweiterungsdateien in about:debugging neu mit Hilfe des "Neu laden"-Knopfs. Du kannst die Änderungen sofort sehen:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Verpacken und Veröffentlichen

+ +

Damit andere Personen deine Erweiterung benutzen können musst du deine Erweiterung verpacken und zum Signieren an Mozilla senden. Um mehr darüber zu lernen, siehe  "Deine Erweiterung veröffentlichen".

+ +

Was nun?

+ +

Jetzt hast du eine Vorstellung vom Prozess der WebExtension-Entwicklung für Firefox erhalten. Versuche:

+ + diff --git a/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html new file mode 100644 index 0000000000..cc002d0b24 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -0,0 +1,357 @@ +--- +title: Deine zweite Erweiterung +slug: Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +

{{AddonSidebar}}

+ +

Wenn du den Artikel "Deine erste Erweiterung" gelesen hast, hast du schon eine Vorstellung, wie man eine Erweiterung schreibt. In diesem Artikel werden wir eine komplexere Erweiterung schreiben, die mehr APIs benutzt.

+ +

Die Erweiterung fügt eine neue Schaltfläche zu Firefox hinzu. Wenn der Nutzer diese anklickt, wird ihm ein Popup angezeigt auf dem er ein Tier auswählen kann. Sobald er eines ausgewählt hat, wird der aktulle Inhalt der Website mit dem Bild des ausgewählten Tieres ersetzt.

+ +

Um das zu implementieren werden wir:

+ + + +

Man kann die Struktur der Erweiterung wie folgt darstellen:

+ +

+ +

Es ist eine einfache Erweiterung, aber es zeigt viele der Grundkonzepte der WebExtensions API:

+ + + +

Der komplette Quellcode der Erweiterung ist auf GitHub zu finden.

+ +

Um die Erweiterung zu erstellen, brauchst du mindestens Firefox 45.

+ +

Die Erweiterung schreiben

+ +

Erstelle einen neuen Ordner und öffne ihn:

+ +
mkdir beastify
+cd beastify
+ +

manifest.json

+ +

Erstelle jetzt eine Datei namens "manifest.json" und füge den folgenden Inhalt ein:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Erstellt eine Schaltfläche in der Toolbar. Klicke auf eine der Schaltflächen, um ein Tier auszuwählen. Der Inhalt des gerade geöffneten Tabs wird dann mit dem Bild des ausgewählten Tieres ersetzt. Nachschlagen: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Beastify",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+
+ + + +

Beachte, dass alle Pfade relativ zur manifest.json angegeben werden.

+ +

Das Icon

+ +

Die Erweiterung soll ein Icon beinhalten, das neben dem Eintrag der Erweiterung in der Add-ons-Verwaltung angezeigt wird (diese kannst du durch Aufrufen der URL "about:addons" öffnen). In manifest.json haben wir festgelegt, dass wir ein Icon für die Toolbar unter "icons/beasts-48.png" bereitstellen.

+ +

Erstelle das "icons"-Verzeichnis and speichere dort das Icon namens "beasts-48.png".  Du kannst das Icon aus unserem Beispiel verwenden, welches aus dem Aha-Soft’s Free Retina Icon-Set stammt und gemäß seiner Lizenzbestimmungen genutzt wird.

+ +

Wenn du dich entscheidest, ein eigenes Icon zu verwenden, sollte es eine Auflösung von 48x48 Pixeln besitzen. Zusätzlich kannst du ein 96x96 Pixel großes Icon für hochaufgelöste Bildschirme bereitstellen. In diesem Fall wird es unter der Eigenschaft 96 des icons Objekts in manifest.json aufgeführt:

+ +
"icons": {
+  "48": "icons/beasts-48.png",
+  "96": "icons/beasts-96.png"
+}
+ +

Die Toolbar-Schaltfläche

+ +

Die Toolbar-Schaltfläche benötigt ebenfalls ein Icon, das laut unserer manifest.json unter "icons/beasts-32.png" bereitsteht.

+ +

Speichere ein Icon namens "beasts-32.png" im Verzeichnis "icons".Du kannst das Icon aus unserem Beispiel verwenden, welches aus dem IconBeast Lite Icon-Set stammt und gemäß seiner Lizenzbestimmungen genutzt wird.

+ +

Wenn du kein Popup einsetzt, dann wird ein Klick-Event zur Erweiterung gesendet, sobald der Benutzer die Schaltfläche anklickt. Wenn du hingegen ein Popup einsetzt, wird dieses Klick-Event nicht gesendet, sondern das Popup wird geöffnet. Da wir ein Popup verwenden wollen, soll dieses im nächsten Schritt erstellt werden.

+ +

Das Popup

+ +

Mithilfe des Popups soll der Benutzer eines von drei Tieren auswählen können.

+ +

Erstelle ein neues Verzeichnis namens "popup" in der obersten Ebene des Erweiterungsverzeichnisses. Dieses Verzeichnis wird den Code für das Popup enthalten. Das Popup besteht aus drei Dateien:

+ + + +

choose_beast.html

+ +

Die HTML-Datei sieht folgendermaßen aus:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_beast.css"/>
+  </head>
+
+  <body>
+    <div class="button beast">Frog</div>
+    <div class="button beast">Turtle</div>
+    <div class="button beast">Snake</div>
+    <div class="button clear">Reset</div>
+
+    <script src="choose_beast.js"></script>
+  </body>
+
+</html>
+ +

Es gibt ein Element für jedes Tier. Beachte, dass in dieser Datei auch die CSS- und JavaScript-Dateien verlinkt werden, genau wie auf einer Website.

+ +

choose_beast.css

+ +

Die CSS-Datei legt die Größe des Popups fest, stellt sicher, dass die drei Auswahlmöglichkeiten, den verfügbaren Platz ausfüllen und legt das grundlegende Styling fest:

+ +
html, body {
+  width: 100px;
+}
+
+.button {
+  margin: 3% auto;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+
+.beast {
+ background-color: #E5F2F2;
+}
+
+.clear {
+ background-color: #FBFBC9;
+}
+
+.clear:hover {
+ background-color: #EAEAC9;
+}
+
+ +

choose_beast.js

+ +

In der JavaScript-Datei des Popups empfangen wir Klick-Events. Wenn ein Klick auf eines der Tiere erfolgte, wird das Content Script zum aktiven Tab hinzugefügt. Sobald das Content Script geladen wird, übergeben wir ihm eine Nachricht mit der Auswahl des Tieres:

+ +
/*
+Given the name of a beast, get the URL to the corresponding image.
+*/
+function beastNameToURL(beastName) {
+  switch (beastName) {
+    case "Frog":
+      return browser.extension.getURL("beasts/frog.jpg");
+    case "Snake":
+      return browser.extension.getURL("beasts/snake.jpg");
+    case "Turtle":
+      return browser.extension.getURL("beasts/turtle.jpg");
+  }
+}
+
+/*
+Listen for clicks in the popup.
+
+If the click is on one of the beasts:
+  Inject the "beastify.js" content script in the active tab.
+
+  Then get the active tab and send "beastify.js" a message
+  containing the URL to the chosen beast's image.
+
+If it's on a button which contains class "clear":
+  Reload the page.
+  Close the popup. This is needed, as the content script malfunctions after page reloads.
+*/
+
+document.addEventListener("click", (e) => {
+  if (e.target.classList.contains("beast")) {
+    var chosenBeast = e.target.textContent;
+    var chosenBeastURL = beastNameToURL(chosenBeast);
+
+    browser.tabs.executeScript(null, {
+      file: "/content_scripts/beastify.js"
+    });
+
+    var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true});
+    gettingActiveTab.then((tabs) => {
+      browser.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
+    });
+  }
+  else if (e.target.classList.contains("clear")) {
+    browser.tabs.reload();
+    window.close();
+  }
+});
+
+ +

It uses three WebExtensions API functions:

+ + + +

The content script

+ +

Create a new directory, under the extension root, called "content_scripts" and create a new file in it called "beastify.js", with the following contents:

+ +
/*
+beastify():
+* removes every node in the document.body,
+* then inserts the chosen beast
+* then removes itself as a listener
+*/
+function beastify(request, sender, sendResponse) {
+  removeEverything();
+  insertBeast(request.beastURL);
+  browser.runtime.onMessage.removeListener(beastify);
+}
+
+/*
+Remove every node under document.body
+*/
+function removeEverything() {
+  while (document.body.firstChild) {
+    document.body.firstChild.remove();
+  }
+}
+
+/*
+Given a URL to a beast image, create and style an IMG node pointing to
+that image, then insert the node into the document.
+*/
+function insertBeast(beastURL) {
+  var beastImage = document.createElement("img");
+  beastImage.setAttribute("src", beastURL);
+  beastImage.setAttribute("style", "width: 100vw");
+  beastImage.setAttribute("style", "height: 100vh");
+  document.body.appendChild(beastImage);
+}
+
+/*
+Assign beastify() as a listener for messages from the extension.
+*/
+browser.runtime.onMessage.addListener(beastify);
+
+ +

The content script adds a listener to messages from the extension (specifically, from "choose_beast.js" above). In the listener, it:

+ + + +

The beasts

+ +

Finally, we need to include the images of the animals.

+ +

Create a new directory called "beasts", and add the three images in that directory, with the appropriate names. You can get the images from the GitHub repository, or from here:

+ +

+ +

Testing it out

+ +

First, double check that you have the right files in the right places:

+ +
beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json
+ +

Starting in Firefox 45, you can install extensions temporarily from disk.

+ +

Open "about:debugging" in Firefox, click "Load Temporary Add-on", and select your manifest.json file. You should then see the extension's icon appear in the Firefox toolbar:

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

Open a web page, then click the icon, select a beast, and see the web page change:

+ +

{{EmbedYouTube("YMQXyAQSiE8")}}

+ +

Developing from the command line

+ +

You can automate the temporary installation step by using the web-ext tool. Try this:

+ +
cd beastify
+web-ext run
-- cgit v1.2.3-54-g00ecf