initial commit

1 files changed, 133 insertions, 0 deletions

diff --git a/files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html b/files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html
new file mode 100644
index 0000000000..04bd9d08b5
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html
@@ -0,0 +1,133 @@
+---
+title: Aufbau einer WebExtension
+slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Eine Extension (Erweiterung) beinhaltet eine Sammlung von Dateien, gepackt für die Verbreitung and Installation. In diesem Artikel, gehen wir kurz auf Dateien ein, die vorhanden sein könnten.</p>
+
+<h2 id="manifest.json">manifest.json</h2>
+
+<p>"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.</p>
+
+<p>Dieses Manifest kann auch Zeiger zu mehreren anderen Dateitypen haben:</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">Hintergrundseiten</a>: führen Langzeitprozesse aus</li>
+ <li>Icons für die Extension und jegliche Buttons können festgelegt werden.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages">Sidebars, Pop-ups und Options-Pages</a>: HTML-Dokumente, die Inhalte für unterschiedliche Komponenten der Benutzeroberfläche bereitstellen.</li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">Content-Scripts</a>: JavaScript in Ihrer Erweiterung, das in Webseiten eingefügt wird.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13669/webextension-anatomy.png" style="display: block; height: 581px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<p>Für weitere Einzelheiten gehe auf <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>.</p>
+
+<p>Neben den vom Manifest referenzierten Seiten, kann eine Extension zusätzlche <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Extension_pages">Extension pages</a> mit unterstützenden Dateien enthalten.</p>
+
+<h2 id="Hintergrundskripte">Hintergrundskripte</h2>
+
+<p>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).</p>
+
+<p>Hintergrundskripte werden geladen, sobald die Extension geladen ist und laufen bis die Extension deaktiviert oder deinstalliert wird. Du kannst alles aus den <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> im Skript benutzen, solange du die notwendigen <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">Berechtigungen</a> abgefragt hast.</p>
+
+<h3 id="Hintergrundskripte_festlegen">Hintergrundskripte festlegen</h3>
+
+<p>Du kannst ein Hintergrundskript einbinden in dem du den <code>background</code>-Key in "manifest.json" benutzt:</p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}</pre>
+
+<p>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.</p>
+
+<h3 id="Hintergrundskript-Umgebung">Hintergrundskript-Umgebung</h3>
+
+<h4 id="DOM_APIs">DOM APIs</h4>
+
+<p>Hintergrundskripte laufen im Rahmen spezieller Seiten genannt 'background pages' (Hintergrundseiten). Diese geben ihnen ein globales <code><a href="/en-US/docs/Web/API/Window">window</a></code>, samt der vollständigen Standard DOM APIs, die von diesem Objekt bereitgestellt werden.</p>
+
+<p>Du musst deine Hintergrundseite nicht bereitstellen. Wenn du dein Hintergrundskript hinzufügst, wird eine leere Hintergrundseite für dich erstellt.</p>
+
+<p>Dennoch kannst du deine Hintergrundseite auch als separate HTML-Datei erstellen:</p>
+
+<pre class="brush: json">// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}</pre>
+
+<h4 id="WebExtension_APIs">WebExtension APIs</h4>
+
+<p>Hintergrundskripte können alles aus den <a href="/en-US/Add-ons/WebExtensions/API">WebExtension APIs</a> im Skript nutzen, solange deren Extension die notwendigen <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">Berechtigungen</a> hat.</p>
+
+<h4 id="Cross-origin_access">Cross-origin access</h4>
+
+<p>Hintergrundskripte können XHR-Anfragen an alle Hosts machen, für die sie <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">host permissions</a> haben.</p>
+
+<h4 id="Web_content">Web content</h4>
+
+<p>Hintergrundskripte haben keinen direkten Zugriff auf Webseiten. Sie können jedoch <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Content-Scripts</a> in Webseiten laden und <a href="/en-US/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts">mit ihnen über message-passing API kommunizieren</a>.</p>
+
+<h4 id="Content_security_policy">Content security policy</h4>
+
+<p>Hintergrundskripte sind beschränkt in einigen potenziell gefährlichen Operationen, wie dem Benutzen von <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code>, durch ein Sicherheitskonzept. Für mehr Informationen siehe <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a>.</p>
+
+<h2 id="Sidebars_Pop-ups_Options-Pages">Sidebars, Pop-ups, Options-Pages</h2>
+
+<p>Deine Extension kann unterschiedliche Benutzeroberflächenkomponenten enthalten, deren Inhalt wird durch ein HTML-Dokument festgelegt:</p>
+
+<ul>
+ <li>eine <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">Sidebar</a> ist ein Element, das auf der linken Seite des Browserfensters neben der Webseite angezeigt wird</li>
+ <li>ein <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">Pop-up</a> ist ein Dialogfenster, dass du anzeigen kannst, wenn der Benutzer auf einen <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_action">Button der Werkzeugleiste</a> oder der <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions">Adressleiste </a>klickt</li>
+ <li>eine <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">Options-Page</a> ist eine Seite, die gezeigt wird, wenn der Benutzer deine Add-on-Einstellungen im browser-eigenen Add-ons-Manager abruft.</li>
+</ul>
+
+<p>Für jeden dieser Komponenten, erstellst du eine HTML-Datei und verweist auf sie über ein spezielles Attribut in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>. Die HTML-Datei kann, wie eine normale Webseite, CSS- und JavaScript-Dateien einbinden.</p>
+
+<p>Sie alle sind Arten von <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a>, und nicht wie eine normale Webseite, dein JavaScript kann dieselben WebExtension APIs wie dein Hintergrundskript benutzen. Sie können sogar direkt Variabeln aus der Hintergrundseite, mit {{WebExtAPIRef("runtime.getBackgroundPage()")}}, abrufen.</p>
+
+<h2 id="Extension_pages">Extension pages</h2>
+
+<p>Du kannst außerdem HTML-Dokumente in deine Extension mit einbeziehen, die nicht vordefinierten Benutzeroberflächenkomponenten beigefügt wurden. Anders als die Dokumente, die du für Sidebars, Pop-ups, oder Option-Pages bereitstellen könntest, haben diese keinen Zugang zu "manifest.json". Dennoch haben sie Zugriff auf dieselben WebExtension APIs wie dein Hintergrundskript.</p>
+
+<p>Du lädst eine solche Seite normalerweise mit {{WebExtAPIRef("windows.create()")}} oder {{WebExtAPIRef("tabs.create()")}}.</p>
+
+<p>Siehe <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages">Extension pages</a> um mehr zu lernen.</p>
+
+<h2 id="Content_scripts">Content scripts</h2>
+
+<p>Benutze Content-Scripts um Webseiten abzurufen und zu manipulieren. Content-Scripts werden in Webseiten geladen und laufen im Rahmen der jeweiligen Seite.</p>
+
+<p>Content-Scripts sind von der Erweiterung bereitgestellte Skripts, die im Kontext einer Webseite laufen; das unterscheidet sie von Skripts, die von der Seite selber geladen werden, einschließlich derer, die in {{HTMLElement("script")}}-Elementen innerhalb der Seite bereitgestellt werden.</p>
+
+<p>Content-Scripts können das Seiten-DOM sehen und manipulieren, so wie normale, von der Seite geladene Skripte.</p>
+
+<p>Im Gegensatz zu normalen Skripten können sie:</p>
+
+<ul>
+ <li>domainübergreifende XHR-Anfragen machen.</li>
+ <li>eine kleine Teilmenge der <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">WebExtension APIs</a> benutzen.</li>
+ <li>Nachrichten mit ihren Hintergrundskripten austauschen und auf diesem Web indirekt die gesamten WebExtension APIs abrufen.</li>
+</ul>
+
+<p>Content-Scripts können nicht direkt normale Skripte der Seite abrufen, aber mit ihnen Nachrichten austauschen über die übliche <code><a href="/en-US/docs/Web/API/Window/postMessage">window.postMessage()</a></code> API.</p>
+
+<p>Wenn wir gewöhnlich über Content-Scripts sprechen, dann im Bezug auf JavaScript. Du kannst jedoch auch CSS zu einer Webseite über das selbe System hinzufügen.</p>
+
+<p>Sieh dir <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> an um mehr zu erfahren.</p>
+
+<h2 id="Web_accessible_resources">Web accessible resources</h2>
+
+<p>Zugängliche Webressourcen(Web accessible resources) sind Ressourcen wie Bilder, HTML, CSS, und JavaScript, die du in die Extension einbindest und für Content-Scripts und Skripten der Seite zugänglich machen möchtest. Ressourcen, die web-zugänglich gemacht werden, können von Skripten der Seite und Content-Scripts über ein spezielles URI-Schema referenziert werden.</p>
+
+<p>Wenn zum Beispiel ein Content-Script Bilder in eine Webseite einfügen will, kannst du sie in der Extension beifügen und web-zugänglich machen. Dann könnte das Content-Script <code><a href="/en-US/docs/Web/HTML/Element/img">img</a></code>-Tags erzeugen und hinzufügen, die über das <code>src</code>-Attribut auf die Bilder verweisen.</p>
+
+<p>Um mehr zu lernen, sieh die Dokumentation für den <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a> manifest.json key.</p>
+
+<p> </p>
+
+<p> </p>