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 ++++++++++++ .../firefox_erfolgreich_erstellt/index.html | 14 - .../mozilla/developer_guide/quelltexte/index.html | 46 -- .../so_you_just_built_firefox/index.html | 14 + .../mozilla/developer_guide/source_code/index.html | 46 ++ .../index.html | 66 +++ files/de/mozilla/firefox/releases/1.5/index.html | 123 +++++ .../1.5/using_firefox_1.5_caching/index.html | 205 +++++++ files/de/mozilla/firefox/releases/3.5/index.html | 241 ++++++++ files/de/mozilla/firefox/releases/3/index.html | 173 ++++++ .../releases/3/updating_extensions/index.html | 232 ++++++++ .../3/updating_web_applications/index.html | 97 ++++ 21 files changed, 2460 insertions(+), 1323 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 delete mode 100644 files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html delete mode 100644 files/de/mozilla/developer_guide/quelltexte/index.html create mode 100644 files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html create mode 100644 files/de/mozilla/developer_guide/source_code/index.html create mode 100644 files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html create mode 100644 files/de/mozilla/firefox/releases/1.5/index.html create mode 100644 files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html create mode 100644 files/de/mozilla/firefox/releases/3.5/index.html create mode 100644 files/de/mozilla/firefox/releases/3/index.html create mode 100644 files/de/mozilla/firefox/releases/3/updating_extensions/index.html create mode 100644 files/de/mozilla/firefox/releases/3/updating_web_applications/index.html (limited to 'files/de/mozilla') 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
diff --git a/files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html b/files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html deleted file mode 100644 index 1734710732..0000000000 --- a/files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: 'So, Du hast Firefox erfolgreich erstellt' -slug: Mozilla/Developer_guide/firefox_erfolgreich_erstellt -translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox ---- -

Ein Link zu dieser Seite wird nach dem erfolgreichen Erstellen von Firefox angezeigt. Diese Seite sollte nützliche nächste Schritte enthalten, wie Links wie man Test laufen lassen kann, Build packen kann, etc. Der Inhalt hier sollte kurz gehalten werden, genauere Informationen sollten in den verlinkten Seiten hinzugefügt werden. Die Zielgruppe sind Besucher, die gerade Firefox zum ersten mal gebaut haben.

- -

Ein paar interessante Links:

- -

Tests laufen lassen

- -

Debuggen

- -

Fehler melden

diff --git a/files/de/mozilla/developer_guide/quelltexte/index.html b/files/de/mozilla/developer_guide/quelltexte/index.html deleted file mode 100644 index b5cc6c79bb..0000000000 --- a/files/de/mozilla/developer_guide/quelltexte/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Mit Mozilla Quellcode arbeiten -slug: Mozilla/Developer_guide/Quelltexte -translation_of: Mozilla/Developer_guide/Source_Code ---- -

Die unten aufgeführten Artikel helfen Ihnen dabei mit dem Mozilla Quelltext umgehen zu können, zu lernen wie man durch den Code navigiert und wie Änderungen in Projekte einfließen können.

- - - - - - - - - - - -
-

Dokumentation

-
-
-
Code aus der Mercurial Repository erhalten
-
Falls Sie vorhaben sich am Mozilla Projekt zu beteiligen, bietet es sich an den Quelltext über die Mercurial Repository zu erhalten. Lesen Sie hier wie Sie das am Besten machen.
-
Mozilla Quelltexte herunterladen
-
Wenn Sie den Quelltext für eine bestimmte Version eines Mozilla Produkts suchen, können Sie ein Archiv herunterladen.
-
Mozilla Quelltexte online durchsuchen
-
Lernen Sie wie man MXR, Mozillas online Code-Suchwerkzeug, bedient.  Das ist kein guter Weg um Code herunterzuladen, aber um ihn zu durchsuchen.
-
Mozilla Verzeichnisstrukturen für Quelltexte
-
Lernen Sie mehr über die unterschiedlichen Verzeichnisse in Mozillas Verzeichnisstrukturen und finden Sie schnell das, was Sie suchen.
-
Anfänger Bugs
-
Wenn Sie neu dabei sind und an etwas arbeiten möchten, schauen Sie sich mal diese Bugs an.
-
- 		-
-
Mozilla Coding Style
-
Dieser Code Style Guide liefert Information über das korrekte Format der Quelltexte, damit Reviewers Sie nicht direkt verspotten, wenn Sie Ihren Code einreichen.
-
Try Servers
-
Mozilla Produkte werden auf mindestens drei Plattformen kompiliert. Wenn Sie nicht Zugang zu allen haben, können Sie diese Testserver nutzen, um zu überprüfen, ob Ihr Patch auf allen Plattformen funktioniert.
-
Einen Patch erstellen
-
Sobald Sie den Mozilla Code verändert haben und sicher sind, dass alles funktioniert, erstellen Sie einen Patch und reichen diesen zur Überprüfung ein.
-
Commit Zugang zum Quelltext erhalten
-
Sind Sie bereit den wenigen Committers beizutreten? Finden Sie heraus, wie Sie Check-in Zugang zum Mozilla Code erhalten.
-
Ältere Mozilla Codes über CVS erhalten
-
Ältere Versionen des Mozilla Quelltexts und auch Versionen von NSS und NSPR werden in einer CVS Repository aufbewahrt. Lernen Sie hier mehr darüber.
-
-
diff --git a/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html b/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html new file mode 100644 index 0000000000..1734710732 --- /dev/null +++ b/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html @@ -0,0 +1,14 @@ +--- +title: 'So, Du hast Firefox erfolgreich erstellt' +slug: Mozilla/Developer_guide/firefox_erfolgreich_erstellt +translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox +--- +

Ein Link zu dieser Seite wird nach dem erfolgreichen Erstellen von Firefox angezeigt. Diese Seite sollte nützliche nächste Schritte enthalten, wie Links wie man Test laufen lassen kann, Build packen kann, etc. Der Inhalt hier sollte kurz gehalten werden, genauere Informationen sollten in den verlinkten Seiten hinzugefügt werden. Die Zielgruppe sind Besucher, die gerade Firefox zum ersten mal gebaut haben.

+ +

Ein paar interessante Links:

+ +

Tests laufen lassen

+ +

Debuggen

+ +

Fehler melden

diff --git a/files/de/mozilla/developer_guide/source_code/index.html b/files/de/mozilla/developer_guide/source_code/index.html new file mode 100644 index 0000000000..b5cc6c79bb --- /dev/null +++ b/files/de/mozilla/developer_guide/source_code/index.html @@ -0,0 +1,46 @@ +--- +title: Mit Mozilla Quellcode arbeiten +slug: Mozilla/Developer_guide/Quelltexte +translation_of: Mozilla/Developer_guide/Source_Code +--- +

Die unten aufgeführten Artikel helfen Ihnen dabei mit dem Mozilla Quelltext umgehen zu können, zu lernen wie man durch den Code navigiert und wie Änderungen in Projekte einfließen können.

+ + + + + + + + + + + +
+

Dokumentation

+
+
+
Code aus der Mercurial Repository erhalten
+
Falls Sie vorhaben sich am Mozilla Projekt zu beteiligen, bietet es sich an den Quelltext über die Mercurial Repository zu erhalten. Lesen Sie hier wie Sie das am Besten machen.
+
Mozilla Quelltexte herunterladen
+
Wenn Sie den Quelltext für eine bestimmte Version eines Mozilla Produkts suchen, können Sie ein Archiv herunterladen.
+
Mozilla Quelltexte online durchsuchen
+
Lernen Sie wie man MXR, Mozillas online Code-Suchwerkzeug, bedient.  Das ist kein guter Weg um Code herunterzuladen, aber um ihn zu durchsuchen.
+
Mozilla Verzeichnisstrukturen für Quelltexte
+
Lernen Sie mehr über die unterschiedlichen Verzeichnisse in Mozillas Verzeichnisstrukturen und finden Sie schnell das, was Sie suchen.
+
Anfänger Bugs
+
Wenn Sie neu dabei sind und an etwas arbeiten möchten, schauen Sie sich mal diese Bugs an.
+
+ 		+
+
Mozilla Coding Style
+
Dieser Code Style Guide liefert Information über das korrekte Format der Quelltexte, damit Reviewers Sie nicht direkt verspotten, wenn Sie Ihren Code einreichen.
+
Try Servers
+
Mozilla Produkte werden auf mindestens drei Plattformen kompiliert. Wenn Sie nicht Zugang zu allen haben, können Sie diese Testserver nutzen, um zu überprüfen, ob Ihr Patch auf allen Plattformen funktioniert.
+
Einen Patch erstellen
+
Sobald Sie den Mozilla Code verändert haben und sicher sind, dass alles funktioniert, erstellen Sie einen Patch und reichen diesen zur Überprüfung ein.
+
Commit Zugang zum Quelltext erhalten
+
Sind Sie bereit den wenigen Committers beizutreten? Finden Sie heraus, wie Sie Check-in Zugang zum Mozilla Code erhalten.
+
Ältere Mozilla Codes über CVS erhalten
+
Ältere Versionen des Mozilla Quelltexts und auch Versionen von NSS und NSPR werden in einer CVS Repository aufbewahrt. Lernen Sie hier mehr darüber.
+
+
diff --git a/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html b/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html new file mode 100644 index 0000000000..3bb91c8f5a --- /dev/null +++ b/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html @@ -0,0 +1,66 @@ +--- +title: Die Priorität von HTTP-Anfragen ändern +slug: Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests +tags: + - HTTP +translation_of: Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests +--- +
{{FirefoxSidebar}}
+ +

