We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Diese Übersetzung ist in Arbeit.

Eine Extension (Erweiterung) beinhaltet eine Sammlung von Dateien, verpackt für die Verbreitung and Installation. In diesem Artikel, gehen wir kurz auf Dateien ein, die vorhanden sein könnten.

manifest.json

manifest.json ist die einzige Datei, die in jeder Extension vorhanden sein muss. Sie enthält die grundlegenden Metadaten wie Name, Version und benötigte Genehmigungen. Außerdem verweist sie auf andere Dateien der Extension.

Dieses Manifest kann auch Zeiger zu mehreren anderen Dateitypen haben:

  • Hintergrundseiten: führen Langzeitprozesse aus
  • Icons für die Extension und jegliche Buttons können festgelegt werden.
  • Sidebars, Pop-ups und Options-Pages: HTML-Dokumente, die Inhalte für unterschiedliche Komponenten der Benutzeroberfläche bereitstellen.
  • Content scripts: JavaScript in Ihrer Erweiterung, das in Webseiten eingefügt wird.

Für weitere Einzelheiten gehe auf manifest.json.

Neben den vom Manifest referenzierten Seiten, kann eine Extension zusätzlche Extension pages mit unterstützenden Dateien enthalten.

Hintergrundskripte

Extensions müssen oft langzeitig ihren Zustand aufrechterhalten oder Operationen, unabhängig der Lebensdauer von irgendwelchen speziellen Webseiten oder Browserfenstern, durchführen. Dafür gibt es Hintergrundskripte (background scripts).

Hintergrundskripte werden geladen, sobald die Extension geladen ist und laufen bis die Extension deaktiviert oder deinstalliert wird. Du kannst alles aus den WebExtension APIs im Skript benutzen, solange du die notwendigen Berechtigungen abgefragt hast.

Hintergrundskripte festlegen

Du kannst ein Hintergrundskript einbinden in dem du den background-Key in "manifest.json" benutzt:

// manifest.json

"background": {
  "scripts": ["background-script.js"]
}

Du kannst mehrere background scripts angeben: wenn du sie im selben Kontext laufen lässt, so wie mehrere Skripts, die in eine einzelne Seite geladen werden.

Hintergrundskript-Umgebung

DOM APIs

Hintergrundskripte laufen im Rahmen spezieller Seiten genannt 'background pages' (Hintergrundseiten). Diese geben ihnen ein globales window, samt der vollständigen Standard DOM APIs, die von diesem Objekt bereitgestellt werden.

Du musst deine Hintergrundseite nicht bereitstellen. Wenn du dein Hintergrundskript hinzufügst, wird eine leere Hintergrundseite für dich erstellt.

Dennoch kannst du deine Hintergrundseite auch als separate HTML-Datei erstellen:

// manifest.json

"background": {
  "page": "background-page.html"
}

WebExtension APIs

Hintergrundskripte können alles aus den WebExtension APIs im Skript nutzen, solange deren Extension die notwendigen Berechtigungen hat.

Cross-origin access

Hintergrundskripte können XHR-Anfragen an alle Hosts machen, für die sie host permissions haben.

Web content

Hintergrundskripte haben keinen direkten Zugriff auf Webseiten. Sie können jedoch content scripts in Webseiten laden und mit ihnen über message-passing API kommunizieren.

Content security policy

Hintergrundskripte sind beschränkt in einigen potenziell gefährlichen Operationen, wie dem Benutzen von eval(), durch ein Sicherheitskonzept. Für mehr Informationen siehe Content Security Policy.

Deine Extension kann unterschiedliche Benutzeroberflächenkomponenten enthalten, deren Inhalt wird durch ein HTML-Dokument festgelegt:

  • eine Sidebar ist ein Element, das auf der linken Seite des Browserfensters neben der Webseite angezeigt wird
  • ein Pop-up ist ein Dialogfenster, dass du anzeigen kannst, wenn der Benutzer auf einen Button der Werkzeugleiste oder der Adressleiste klickt
  • eine Options-Page ist eine Seite, die gezeigt wird, wenn der Benutzer deine Add-on-Einstellungen im browser-eigenen Add-ons-Manager abruft.

Für jeden dieser Komponenten, erstellst du eine HTML-Datei und verweist auf sie über ein spezielles Attribut in manifest.json. Die HTML-Datei kann, wie eine normale Webseite, CSS- und JavaScript-Dateien einbinden.

All of these are a type of Extension pages, and unlike a normal web page, your JavaScript can use all the same privileged WebExtension APIs as your background script. They can even directly access variables in the background page using runtime.getBackgroundPage().

Extension pages

You can also include HTML documents in your extension which are not attached to some predefined user interface component. Unlike the documents you might provide for sidebars, popups, or options pages, these don't have an entry in manifest.json. However, they do also get access to all the same privileged WebExtension APIs as your background script.

You'd typically load a page like this using windows.create() or tabs.create().

See Extension pages to learn more.

Content scripts

Use content scripts to access and manipulate web pages. Content scripts are loaded into web pages and run in the context of that particular page.

Content scripts are extension-provided scripts which run in the context of a web page; this differs from scripts which are loaded by the page itself, including those which are provided in <script> elements within the page.

Content scripts can see and manipulate the page's DOM, just like normal scripts loaded by the page.

Unlike normal page scripts, they can:

  • Make cross-domain XHR requests.
  • Use a small subset of the WebExtension APIs.
  • Exchange messages with their background scripts and can in this way indirectly access all the WebExtension APIs.

Content scripts cannot directly access normal page scripts but can exchange messages with them using the standard window.postMessage() API.

Usually, when we talk about content scripts, we are referring to JavaScript, but you can inject CSS into web pages using the same mechanism.

See the content scripts article to learn more.

Web accessible resources

Web accessible resources are resources such as images, HTML, CSS, and JavaScript that you include in the extension and want to make accessible to content scripts and page scripts. Resources which are made web-accessible can be referenced by page scripts and content scripts using a special URI scheme.

For example, if a content script wants to insert some images into web pages, you could include them in the extension and make them web accessible. Then the content script could create and append img tags which reference the images via the src attribute.

To learn more, see the documentation for the web_accessible_resources manifest.json key.

 

 

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Asozialist
Zuletzt aktualisiert von: Asozialist,