Einleitung

+ +

In Firefox 1.5 (Gecko 1.8), wurde eine API hinzugefügt um die Priorität von HTTP-Anfragen zu ändern. Vor dieser Anpassung, gab es keine Möglichkeiten um die Priorität von Anfragen anzupassen. Die API wurde in nsISupportsPriority definiert, aber nur sehr generell, damit jedes Objekt dieses Interface implementieren kann um das Konzept der Änderung der Priorität einzuführen. Dieser Artikel beschreibt die Vorgehensweise wie dieses Interface zu benutzen ist.

+ +

Zum Zeitpunkt des Enstehens dieses Artikels, beeinflusst das Ändern der Priorität von HTTP-Anfragen nur die Reihenfolge in der Verbindungsversuche durchgeführt werden. Damit ist gemeint dass die Priorität nur einen Effekt hat, wenn es mehrere Verbindungen (zu einem Server) gibt als erlaubt.

+ +

Die Beispiele in dieser Dokumentation wurden in JavaScript in Verbindung mit XPCOM geschrieben.

+ +

Verwenden der API

+ +

Sie sollten wissen, dass der Wert des priority Attributes, UNIX Konventionen befolgt, mit niedrigen Zahlen (inklusive negative Zahlen) die die höhere Priorität darstellen.

+ +

Auf die Priorität zugreifen ausgehend vom nsIChannel

+ +

Um die Priorität einer HTTP Anfrage ändern zu können, müssen Sie Zugriff auf den  nsIChannel haben, von dem die Anfrage ausgeht. Wenn Sie keinen bestehenden Channel haben, dann kann dieser erstellt werden durch:

+ +
var ios = Components.classes["@mozilla.org/network/io-service;1"]
+                    .getService(Components.interfaces.nsIIOService);
+var ch = ios.newChannel("http://www.example.com/", null, null);
+
+ +


+ Sobald der nsIChannel besteht, ist der Zugriff auf die Priorität wie folgt:

+ +
if (ch instanceof Components.interfaces.nsISupportsPriority) {
+  ch.priority = Components.interfaces.nsISupportsPriority.PRIORITY_LOWEST;
+}
+
+ +

Das Interface definiert verschiedene Standard Priorität Werte die benutzt werden können, und zwar zwischen PRIORITY_HIGHEST und PRIORITY_LOWEST.

+ +

Einen nsIChannel erhalten ausgehend von einem XMLHttpRequest

+ +

Wenn Sie in JavaScript programmieren, möchten Sie eine XMLHttpRequest benutzen, welche eine höhere Abstraktion einer HTTP Anfrage ist. Sie können auf den channel eines XMLHttpRequest zugreifen, nachdem die open Methode aufgerufen wurde:

+ +
var req = new XMLHttpRequest();
+req.open("GET", "http://www.example.com", false);
+if (req.channel instanceof Components.interfaces.nsISupportsPriority) {
+  req.channel.priority = Components.interfaces.nsISupportsPriority.PRIORITY_LOWEST;
+}
+req.send(null);
+
+ +


+ Dieses Beispiel beinhaltet einen synchronen XMLHttpRequest, welcher in der Praxis nicht angewendet werden sollte.

+ +

Die Priorität anpassen

+ +

nsISupportsPriority beinhaltet eine Methode adjustPriority. Diese Methode sollte benutzt werden, wenn die Priorität einer Anfrage um einen gewissen Betrag geändert werden soll. Zum Beispiel, wenn die Priorität etwas höher sein soll, muss folgendes gemacht werden:

+ +
// assuming we already have a nsIChannel from above
+if (ch instanceof Components.interfaces.nsISupportsPriority) {
+  ch.adjustPriority(-1);
+}
+
+ +

Hier ist zu bemerken, dass niedrigere Zahlen eine höhere Priorität bedeuten, also wenn um eine negative Zahl angepasst wird, so wird eine höhere Priorität eingestellt.

diff --git a/files/de/mozilla/firefox/releases/1.5/index.html b/files/de/mozilla/firefox/releases/1.5/index.html new file mode 100644 index 0000000000..087bc441aa --- /dev/null +++ b/files/de/mozilla/firefox/releases/1.5/index.html @@ -0,0 +1,123 @@ +--- +title: Firefox_1.5_für_Entwickler +slug: Firefox_1.5_für_Entwickler +tags: + - CSS + - DOM + - Erweiterungen + - Firefox 1.5 + - HTML + - JavaScript + - RDF + - SVG + - Web Development + - Web Standards + - XML + - XML Web Services + - XSLT + - XUL +translation_of: Mozilla/Firefox/Releases/1.5 +--- +
{{FirefoxSidebar}}

Basierend auf der Gecko 1.8 Engine, verbessert Firefox 1.5 die Unterstützung von Webstandards und stellt neue Fähigkeiten zur Verfügung, um die nächste Generationen von Webapplikationen zu ermöglichen. Firefox 1.5 verbessert die Unterstützung von CSS2 und CSS3, führt neue APIs für skript- und programmierbare 2D Grafiken durch SVG 1.1 und durch <canvas> ein, lernt XForms und XML Events kennen und wird außerdem viele DHTML, JavaScript und DOM Erweiterungen mit sich bringen.

+ +

Entwicklertools

+ +

Es gibt verschiedene Tools und Browser-Erweiterungen als Hilfe für Entwickler in Firefox 1.5:

+ + + +

Achtung: Einige Erweiterungen, wie z.B. JavaScript Debugger (Venkman) unterstützen Firefox 1.5 nicht vollständig und werden deshalb ausgeschaltet.

+ +

Überblick

+ +

Einige der neuen Features von Firefox 1.5:

+ +

Für Entwickler von Webseiten und Webapplikationen

+ +
+
Einführung: SVG in XHTML
+
Lernen Sie, wie sich SVG in XHTML Dokumente einbetten lässt und wie man mit JavaScript und CSS ein Bild manipulieren kann, so einfach als wenn man normales XHTML schreiben würde. Unter SVG in Firefox finden sich außerdem Informationen zum Status der aktuellen Implementation von SVG.
+
Grafiken mit Canvas zeichnen
+
Lernen Sie, wie man mit dem <canvas>-Element Grafiken und andere Objekte zeichnet.
+
CSS3 Columns
+
Lernen Sie etwas über die neue Unterstützung von mehrspaltigen Text-Layout, wie es für CSS3 vorgesehen ist.
+
Firefox 1.5 Caching benutzen
+
Sehen Sie wie schnell vorwärts- und rückwärts-Navigation mit dem bfcache ist.
+
+ +

Entwickler von XUL und Erweiterungen

+ +
+
Building an Extension
+
In diesem Tutorial wird Ihnen Schritt-für-Schritt erklärt, wie Sie eine einfache Erweiterung für Firefox entwickeln können. Siehe auch anhand des Tutorials auf MozillaZine(en), welches die neuen Möglichkeiten des Erweiterungsmanagers in Firefox 1.5 erklärt.
+
XPCNativeWrapper
+
XPCNativeWrapper ist eine Möglichkeit ein Objekt so zu verpacken, dass es sicher ist, es als privilegierten Code zu benutzen. Dies funktioniert in allen Firefox-Versionen, obwohl sich das Verhalten mit Firefox 1.5 verändert hat.
+
Preferences System
+
Erfahren Sie mehr über das Widgets-System mit dem Sie einfacher Optionsfenster erstellen können und dabei sogar Javascript sparen.
+
Internationale Zeichen in XUL JavaScript
+
XUL JavaScript Dateien können nun Buchstaben enthalten die kein ASCII sind.
+
Tree API Änderungen
+
Die Schnittstellen zum Zugriff auf XUL <tree>-Elemente haben sich geändert.
+
Änderungen an XUL für Firefox 1.5
+
Zusammenfassung von XUL Änderungen. Siehe auch XUL Anwendungen für Firefox 1.5 anpassen.
+
+ +
Netzwerk-bezogene Änderungen
+ + + +

Neue Möglichkeiten für den Endbenutzer

+ +

User Experience

+ + + +

Sicherheit und Privatsphäre

+ + + +

Unterstützung von offenen Webstandards

+ +

Mit der Unterstützung von Webstandards bleibt Firefox weiter führend auf dem Markt mit einheitlichen, systemübergreifenden Implementierungen für:

+ + + +

Firefox 1.5 unterstützt folgende Protokolle zum Datentransfer (HTTP, FTP, SSL, TSL, etc.), multi-linguale Buchstaben (Unicode), Grafiken (GIF, JPEG, PNG, SVG und weitere) und die letzte Version der weltweit beliebten Skriptsprache JavaScript 1.6.

+ +

Änderungen seit Firefox 1.0

+ +

Viele Neues wurde in Firefox eingeführt, seit dem letzten Release am 9. November 2004. Firefox wurde mit vielen Eigenschaften erweitert und Fehler wurden beseitigt. Eine detailreiche Liste findet sich auf: squarefree.com (Englisch).

+ +

{{ languages( { "en": "en/Firefox_1.5_for_developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "it": "it/Firefox_1.5_per_Sviluppatori", "ja": "ja/Firefox_1.5_for_developers", "nl": "nl/Firefox_1.5_voor_ontwikkelaars", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}

diff --git a/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html new file mode 100644 index 0000000000..cac83f31ce --- /dev/null +++ b/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html @@ -0,0 +1,205 @@ +--- +title: Benutzen des Zwischenspeichers in Firefox 1.5 (caching) +slug: Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching) +tags: + - Caching + - Firefox 1.5 + - JavaScript +translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching +--- +
{{FirefoxSidebar}}

Einführung

+ +

Firefox 1.5 verwendet einen internen Speicher-Cache, der sich den Inhalt der geladenen Webseiten, sowie den Status von JavaScripts für eine Sitzung merkt. Dadurch verbessert sich die Ladezeit bereits geladener Webseiten erheblich und es kann schnell zwischen bereits besuchten Webseiten vor und zurück gewechselt ohne, dass die Seiten neu geladen werden müssen oder der JavaScript-Status verloren geht. Diese Funktion wird als bfcache  („Back-Forward Cache“) bezeichnet. Der zwischengespeicherte Status wird solange erhalten, bis der Browser geschlossen wird.

+ +

Unter bestimmten Umständen, verwendet Firefox diesen Zwischenspeicher jedoch nicht:

+ + + +

Die sogenannte bfcache Funktion verändert das Ladeverhalten von Webseiten ungemein. Webentwickler möchten daher unter Umständen:

+ + + +

Zwei neue Browser-Events ermöglichen beides.

+ +

Die neuen Browser-Events

+ +

Falls man die neuen Events verwendet, werden die Webseiten in anderen und älteren Browsern trotzdem richtig angezeigt. Getestet wurden Firefox, Internet Explorer, Opera und Safari. Die neue bfcache-Funktion wird nur verwendet, wenn die Webseite in einen Firefox-Browser 1.5 oder höher geladen wird.

+ +

Hinweis: Safari unterstützt die neuen Events in einer zukünftigen Version (10-2009, siehe WebKit bug).

+ +

Standardverhalten bei Webseiten sehen wie folgend aus:

+ +
    +
  1. Benutzer navigiert zu der Webseite.
    2. +
  2. Wenn sich die Seite aufbaut, werden die Inline-Scripts ausgeführt.
    3. +
  3. Nach vollständigem Aufbau, wird der unload-Handler ausgelöst.
    4. +
+ +

Einige Seiten verfügen über einen vierten Schritt. Falls die Seite einen unload-Handler besitzt, wird dieser beim Verlassen der Webseite zusätzlich ausgelöst. Falls ein unload oder beforeunload Handler vorhanden ist, wird die Seite nicht zwischengespeichert.

+ +

Wenn ein Benutzer zu einer bereits zwischengespeicherten Seite navigiert, werden die bereits ausgeführten Inline-Scripts und der onload-Handler ignoriert (siehe oben: Schritt 2 und 3), damit werden in fast allen Fällen die Effekte dieser Skripte erhalten.

+ +

Wenn die Webseite Skripte enthält, oder anderes Verhalten, welches bei jedem neuen Besuch des Benutzers erneut ausgeführt werden soll, oder wenn man wissen möchte, ob ein Benutzer zu einer zwischengespeicherten Seite navigiert, muss man das über das pageshow-Event realisieren.

+ +

Wenn man eine Aktion ausführen will, die beim Verlassen einer Webseite ausgeführt wird und man den Vorteil des neuen bfcache-Feature nutzen möchte, verwendet man nicht den unload-Handler, sondern benutzt das neue pagehide-Event.

+ +

Das pageshow Ereignis

+ +

Dieses Ereignis funktioniert genauso, wie das load-Event, jedoch wird dieses Ereignis bei jedem Aufruf der Webseite ausgelöst (wobei das onload-Ereignis nicht ausgelöst wird, wenn die Webseite aus dem Zwischenspeicher des Firefox 1.5 geladen wird). Wird die Webseite das erste Mal geladen, folgt nach dem Auslösen des onload-Ereignisses sofort das pageshow-Event. Das pageshow-Ereignis besitzt eine boolsche Eigenschaft, persisted, deren Inhalt auf beim ersten Laden auf false steht. Der Wert true bedeutet, dass der Browser diese Seite aus dem Zwischenspeicher holt.

+ +

Folglich muss man jedes JavaScript, welches bei jedem Besuch der Webseite durchlaufen soll, mit dem pageshow-Ereignis verknüpfen.

+ +

Werden JavaScript Funktionen als Teil des pageshow Events aufgerufen, kann durch den Aufruf des pageshow Events im load Event sichergestellt werden, dass die Funktionen von anderen Versionen und Browsern als Firefox 1.5, geladen werden. Siehe auch im späteren Beispiel weiter unten.

+ +

Das pagehide Ereignis

+ +

Falls ein bestimmtes Verhalten definiert werden soll, wenn der Benutzer von der Seite weg navigiert und man nicht das unload-Event verwenden will (welches verursachen würde, dass die Webseite nicht zwischengespeichert wird), kann man nun das neue pagehide-Event verwenden. Wie auch das pageshow Ereignis, besitzt das pagehide-Event die boolsche Eigenschaft persisted. Der Inhalt dieser Eigenschaft steht auf false, wenn der Seiteninhalt nicht aus dem Zwischenspeicher geholt wird, und steht auf true, wenn der Inhalt aus dem Cache geholt wird. Wenn die Eigenschaft auf false steht, wird der unload-Handler, falls vorhanden, sofort nach dem pagehide-Event ausgeführt.

+ +

Firefox 1.5 versucht das Ladeverhalten der Webseiten so zu simulieren, als wenn die Seite das erste Mal geladen wird. Frames werden genauso behandelt, wie das Top-Level Fenster. Falls die Webseite Frames enthält und sie aus dem Zwischenspeicher geladen werden:

+ + + +

Seiten-Caching trotz unload und beforeunload Handler

+ +

Wenn man unload oder beforeunload Events verwenden möchte und das Seiten-Caching aufrecht erhalten will, können diese Events einfach in der Event-Handler Funktion entfernt werden und wieder in der pageshow Handler-Fuktion eingesetzt werden, wenn man auf die Seite zurückkehrt:

+ +
window.addEventListener('pageshow', PageShowHandler, false);
+window.addEventListener('unload', UnloadHandler, false);
+
+function PageShowHandler() {
+	window.addEventListener('unload', UnloadHandler, false);
+}
+
+function UnloadHandler() {
+	window.removeEventListener('beforeunload', UnloadHandler, false);
+}
+
+ +

Beispiel-Code

+ +

Das folgende Beispiel veranschaulicht eine Seite, die beide Events verwendet (load und pageshow). Die Beispiel-Webseite verhält sich wie folgt:

+ + + + + + + +

In diesem Beispiel:

+ + + +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+<HTML>
+<head>
+<title>Order query : Firefox 1.5 Example</title>
+<style type="text/css">
+body, p {
+	font-family: Verdana, sans-serif;
+	font-size: 12px;
+   	}
+</style>
+<script type="text/javascript">
+function onLoad() {
+	loadOnlyFirst();
+	onPageShow();
+}
+
+function onPageShow() {
+//Berechne die aktuelle Zeit
+        var currentTime= new Date();
+	var year=currentTime.getFullYear();
+	var month=currentTime.getMonth()+1;
+	var day=currentTime.getDate();
+	var hour=currentTime.getHours();
+	var min=currentTime.getMinutes();
+	var sec=currentTime.getSeconds();
+	var mil=currentTime.getMilliseconds();
+	var displayTime = (month + "/" + day + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value=displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+</script>
+</head>
+<body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();">
+<h2>Order query</h2>
+
+<form name="zipForm" action="http://www.example.com/formresult.html" method="get">
+<label for="timefield">Date and time:</label>
+<input type="text" id="timefield"><br>
+<label for="name">Name:</label>
+<input type="text" id="name"><br>
+<label for="address">Email address:</label>
+<input type="text" id="address"><br>
+<label for="order">Order number:</label>
+<input type="text" id="order"><br>
+<input type="submit" name="submit" value="Submit Query">
+</form>
+</body>
+</html>
+
+ +

Im Gegensatz dazu: Wenn die vorherige Seite nicht auf das pageshow-Event hört und alle Berechnungen als Teil des load-Events verarbeitet werden (und anstelle des oberen Codes, der untere verwendet wird), wird die Cursor-Position und der Datum/Zeit-Stempel vom Firefox 1.5 zwischengespeichert, falls der Benutzer von der Seite weg navigiert. Kommt der Benutzer nun auf die Webseite zurück, wird der zwischengespeicherte Datum/Zeit-Stempel angezeigt.

+ +
<script>
+function onLoad() {
+	loadOnlyFirst();
+
+//Berechne die aktuelle Zeit
+        var currentTime= new Date();
+	var year = currentTime.getFullYear();
+	var month = currentTime.getMonth()+1;
+	var day = currentTime.getDate();
+	var hour=currentTime.getHours();
+	var min=currentTime.getMinutes();
+	var sec=currentTime.getSeconds();
+	var mil=currentTime.getMilliseconds();
+	var displayTime = (month + "/" + day + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value=displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+</script>
+</head>
+
+<body onload="onLoad();">
+
+ +

Entwicklung von Firefox Erweiterungen

+ +

Firefox 1.5 Erweiterungen müssen diese Zwischenspeicher Funktionalität unterstützen. Falls Sie eine Erweiterung für den Firefox entwickeln, welche kompatibel zu 1.5 und früheren Versionen sein soll, achten Sie darauf, dass Funktionen des onload-Events nur bei Seiten verwendet werden, die zwischengespeichert werden können und Funktionen des pageshow-Events benutzen, bei denen kein Cache verwendet werden soll.

+ +

Zum Beispiel sollte die Google-Toolbar für den Firefox bei der autolink-Funktion auf das onload-Event reagieren und für die PageRank-Funktion mit dem pageshow-Event arbeiten, um kompatibel zu allen Firefox-Versionen zu sein.

+ +

{{ languages( { "en": "en/Using_Firefox_1.5_caching", "it": "it/Usare_il_caching_di_Firefox_1.5", "fr": "fr/Utilisation_du_cache_de_Firefox_1.5", "ja": "ja/Using_Firefox_1.5_caching" } ) }}

diff --git a/files/de/mozilla/firefox/releases/3.5/index.html b/files/de/mozilla/firefox/releases/3.5/index.html new file mode 100644 index 0000000000..33e6a0c728 --- /dev/null +++ b/files/de/mozilla/firefox/releases/3.5/index.html @@ -0,0 +1,241 @@ +--- +title: Firefox_3.5_für_Entwickler +slug: Firefox_3.5_für_Entwickler +tags: + - Firefox 3.5 + - Gecko 1.9.1 +translation_of: Mozilla/Firefox/Releases/3.5 +--- +
{{FirefoxSidebar}}

In Firefox 3.5 wurde eine nicht geringe Zahl an neuen Bestandteilen eingeführt, darunter zusätzliche und verbesserte Unterstützung für eine Vielzahl von Webstandards. Dieser Artikel stellt eine umfangreiche Liste mit Links zu anderen Artikeln über die Hauptverbesserungen zur Verfügung.

+ +

Neue Bestandteile in Firefox 3.5 für Entwickler

+ +

Für Webseiten und Webanwendungsentwickler

+ +

HTML5-Unterstützung

+ +
+
Audio- und Video-Elemente
+
Firefox 3.5 fügt Unterstützung für die HTML 5 audio und video-Elemente hinzu.
+
Offline-Resourcen
+
Firefox 3.5 unterstützt nun vollständig die HTML5 „Offline-Resources“ Spezifikation.
+
Drag und Drop
+
Die HTML5 Drag und Drop API bietet Unterstützung für Drag und Drop von Elementen innerhalb einer Webseite und zwischen verschiedenen Webseiten. Dies beinhaltet auch eine einfachere API für die Benutzung von Erweiterungen und Mozilla-basierten Anwendungen.
+
+ +

Neu unterstütze CSS Funktionen

+ +
+
Unterstützung für ladbare Schriftarten
+
Die neue {{ cssxref("@font-face") }} @-Regel ermöglicht es Webseiten, ladbare Schriftarten zu enthalten, sodass die Seiten genauso gerendert werden können, wie es der Autor der Seite es erwartet.
+
CSS Media Queries
+
Firefox 3.5 unterstützt nun CSS Medienanfragen, die die Unterstützung für medienabhängige Seiten verbessern.
+
{{ cssxref(":before") }} und {{ cssxref(":after") }} auf CSS 2.1 aktualisiert
+
Die :before und :after Pseudo-Elemente wurden auf volle CSS-2.1-Unterstützung aktualisiert; hinzugefügte Unterstützung für position, float, list-style-*, und einige display-Eigenschaften.
+
ch Einheit für Längenangaben
+
Die ch Einheit könn jetzt überall dort, wo eine Länge angegeben werden kann, verwendet werden. 1ch entspricht der Länge des »0« (Null) Zeichens.
+
opacity
+
Die -moz-opacity Mozilla CSS Erweiterung wurde zu Gunsten der standardisierten opacity-Eigenschaft entfernt.
+
text-shadow
+
Die text-shadow-Eigenschaft, die es Webinhalten erlaubt Schatteneffekte auf Text und Text-Dekorationen festzulegen, wird nun unterstützt.
+
word-wrap
+
Diese neu unterstützte Eigenschaft erlaubt es, festzulegen, ob Zeilen innerhalb von Worten umgebrochen werden dürfen. Das kann nützlich sein, wenn die Wörter aufgrund ihrer Länge sonst zum Überlauf führen.
+
Die white-space Eingeschaft unterstützt den pre-line Wert
+
Die {{ cssxref("white-space") }} Eigenschaft akzeptiert nun den pre-linie Wert.
+
Firefox 3.5 fügt die folgenden Mozilla CSS Eingenschaften ein:
+
-moz-box-shadow
+ -moz-border-image
+ -moz-column-rule
+ -moz-column-rule-width
+ -moz-column-rule-style
+ -moz-column-rule-color +
+
Pseudo-Klasse -moz-window-shadow und Eigenschaft -moz-system-metric(mac-graphite-theme)
+
Diese neuen CSS-Eigenschaften wurden hinzugefügt, um das die Arbeit mit Themes zu erleichtern.
+
Neue Werte für -moz-appearance
+
-moz-win-glass und -moz-mac-unified-toolbar wurden als Werte zu -moz-appearance hinzugefügt.
+
Verwendung von CSS-Transformationen
+
Firefox 3.5 unterstützt CSS-Transformationen. Siehe -moz-transform und -moz-transform-origin für Details.
+
Diese Selektoren werden in Firefox 3.5 neu unterstützt:
+
:nth-child
+ :nth-last-child
+ :nth-of-type
+ :nth-last-of-type
+ :first-of-type
+ :last-of-type
+ :only-of-type
+
+ +

Neue DOM Funktionen

+ +
+
localStorage
+
Firefox 3.5 fügt Unterstützung für die Web Storage localStorage Eigenschaft hinzu, welche einen Weg für Webanwendungen bereitstellt, Daten lokal auf dem Computer des Benutzers zu speichern.
+
Verwendung von Web Workers
+
Firefox 3.5 unterstützt Web Workers, um einfaches Multi-Threading in Webanwendungen zu ermöglichen.
+
Verwendung von Geolocation
+
Firefox 3.5 unterstützt die Geolocation API, die es Webanwendungen erlaubt, Informationen über die aktuelle Position des Benutzers zu erhalten, wenn ein Provider für diese Informationen installiert und aktiviert ist.
+
Mit Selektoren DOM Elemente auswählen
+
Die Selektoren-API erlaubt es, ein Dokument nach Elementen, die einer bestimmten Auswahlregel gerecht werden, abzufragen.
+
Mausgesten Events
+
Firefox 3.5 unterstützt Mausgesten Events wie z.B. »Trackpad-Swipes«.
+
Das NodeIterator Objekt
+
Das NodeIterator Objekt bietet Unterstützung für das iterieren über eine Liste von Knoten in einem DOM-Unterbaum.
+
Das MozAfterPaint Event
+
Dieses neue DOM-Event wird nach Painting-Aktualisierungen in Fenstern ausgelöst.
+
Das MozMousePixelScroll Event
+
Dieses neue DOM-Event erlaubt die Erkennung von pixel-basierten Mausrad-Events anstatt von zeilenbasierten Scroll-Events.
+
+ +

Neue JavaScript Funktionen

+ +
+
Neues in JavaScript
+
Ein Überblick über die Veränderungen in JavaScript 1.8.1
+
Object.getPrototypeOf()
+
Diese Methode gibt einen Prototyp eines bestimmten Objektes zurück.
+
Verwendung von nativen JSON
+
Firefox 3.5 besitzt nun nativen JSON-Support.
+
Neue Trim-Methoden für das String-Objekt
+
Das String-Objekt besitzt nun die Methoden trim(), trimLeft(), und trimRight().
+
+ +

Netzwerk

+ +
+
Cross-Site-Zugriff für HTTP
+
In Firefox 3.5 ist es nun möglich, über Domaingrenzen hinweg zu arbeiten, auch wenn der HTTP-Request über das XMLHttpRequest gestartet wurde, vorrausgesetzt, der Server unterstützt dieses.
+
Progress-Events für XMLHttpRequest
+
Progress-Events werden dazu bereitgestellt, um Erweiterungen zu befähigen, den Fortschritt der Requests zu überwachen.
+
Verbesserte Unterstützung für synchrones XMLHttpRequest
+
DOM Timeout und Input Events werden nun während eines synchronen XMLHttpRequest unterdrückt.
+
DNS-Prefetching_überwachen
+
Firefox 3.5 stellt DNS-Prefetching zur Verfügung, wobei es die Namensauflösung für Domains vor der Zeit für die Links durchführt, was Zeit spart, wenn die Links aufgerufen werden. Dieser Artikel beschreibt wie Sie Ihre Webseite mit Prefetching-Operationen aufpeppeln können.
+
+ +

Neue Canvas Funktionen

+ +
+
HTML5 Text-API für canvas-Elemente
+
Canvas-Elemente unterstützten nun die HTML5 Text-API.
+
Schatteneffekte innerhalb eines canvas
+
Schatteneffekte für canvas-Elemente werden nun unterstützt.
+
createImageData()
+
Die Canvas-Methode createImageData() wird nun unterstützt. Sie erlaubt es ein ImageData-Objekt zu erzeugen anstatt es automatisch erzeugen zu lassen. Dies kann die Geschwindigkeit anderer ImageData-Methoden steigern, da sie ja kein Objekt mehr erzeugen müssen.
+
moz-opaque-Attribut
+
Dieses Attribut lässt das Canvas wissen, ob Transparenz ein Faktor sein wird oder nicht. Mit diesem Wissen wird die Geschwindigkeit gesteigert.
+
+ +

Neue SVG-Bestandteile

+ +
+
SVG Effekte auf HTML/XHTML anwenden
+
SVG Effekte können nun auf HTML bzw. XHTML angewandt werden.
+
+ +

Sonstige neue Funktionen

+ +
+
ICC Farbkorrektur
+
Firefox 3.5 unterstützt nun ICC-Farbkorrektur für "getaggte" Bilder.
+
defer-Attribut Unterstützung für script-Elemente
+
Dieses Attribut weist den Browser an, dass die Verarbeitung der Seite fortgesetzt werden soll, obwohl das Skript noch nicht fertig ausgeführt wurde.
+
+ +

Anderweitige Verbesserungen

+ +
    +
  • Die Textknoten-Eigenschaften wholeText und replaceWholeText() wurden implementiert.
    • +
  • Die Eigenschaft element.children wurde hinzugefügt. Es gibt eine Sammlung mit den Kindelementen des gegebenen Elementes zurück.
    • +
  • Die Eigenschaft element.contentEditable wird von nun an unterstützt, um editierbare Elemente zu ermöglichen.
    • +
  • Die Element Traversal API wird nun vom DOM Element-Objekt unterstützt.
    • +
  • HTML-Knoten können nun per cloneNode() geklont werden.
    • +
  • Die nichtstandardkonforme Methode getBoxObjectFor() aus dem DOM wurde zu Gunsten von getBoundingClientRect() ersetzt.
    • +
  • Versandte DOM-Events können nun re-versandt werden. Dadurch kann der Acid 3 Test 30 bestanden werden.
    • +
  • Am DOM 2 Range Handling wurden Verbesserungen vorgenommen.
    • +
  • Im nicht-chrome Anwendungsbereich, sind abgefangene Objekte in Exceptions die tätsächlichen Objekte, anstatt eines XPConnect Wrappers außerhalb des abgefangenen Objekts.
    • +
  • SVG ID Referenzen sind jetzt live.
    • +
  • SVG-Filter arbeiten nun auch mit foreignObject.
    • +
  • Die GetSVGDocument()-Methode wurde aus Gründen der Kompatibilität zu object und iframe-Elementen hinzugefügt.
    • +
  • Implizite Einstellungen von Eigenschaften in Objekt- und Array-Initialisierern führen nicht mehr Setter in JavaScript aus. Siehe dazu:Object and array initializers should not invoke setters when evaluated for details.
    • +
  • Die gDownloadLastDir.path-Variable wurde umbenannt zu: gDownloadLastDir.file, da es sich nun auf eine {{ interface("nsIFile") }} bezieht.
    • +
  • Die gDownloadLastDirPath-Variable wurde umbenannt zu: gDownloadLastDirFile, da es sich nun auf eine {{ interface("nsIFile") }} bezieht.
    • +
  • Ab Firefox 3.5 können keine data: Bindings in chrome Paketen, die XPCNativeWrapper Automation abrufen, mehr verwendet werden.
    • +
+ +

Für XUL und Addon-Entwickler

+ +

Wenn Sie ein Addon-Entwickler sind, sollten sie das Dokument Erweiterungen für Firefox 3.5 aktualisieren unbedingt lesen. Diese beinhaltet einen extrem hilfreichen Überblick über das, was geändert wurde und Ihre Erweiterung betrifft oder betreffen könnte.

+ +

Neue Komponenten und Funktionalitäten

+ +
+
Erweiterungen im „Private-Browsing“-Modus
+
Firefox 3.5 bietet nun den „Private-Browsing“-Modus an, sodass keine Aufzeichnungen über die Aktivität des Benutzer gemacht werden. Erweiterungen können Private-Browsing anhand der in diesem Artikeln beschriebenen Methoden unterstützen.
+
Sicherheitsverbesserungen in Firefox 3.5
+
Dieser Artikel beschreibt sicherheitsrelevante Verbesserungen in Firefox 3.5
+
Theme Verbesserungen in Firefox 3.5
+
Dieser Artikel beschreibt Themes betreffende Verbesserungen in Firefox 3.5
+
Überwachen von WiFi-Zugriffspunkte
+
Code mit UniversalXPConnect-Priviligien kann nun die Liste der verfügbaren Access Points überwachen, Informationen über deren SSIDs, Mac-Adressen und Signalstärke erhaltend. Dies kann zusammen mit der Geolocation für die Bereitstellung von WiFi-basierten Location Services genutzt werden.
+
+ +

Bemerkenswerte Veränderungen und Verbesserungen

+ +
    +
  • Das XUL textbox-Widget bietet nun ein search-Typ für die Benutzung als Suchfeld an.
    • +
  • Um Drag and Drop zwischen Fenster zu unterstützen, bietet das browser-Widget nun eine swapDocShells()-Methode an.
    • +
  • Das level Attribut wurde zum panel Element hinzugefügt. Dieses Attribut legt fest, ob das Panel überhalb anderer Anwendungen steht oder einfach überhalb des Fensters indem sich das Panel befindet.
    • +
  • XUL-Elemente unterstützen nun die clientHeight, clientWidth, scrollHeightund scrollWidthEigenschaften.
    • +
  • keysets beinhalteten nun ein disabled-Attribut.
    • +
  • Außerdem können keysets nun dank der removeChild() Methode des Knotens entfernt werden.
    • +
  • Die initialize()-Methode aus mozIStorageStatement wurde entfernt. An ihrer Stelle sollte nun createStatement() benutzt werde.
    • +
  • Die Storage API unterstützt nun asynchrone Requests.
    • +
  • Die nsICookie2-Schnittstelle besitzt nun das neue creationTime Attribut. Damit lässt sich der Erstellungszeitpunkt eines Cookies feststellen.
    • +
  • Zu nsIProtocolHandler wurde ein Flag (URI_IS_LOCAL_RESOURCE) hinzugefügt, das während der Chrome-Registrierung für die Überprüfung, ob einem Protokoll erlaubt ist, registriert zu werden, verwendet wird.
    • +
  • Unter Linux sieht Firefox auch in /usr/lib/mozilla/plugins nach Plugins nach.
    • +
  • Die Plugin-API wurde für die Unterstützung des „Private-Browsing“-Modus aktualisiert. Es kann nun NPN_GetValue() verwendet wurden, um den Status des „Private-Browsing“-Modus mit der Variable NPNVprivateModeBool abzufragen.
    • +
+ +

Neue Funktionen für Endbenutzer

+ +

User Experience

+ +
+
„Dem Ort gerechtes Surfen“
+
Wenn erwünscht, können Webseiten Informationen über die aktuelle Geoposition des Benutzers erhalten. Um den Datenschutz nicht zu verletzen werden sie selbstverständlich gefragt bevor soetwas getan wird.
+
Offene Audio- und Video-Unterstützung
+
Firefox 3.5 unterstützt eingebettetes Audio und Video dank des offenen Ogg-Formates und WAV-Formates für Audio. Keine Plugins, keine verwirrende Fehlermeldungen, dass irgendetwas installiert werden müsse oder, das dass dieses oder jenes für Ihre Plattform nicht verfügbar sei.
+
Lokaler Datenspeicher
+
Webanwendungen können nun die Fähigkeit des lokalen Speichers ausnutzen, um Daten auf Ihrem Computer zu speichern. Dies ist hervorragend und kann von einfachen Seiteneinstellungen bis zu komplexeren Daten eingesetzt werden.
+
+ +

Sicherheit und Datenschutz

+ +
+
Privates Browsing
+
Sie müssen eines anderen Browser benutzen? Wechseln sie auf „Privater Modus“ und nichts wird über sie erhalten bleiben, keine Sitzungsdaten, keine Cookies, keine Chronik oder irgendwelche anderen potentiell privaten Informationen.
+
Bessere Kontrolle über den Datenschutz
+
Die Systemeinstellungen für den Datenschutz wurden komplett neu entworfen, sodass sie nun mehr Kontrolle über den Datenschutz haben. Die Benutzer können auswählen, ob sie irgendetwas behalten oder wegewerfen wollen, miteinbezogen die Chronik, Chronikinformationen, Cookies, Downloads und Formfeld-Informationen. Außerdem kann der Benutzer auswählen, ob die Chronik und/oder Lesezeichen in den Vorschlägen der Locationbar auftauchen sollen oder nicht.
+
+ +

Performance

+ +
+
Schnelleres JavaScript
+
Die Geschwindigkeit von JavaScript, das "J" aus dem "AJAX," wurde in Firefox 3.5 dank des neuen TraceMonkey JavaScript-Engines extrem erhöht. Dadurch werden Webanwendung um ein Vielfaches schneller ausgeführt als noch in Firefox 3.
+
Schnelleres Seiten-Rendering
+
Webinhalte werden in Firefox 3.5 dank Technologien wie z.B. »speculative parsing« deutlich schneller gezeichnet. Man muss nicht wissen, was das heißen soll. Es ist einfach viel schneller.
+
+ +

Siehe auch

+ + + +

{{ languages( {"en":"en/Firefox_3.5_for_developers", "es":"es/Firefox_3.5_para_desarrolladores", "ja":"Ja/Firefox_3.5_for_developers", "fr": "fr/Firefox_3.5_pour_les_développeurs", "pl": "pl/Firefox_3.5_dla_programistów", "pt": "pt/Firefox_3.5_para_desenvolvedores", "ru": "ru/Firefox_3.5_для_разработчика", "zh-tw": "Zh_tw/Firefox_3.1_技術文件"} ) }}

+
+
diff --git a/files/de/mozilla/firefox/releases/3/index.html b/files/de/mozilla/firefox/releases/3/index.html new file mode 100644 index 0000000000..3db4c6f4e3 --- /dev/null +++ b/files/de/mozilla/firefox/releases/3/index.html @@ -0,0 +1,173 @@ +--- +title: Firefox 3 für Entwickler +slug: Firefox_3_für_Entwickler +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3 +--- +
{{FirefoxSidebar}}

Wenn Sie als Entwickler versuchen mit den neuen Funktionen in Firefox 3 umzugehen, ist dies der perfekte Ort, um zu beginnen. Dieser Seite liefert eine Liste der neuen Artikel, die die in Firefox 3 neu hinzugekommenen Funktionen erläutern. Es wird sicher nicht jede kleine Änderung erfasst werden können, allerdings hilft werden die hauptsächlichen Verbesserungen in Firefox 3 vorgestellt.

+ +

Neue Bestandteile in Firefox 3 für Entwickler

+ +

Für Webseiten und Anwendungsentwickler

+ +
+
Aktualisierung von Webanwendungen für Firefox 3
+
Dieser Artikel beinhaltet Informationen über Veränderungen, die Sie kennen sollten, wenn Sie die neuen Funktionen in Firefox 3 für Ihre Webseite und Webanwendung ausnutzen wollen.
+
Online- und Offline-Events
+
Firefox 3 unterstützt WHATWG Online- und Offline-Events, die Anwendungen und Erweiterungen erkennen lassen, ob eine aktive Internetverbindung besteht oder nicht und genauso erkennen lassen, wenn die Verbindung hoch oder runter geht.
+
Web-basierende Protokollroutinen
+
Sie können nun Webanwendungen als Protokollroutinen mit der navigator.registerProtocolHandler() Methode verwenden.
+
Zeichnen von Text mit Canvas
+
Es ist nun möglich, Text in einem Canvas mit einer nicht-standardisierten API zu schreiben.
+
Transform-Unterstützung für Canvas
+
Firefox unterstützt die transform() und setTransform()-Methoden für Canvas.
+
Benutzung von Mikroformaten
+
Firefox besitzt nun eine API für das Arbeiten mit Mikroformaten.
+
Drag und Drop-Ereignisse
+
Firefox 3 unterstützt neue Ereignisse, die zu dem Ursprungsknoten einer Drag-Operation gesendet werden, sobald die Drag-Operation beginnt und aufhört.
+
Fokus-Management in HTML
+
Das neue HTML 5 activeElement und hasFocus-Attribut wird unterstützt.
+
Offline-Ressourcen
+
Firefox ermöglicht Anwendungen nun das Zwischenspeichern von Ressourcen, damit die Anwendung offline verwendet werden kann.
+
CSS-Verbesserungen in Firefox 3
+
Firefox 3 beinhaltet eine nicht geringe Zahl an Verbesserungen, was die CSS-Unterstützung angeht.
+
DOM-Verbesserungen in Firefox 3
+
Firefox 3 bietet eine nicht geringe Anzahl an neuen Bestandteilen in der DOM-Implementierung an, darunter Unterstützung für mehrere Erweiterungen für den für Internet Explorer für das DOM.
+
JavaScript 1.8 Unterstützung
+
Firefox 3 stellt Unterstützung für JavaScript zur Verfügung.
+
EXSLT Unterstützung
+
Firefox 3 beinhaltet Unterstützung für einen wesentlichen Teil der EXSLT-Erweiterungen zu XSLT.
+
SVG-Verbesserungen in Firefox 3
+
Die SVG-Unterstützung wurde signifikant verbessert, darunter Unterstützung für über zwei Dutzend neue Filter, mehrere neue Elemente und Attribute und andere Verbesserungen.
+
Animierte PNG-Grafiken
+
Firefox 3 bietet Unterstützung für das Format für animiertes PNG (APNG) an.
+
+ +

Für XUL- und Erweiterungsentwickler.

+ +
Wesentliche Änderungen und Verbesserungen
+ +
+
Erweiterungen für Firefox 3 aktualisieren
+
Bietet einen Leitfaden für das, was Sie tun müssen, um Ihre Erweiterung für die Arbeit mit Firefox 3 fähig zu machen.
+
XUL-Verbesserungen
+
Firefox 3 bietet eine Vielzahl von neuen XUL Elementen, darunter neue Schieberegler, Datum- und Zeitwähler und Dreh-Buttons
+
Templates in Firefox 3
+
Templates wurden mit Firefox 3 stark verbessert. Die Schlüsselverbesserung ist die Verwendung von benutzerdefinierten Query-Processors als Datenquelle neben RDF.
+
Sichheitsupdates
+
Um sichere Add-ons bereitzustellen, wird nun eine Sicherheitsmethode gebraucht, bevor diese installiert werden können. Add-ons, die auf AMO bereitgestellt werden, verfügen automatisch darüber. Jedes installierte Add-on, das nicht darüber verfügt, wird bei der Aktualisierung auf Firefox 3 automatisch deaktiviert. Firefox wird jedoch weiterhin auf Updates der Erweiterung über den unsicheren Pfad überprüfen und versuchen die neue Version zu installieren (Die Installation schlägt fehl, wenn auch in der neuen Version keine sichere Aktualisierungsmethode angeboten wird).
+
Places Entwicklerbuch
+
Ein Artikel über die Aktualisierung einer Anwendung zur Verwendung der Places API.
+
Download-Manager Verbesserungen in Firefox 3
+
Der Firefox 3 Download-Manager verfügt nun über eine neue und verbesserte API mit Unterstützung von mehreren Fortschritts-Listener.
+
Verwendung von nsILoginManager
+
Der Password-Manager wurde vom neuen Login-Manager ersetzt.
+
XBL bindings
+
Es können jetzt data: URL Schemata verwendet werden, um XBL bindings direkt einzubinden.
+
Lokalisierung von Erweiterungsbeschreibungen
+
Firefox 3 bietet eine neue Methode zur Lokalisierung von Add-on Metadaten. Damit werden lokalisierte Details verfügbar, sobald das Add-on heruntergeladen wird und wenn es deaktiviert wird
+
Lokalisierung und Mehrzahlen
+
Firefox 3 fügt ein neues PluralForm Modul hinzu, welches das richtige Werkzeug für korrekte Mehrzahlen in Lokalisierungen bereitstellt.
+
Theme Änderungen in Firefox 3
+
Hinweise und Informationen zur Verwendung und Erstellung von Themes für Firefox 3.
+
+ +
Neue Komponenten und Funktionalitäten
+ +
+
FUEL Library
+
FUEL wird es Erweiterungsentwicklern leichter machen produktiv zu arbeiten, indem die XPCOM Formalitäten verkleinert werden und einige "moderne" JavaScript Ideen hinzugefügt werden.
+
Places
+
Die Verlaufs- und Lesezeichen-Schnitstelle wurde komplett durch die Places API ersetzt.
+
Idle Service
+
Firefox 3 bietet das neue {{ Interface("nsIIdleService") }} Interface, welches Erweiterungen bestimmen lässt wie lange es her ist, dass ein Benutzer zu letzt eine Taste gedrükt oder die Maus bewegt hat.
+
ZIP Writer
+
Das neue {{ Interface("nsIZipWriter") }} Interface ermöglicht die Erstellung von ZIP Archiven.
+
Vollbild-Zoom
+
Firefox 3 bietet einen Vollbild-Zoom neben dem Text-only Zoom an.
+
Interfacing mit dem XPCOM Cycle-Collector
+
XPCOM Code kann nun Vorteile des Cycle-Collectors nutzen, welcher dabei hilft, das nicht verwendeter Speicher freigegeben wird.
+
Der Thread-Manager
+
Firefox 3 stellt das neue {{ Interface("nsIThreadManager") }} Interface bereit, mit neuen Schnittstellen für Threads und Thread-Ereignisse, welche zur Erstellung und Verwaltung von Threads im Code dienen.
+
JavaScript Module
+
Firefox 3 bietet nun die Möglichkeit zur Erstellung von Modulen in JavaScript, die von Erweiterungen und Anwendungen zur Verwendung geladen werden können, ähnliche wie gemeinsam genutzte Bibliotheken.
+
Das nsIJSON Interface
+
Firefox 3 stellt das neue {{ Interface("nsIJSON") }} Interface bereit, welches high-performance Encoding und Decoding von JSON Strings ermöglicht.
+
Das nsIParentalControlsService Interface
+
Firefox 3 unterstützt nun die Microsoft Windows Vista "Parental Control" Funktion, und ermöglicht dem Code damit zu interagieren.
+
Verwendung von Inhaltseinstellungen
+
Firefox 3 enthält einen neuen Dienst zum Setzen und Abrufen von willkürlichen Seiten-spezifischen Einstellungen, die Erweiterungen genau wie Kerncode verwenden können, um auf die Benutzereinstellungen für individuelle Seiten Rücksicht zu nehmen.
+
Plug-ins überwachen
+
Eine neue Komponente des Plugin-System ist nun verfügbar, um festzustellen wie lange Plug-ins (z.B. Macromedia Flash) brauchen, um ihre Anfragen auszuführen.
+
+ +
Behobene Fehler
+ +
+
Behobene Fehler in Firefox 3
+
Dieser Artikel bietet Informationen über Bugs, die in Firefox 3 behoben wurden und nennenswert sind.
+
+ +

Neue Bestandteile für den Endbenutzer

+ +

User Experience.

+ + + +

Sicherheit und Privatsphäre

+ + + +

Performance

+ + + +

Siehe auch

+ + + +

{{ languages( { "en": "en/Firefox_3_for_developers", "es": "es/Firefox_3_para_desarrolladores", "fr": "fr/Firefox_3_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_3_for_developers", "ko": "ko/Firefox_3_for_developers", "pl": "pl/Firefox_3_dla_programist\u00f3w", "pt": "pt/Firefox_3_para_desenvolvedores" } ) }}

diff --git a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html new file mode 100644 index 0000000000..409fc00546 --- /dev/null +++ b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html @@ -0,0 +1,232 @@ +--- +title: Erweiterungen für Firefox 3 aktualisieren +slug: Erweiterungen_für_Firefox_3_aktualisieren +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +--- +
+ +

Dieser Artikel liefert nützliche Informationen für Entwickler, die ihre Erweiterungen aktualisieren möchten, um eine einwandfreie Funktion unter Firefox 3 zu gewährleisten.

+ +

Vorweg eine hilfreiche Anmerkung: Wenn die einzig notwendige Änderung an der Erweiterung der Eintrag maxVersion im Installationsmanifest ist und die Erweiterung auf addons.mozilla.org bereitgestellt wird, ist es nicht nötig eine neue Version der Erweiterung zu veröffentlichen. Im »Developer Control Panel« auf AMO kann die maxVersion, ohne einen neuen Upload, eingestellt werden. Dadurch kann auch vermieden werden, dass die Erweiterung nochmal überprüft werden muss.

+ +

Schritt 1: Installationsmanifest aktualisieren

+ +

Der erste Schritt - und für die meisten Erweiterungen der einzig Nötige - ist eine Aktualisierung der Installationsmanifestdatei, install.rdf, um die Erweiterung als Firefox 3 kompatibel zu kennzeichnen.

+ +

Als erstes muss die Zeile zur Kennzeichnung der maximal kompatiblen Firefox-Version gefunden werden (welche für Firefox 2 so aussehen sollte):

+ +
 <em:maxVersion>2.0.0.*</em:maxVersion>
+
+ +

Um als Firefox 3 kompatibel zu gelten, reicht die folgende Änderung:

+ +
 <em:maxVersion>3.0.*</em:maxVersion>
+
+ +

Danach muss die Erweiterung neu installiert werden.

+ +

Dabei sollte darauf geachtet werden, dass Firefox 3 keine extra ".0" in der Versionsnummer hat, anstatt "3.0.0.*, sollte nur "3.0.*" verwendet werden.

+ +

Es gab (und es wird weiterhin welche geben) eine Reihe von API Veränderungen, die dazu führen, dass einige Erweiterungen nicht weiter funktionieren. Es wird an einer kompletten Liste gearbeitet, die diese Veränderungen aufzählt.

+ +
Hinweis: Wenn die Erweiterung noch immer ein Install.js Skript, anstatt eines Installationsmanifests benutzt, sollte ein Wechsel jetzt getätigt werden. Firefox 3 unterstützt keine install.js Skripte in XPI Dateien mehr.
+ +

Das Installationsmanifest lokalisieren

+ +

Firefox 3 führt neue Eigenschaften ein, um lokalisierte Beschreibungen zu ermöglichen. Die alte Methode funktioniert nach wie vor, auch wenn die neue Firefox-Version erlaubt, sogar dann die lokalisierten Sprachdaten zu nutzen, wenn die Erweiterung deaktiviert oder noch zur Installation vorgesehen ist.

+ +

Schritt 2: Sichere Updates zur Verfügung stellen

+ +

Falls die Erweiterungen selbst bereitgestellt wird und nicht bei addons.mozilla.org angeboten wird, müssen sichere Updates selbst verwaltet werden. Dazu können die Updates entweder über eine SSL Webseite angeboten werden oder die Updates werden mit einem Kryptographieschlüssel signiert. Weitere Informationen dazu unter: Sichere Updates.

+ +

Schritt 3: Mit geänderten APIs umgehen

+ +

Mehrere APIs haben sich erheblich geändert. Die wichtigsten davon, die sich auf viele Erweiterungen auswirken, sind:

+ +

DOM

+ + +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they + can be inserted into the current document. For more on the Node.ownerDocument issues, see the + W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many + sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for + improved future compatibility.

+ +

Lesezeichen & Chronik

+ +

Falls die Erweiterung in irgendeiner Art auf Lesezeichen oder die Chronik zugreift, sind umfangreichere Änderungen nötig, um die Kompatibilität mit Firefox 3 zu gewährleisten. Die alte API zum Zugriff auf diese Informationen wurde durch die neue Places Architektur ersetzt. Im Leitfaden zur Places Migration finden sich dazu weitere Details, auch wie die bestehende Erweiterung auf die »Places« API aktualisiert werden kann.

+ +

Download-Manager

+ +

Die Download-Manager API hat sich durch den Wechsel vom RDF Datenspeicher zur Storage API ein wenig geändert. Der Wechsel sollte relativ einfach durchzuführen sein. Außerdem hat sich die API zum Überwachen des Downloadfortschritts geändert, um mehrere Download-Manager Listeners zu unterstützen. Unter nsIDownloadManager, nsIDownloadProgressListener und Downloads überwachen sind weitere Informationen verfügbar.

+ +

Passwort-Manager

+ +

Wenn die Erweiterung den Passwort-Manager benutzt, um auf Anmeldeinformationen zuzugreifen muss die Erweiterung auf die neue Login Manager API umgestellt werden.

+ + + +

Es kann aber auch der integrierte Speicher des Passwort-Managers überschrieben werden, falls eine eigene Implementierung in der Erweiterung angeboten werden soll. Weitere Details unter Ein Login-Manager Speichermodul erstellen.

+ +

Popups (Menü, Kontextmenü, Tooltips und Eingabefelder)

+ +

Das XUL Popup-System wurde im Firefox 3 stark verändert. Das Popup-System umfasst Hauptmenüs, Kontextmenüs und Popup Eingabefelder. Der Artikel zu Popups beschreibt detailliert wie das System funktioniert. Zu beachten ist außerdem, dass popup.showPopup zugunsten von popup.openPopup und popup.openPopupAtScreen als veraltet gekennzeichnet wurde.

+ +

Autovervollständigung

+ +

Die handleEnter() Methode im nsIAutoCompleteController Interface wurde um ein Argument erweitert. Dieses kennzeichnet, ob der abgesendete Text im Autovervollständigungspopup ausgewählt wurde oder, ob der Benutzer nach seiner Eingabe »Enter« gedrückt hat.

+ +

DOMParser

+ + + +

Keine weitere Verwendung der internen String API

+ +

Die interne String API wird nicht weiter ausgeführt, stattdessen muss die externe String API benutzt werden. Einige nützliche Informationen dazu:

+ + + +

Entfernte Interfaces

+ +

Folgende Interfaces wurden aus, der im Firefox 3 enthaltenen, Gecko-Engine 1.9 entfernt. Wenn die Erweiterung eines davon nutzt, muss der Code aktualisiert werden:

+ + + +

Schritt 4: Auf Chrome Änderungen überprüfen

+ +

Es gab einige Veränderungen im Chrome-Layout, die eventuell auch Erweiterungen betreffen.

+ +

Neue Boxen

+ +

Es wurden kleinere Änderungen an der Oberfläche vorgenommen, die Änderungen an der Erweiterung nötig machen könnten. Eine neue vbox mit dem Namen »browser-bottombox« wurde hinzugefügt, welche die »Find Bar« und die »Status Bar« am unteren Rand des Browsers umschließt. Auch wenn dies nicht die Anzeige selbst beeinflusst, kann dies deine Erweiterung betreffen falls diese »Overlays« verwendet, die Elemente ändern, die relativ zu besagten Elementen positioniert sind.

+ +

Zum Beispiel, wenn vorher etwas überlagert wurde, wie im folgendem Codeschnipsel:

+ +
<window id="main-window">
+  <something insertbefore="status-bar" />
+</window>
+
+ +

Sollte es nun so überlagert werden:

+ +
<vbox id="browser-bottombox">
+  <something insertbefore="status-bar" />
+</vbox>
+
+ +

Oder, um Firefox 2 und Firefox 3 gleichermaßen zu behandeln, kann der folgende Code zum Einsatz kommen:

+ +
<window id="main-window">
+  <vbox id="browser-bottombox" insertbefore="status-bar">
+    <something insertbefore="status-bar" />
+  </vbox>
+</window>
+
+ +

Veränderte Boxen

+ +

Erweiterungen, die auf die »appcontent« Box überlagern wollten, versuchten dies über das Floaten von Chrome-Inhalten über Dokumenteninhalten. Jetzt wird dann nicht mehr angezeigt. Die Erweiterung sollte auf das neue XUL panel Element aktualisiert werden. Falls es erwünscht ist, dass das Panel nach einer Verzögerung weiter angezeigt wird, sollte noautohide auf true gesetzt werden.

+ +

Weitere Änderungen

+ +

Einfache Änderungen, die Sie bei der Aktualisierung Ihrer Erweiterung auf Firefox 3 machen mussten, können Sie hier gerne eintragen!

+ + diff --git a/files/de/mozilla/firefox/releases/3/updating_web_applications/index.html b/files/de/mozilla/firefox/releases/3/updating_web_applications/index.html new file mode 100644 index 0000000000..c727ef5df2 --- /dev/null +++ b/files/de/mozilla/firefox/releases/3/updating_web_applications/index.html @@ -0,0 +1,97 @@ +--- +title: Webanwendungen für Firefox 3 aktualisieren +slug: Updating_web_applications_for_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +--- +
{{FirefoxSidebar}}
+ +

{{ Fx_minversion_header(3) }} In der kommenden Version von Firefox (Firefox 3) gibt es eine nicht geringe Anzahl an Veränderungen, die möglicherweise Ihre Webseite oder Webanwendungen betreffen könnten. Möglicherweise wollen Sie auch von den neuen Funktionen Gebrauch machen. Dieser Artikel kann dazu als Einstiegspunkt dienen.

+ +

DOM Änderungen

+ + +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they + can be inserted into the current document. For more on the Node.ownerDocument issues, see the + W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many + sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for + improved future compatibility.

+ +

HTML Änderungen

+ +

Veränderung an der Zeichensatz-Vererbung.

+ +

Firefox 3 schließt eine Sicherheitsschwachstelle in Frames und iFrames, die einem erlaubten, den Zeichensatz des Elternelementes zu vererben. In bestimmten Fällen war dies eine Problemursache. Nun ist die Zeichensatzvererbung in Frames und iFrames lediglich erlaubt, wenn jenes Element und das Elternelement von dem selben Server stammen. Wenn Sie in ihrer Seite Frames haben, die den selben Zeichensatz von einem fremden Server vererben sollen, sollten Sie den HTML-Code der Frames an die Neuerung anpassen und ihren Zeichensatz explizit angeben.

+ +

Veränderungen am <script>-Element

+ +

Das <script>-Element in text/html-Dokumenten benötigt nun ein schließendes </script>-Tag in HTML 4 Dokumenten, auch wenn zwischen ihnen nichts steht.

+ +

Früher war es möglich, folgendes zu schreiben:

+ +
<script ... />
+
+ +

Nun wird Konformität zur HTML Spezifikation sichergestellt und es wird folgendes notiert:

+ +
<script ...></script>
+
+ +

Damit wird die Stabilität, Kompatibilität und Sicherheit verbessert.

+ +

CSS Änderungen

+ +

Veränderungen bei font-size basierend auf em und ex Einheiten

+ +

font-size Werte in em und ex Einheiten waren auf die kleinste Schriftgröße des Benutzers bezogen: Wenn die kleinste Schriftgröße größer dargestellt wurde, basierten die em und ex Einheiten für font-size auf die vergrößerte Schriftgröße. Das war widersprüchlich zum Verhalten mit prozentualen Angaben für die Schriftgröße.

+ +

font-size Werte in em und ex Einheiten sind nun auf einer »intended font size« basiert, die nicht auf die kleinste Schriftgröße des Benutzers basiert. Mit anderen Worten, werden Schriftgrößen immer mit der Absicht des Designers berechnet und hinterher an die kleinste Schriftgröße angepasst.

+ +

Siehe {{ Bug(434718) }}, und speziell im Anhang von Bug 322943 für eine Demonstration (muss mit einer minimalen Schriftgröße von >= 6 angesehen werden, um einen Unterschied erkennen zu können).

+ +

Sicherheitsänderungen

+ +

Chrome Zugang

+ +

In vorherigen Versionen von Firefox konnte jede Webseite Scripts über das chrome:// Protokoll laden. Neben anderen Dingen, waren Webseiten in der Lage herauszufinden, welche Add-ons installiert sind und konnten diese Informationen dann benutzen, um gezielt Sicherheitsmechanismen des Browser zu umgehen.

+ +

Firefox 3 erlaubt nur noch Zugang zu chrome://browser/ und chrome://toolkit/ Pfaden. Diese Dateien sind dafür bestimmt von Webseiten zugänglich zu sein. Alle weiteren Chrome Inhalten werden nun für den Zugriff von außerhalb blockiert.

+ +

Es gibt jedoch einen Weg für Erweiterungen ihre Inhalte zugänglich für das Web zu machen. Sie können ein Kennzeichen in der chrome.manifest Datei angeben, das wie folgt lautet:

+ +
content mypackage location/ contentaccessible=yes
+
+ +

Das Setzen dieses Kennzeichens sollte die Ausnahme bleiben, steht aber für die seltenen Fälle zur Verfügung. Beachten Sie, dass Firefox den Benutzer gegebenenfalls benachrichtigt, wenn Ihre Erweiterung contentaccessible benutzt und es als potentielles Sicherheitsrisiko angesehen wird.

+ +
Hinweis: Weil Firefox 2 die contentaccessible Flag nicht versteht (es wird die komplette Zeile ignoriert), sollten zur Kompatibilität zu Firefox 2 und Firefox 3 die folgenden zwei Zeilen notiert werden. + +
content mypackage location/
+content mypackage location/ contentaccessible=yes
+
+
+ +

Datei-upload Felder

+ +

In vorherigen Firefox Versionen gab es Fälle in denen der Benutzer ein Formular ausgefüllt hat, um eine Datei hochzuladen, wobei der gesamte Dateipfad der Datei für die Webanwendung verfügbar war. Dieser Eingriff in die Privatsphäre wurde in Firefox 3 behoben und jetzt ist nur noch der Dateiname selbst verfügbar.

+ +

Änderungen an der »Same-origin policy« für file: URIs

+ +

Die »same-origin policy« für Dateien file: URIs wurde in Firefox 3 verändert. Das konnte Ihre Inhalte betreffen. Siehe dazu: Same-origin policy für file: URIs für weitere Details.

+ +

JavaScript Änderungen

+ +

Firefox 3 unterstützt JavaScript 1.8. Eine wichtige Änderung die eventuell Änderungen nötig machen könnte, ist das das veraltete und nicht-standardisierte Script Objekt nicht länger unterstützt wird. Das ist nicht das <script> Tag, aber ein JavaScript Objekt, das niemals standardisiert wurde. Wahrscheinlich haben Sie es niemals verwendet.

+ +

Siehe auch

+ + + +

{{ languages( {"en": "en/Updating_web_applications_for_Firefox_3", "es": "es/Actualizar_aplicaciones_web_para_Firefox_3", "fr": "fr/Mise_\u00e0_jour_des_applications_Web_pour_Firefox_3", "ja": "ja/Updating_web_applications_for_Firefox_3", "pl": "pl/Aktualizacja_aplikacji_internetowych_dla_Firefoksa_3" } ) }}

-- cgit v1.2.3-54-g00ecf