initial commit

40 files changed, 7544 insertions, 0 deletions

diff --git a/files/de/mozilla/add-ons/add-on_guidelines/index.html b/files/de/mozilla/add-ons/add-on_guidelines/index.html
new file mode 100644
index 0000000000..e781073547
--- /dev/null
+++ b/files/de/mozilla/add-ons/add-on_guidelines/index.html
@@ -0,0 +1,124 @@
+---
+title: Add-on guidelines
+slug: Mozilla/Add-ons/Add-on_guidelines
+tags:
+  - Zusatzgerä
+translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/'
+---
+<p>These add-on guidelines were created to foster an open and diverse add-on developer community while ensuring an excellent user experience. They apply to all add-ons and add-on updates regardless of where they are hosted, and also apply to customizations performed by installers that configure Firefox without using an add-on. Add-ons hosted on <a class="external text" href="https://addons.mozilla.org/" rel="nofollow">AMO</a> are subject to <a href="https://addons.mozilla.org/developers/docs/policies" title="https://addons.mozilla.org/developers/docs/policies">additional policies</a>.</p>
+
+<h2 id="Be_Transparent">Be Transparent</h2>
+
+<ul>
+ <li>Add-ons must either be installed using the add-on web install system, or be approved by the user using the <a class="external text" href="https://blog.mozilla.org/addons/2011/08/11/strengthening-user-control-of-add-ons/" rel="nofollow">install opt-in dialog</a>.
+
+  <ul>
+   <li>We want our users to know what they are installing so that they are not unpleasantly surprised by changes they did not expect. We also want them to know what to remove if they decide not to keep it.</li>
+   <li>Add-ons installed through application installers should <a class="external text" href="/en-US/docs/Adding_Extensions_using_the_Windows_Registry" rel="nofollow">use the Windows Registry</a> or equivalent global install methods so that Firefox displays the opt-in screen. The opt-in screen must not be tampered with in any way, including overlaying additional information or images on top of it.</li>
+  </ul>
+ </li>
+ <li>Add-ons must always be possible to uninstall or disable from the Add-ons Manager.
+  <ul>
+   <li>Add-ons installed globally using the Windows registry or global extension directories cannot be uninstalled (<a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=640775" rel="nofollow">bug 640775</a>), but they can be disabled to the same effect.</li>
+  </ul>
+ </li>
+ <li>Add-ons must use a <a class="external text" href="/en-US/docs/Install_manifests#id" rel="nofollow">single unique ID</a> during their entire lifetime.
+  <ul>
+   <li>Using the same ID for multiple products, or multiple IDs for a single product, can lead to problems with automatic updates as well as blocklisting conflicts. Add-ons may change their IDs due to ownership changes, as they commonly use an email address-like format (<em>e.g.,</em> personasplus@mozilla.com).</li>
+  </ul>
+ </li>
+ <li>Add-ons must not use brand names, trademarks, or other terms in ways that deceive users. Using Mozilla trademarks must follow <a class="external text" href="http://www.mozilla.org/foundation/trademarks/policy.html" rel="nofollow">our trademark policy</a>.</li>
+ <li>Add-ons should clearly communicate their intended purpose and active features, including features introduced through updates.
+  <ul>
+   <li>While we understand and support add-on developers who choose to monetize their products, this should not come at the expense of users' browsing experience. If an add-on inserts advertisements, affiliate codes, sponsored search results, or the like, into web pages, the user should be made aware of this when the add-on is installed. Likewise, if some features require payment to use, or require payment to remain active after a trial period, users should be made aware of this.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Be_Respectful_to_Users">Be Respectful to Users</h2>
+
+<ul>
+ <li>Add-ons must remove all introduced code, executables, and application configuration changes when they are uninstalled.
+  <ul>
+   <li>Uninstalling an add-on using the regular uninstall process should generally suffice. This guideline primarily applies to changes made to preferences such as the homepage, default search URL, network settings, and so forth. These preferences should be restored to their previous values when the add-on is uninstalled. Most add-ons can easily accomplish this by making such changes via a <a class="external text" href="/en-US/docs/Building_an_Extension#Defaults_Files" rel="nofollow">default preferences file</a>.</li>
+  </ul>
+ </li>
+ <li>Add-ons must respect the users' choices and not make unexpected changes, or limit users' ability to revert them.
+  <ul>
+   <li>For instance, users generally do not expect an add-on to change the Firefox homepage. Asking users to opt-in to such extra changes is recommended.</li>
+   <li>Making settings changes difficult or impossible to revert is prohibited. It's not allowed to block users or other add-ons or installers from changing any settings.</li>
+  </ul>
+ </li>
+ <li>Add-ons should make it clear how private user data is being used.
+  <ul>
+   <li>Add-ons which send user data over the Internet should generally provide a Privacy Policy, ideally concise and easily readable.</li>
+  </ul>
+ </li>
+ <li>Add-on developers should provide a mechanism for them to be contacted.
+  <ul>
+   <li>While developers are not required to provide a support channel for users, it is recommended. All add-on developers should have a contact form or public email address so that they can be contacted in case of emergencies, such as guideline violations that could lead to blocklisting.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Be_Safe">Be Safe</h2>
+
+<ul>
+ <li>Add-ons must not cause harm to users' data, system, or online identities.</li>
+ <li>Add-ons must not transmit users' private data unsafely, or expose it to third parties unnecessarily.
+  <ul>
+   <li>Private data should always be sent over a secure connection. This includes browsing data such as visited URLs and bookmarks.</li>
+   <li>Making the browser easier to fingerprint by adding text to the User-Agent string or adding custom headers is also a privacy concern, and should be avoided.</li>
+  </ul>
+ </li>
+ <li>Add-ons must not create or expose application or system vulnerabilities.
+  <ul>
+   <li>Security bugs happen, but once discovered they need to be addressed immediately. A popular add-on with a security vulnerability is a valuable attack vector for hackers, and in such cases we will move quickly to blocklist the add-on if there is no prompt response from the developer.</li>
+  </ul>
+ </li>
+ <li>Add-ons must not tamper with the application or blocklist update systems.</li>
+ <li>Add-ons should not store any browsing data while in Private Browsing Mode.
+  <ul>
+   <li>It's worth stressing that PBM is about avoiding storing<em>local</em> data while browsing, not about sending data elsewhere. To learn more about PBM we recommend reading <a class="external text" href="http://ehsanakhgari.org/tag/privatebrowsing" rel="nofollow">Ehsan's blog posts</a> about it.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Be_Stable">Be Stable</h2>
+
+<ul>
+ <li>Add-ons must not cause hangs or crashes.</li>
+ <li>Add-ons should not break or disable core application features.
+  <ul>
+   <li>This includes features like tabbed browsing, Private Browsing Mode, and the location bar. Add-ons that are specifically meant to do this are exempt.</li>
+  </ul>
+ </li>
+ <li>Add-ons should not cause memory leaks, or unnecessarily consume large amounts of memory.</li>
+ <li>Add-ons should not slow down the application or system significantly.</li>
+ <li>Add-ons should not consume network resources to an extent that affects regular application usage.
+  <ul>
+   <li>Downloading large amounts of data without user awareness can significantly disrupt regular browsing, and may result in unexpected charges for users who have network usage limitations (notably on mobile).</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Exceptions">Exceptions</h2>
+
+<ul>
+ <li>Add-ons can break some of these guidelines if that's their intended purpose and there isn't malicious intent (<em>e.g.,</em> a security exploit proof of concept).</li>
+ <li>Add-ons deployed by administrators within workplaces, schools, kiosks, and so forth, are exempt from most guidelines.</li>
+ <li>As add-ons can only run clean up code if they are uninstalled while Firefox is running and they are enabled, we do not require that they attempt to clean up after themselves when they are uninstalled under other circumstances. Application installers that configure Firefox without add-ons should revert any changes when uninstalled.</li>
+ <li>Add-ons may leave behind preferences changes in private preference branches which do not affect Firefox when the add-on is not active, so that any previous add-on configuration is not lost if the user decides to re-install the add-on in the future.</li>
+</ul>
+
+<p>Other exceptions may apply.</p>
+
+<h2 id="Enforcement">Enforcement</h2>
+
+<p>Add-ons that do not follow these guidelines may qualify for blocklisting, depending on the extent of the violations. Guidelines qualified with the word<em>must</em> are especially important, and violations thereof will most likely result in a blocklisting nomination.</p>
+
+<p>The Add-ons Team will do their best to contact the add-on's developers and provide a reasonable time frame for the problems to be corrected before a block is put in place. If an add-on is considered malicious or its developers have proven unreachable or unresponsive, or in case of repeat violations, blocklisting may be immediate.</p>
+
+<p>Guideline violations should be <a class="external text" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tech%20Evangelism&amp;component=Add-ons" rel="nofollow">reported via Bugzilla</a>, under Tech Evangelism &gt; Add-ons. Questions can be posted in the <a class="external text" href="irc://irc.mozilla.org/addons" rel="nofollow">#addons IRC channel</a>.</p>
+
+<p>These guidelines may change in the future. All updates will be announced in the <a class="external text" href="https://blog.mozilla.org/addons/" rel="nofollow">Add-ons Blog</a>.</p>
diff --git a/files/de/mozilla/add-ons/amo/index.html b/files/de/mozilla/add-ons/amo/index.html
new file mode 100644
index 0000000000..5867afab50
--- /dev/null
+++ b/files/de/mozilla/add-ons/amo/index.html
@@ -0,0 +1,9 @@
+---
+title: AMO
+slug: Mozilla/Add-ons/AMO
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons/AMO
+---
+<p>Seiten, die <a href="https://addons.mozilla.org/en-US/firefox/">addons.mozilla.org</a> dokumentieren:</p>
diff --git a/files/de/mozilla/add-ons/amo/policy/index.html b/files/de/mozilla/add-ons/amo/policy/index.html
new file mode 100644
index 0000000000..45bdc8ac09
--- /dev/null
+++ b/files/de/mozilla/add-ons/amo/policy/index.html
@@ -0,0 +1,19 @@
+---
+title: AMO Policies
+slug: Mozilla/Add-ons/AMO/Policy
+translation_of: Mozilla/Add-ons/AMO/Policy
+---
+<p>{{AddonSidebar}}</p>
+
+<p><span id="result_box" lang="de"><span>Mozilla ist bestrebt, unseren Nutzern und Entwicklern eine großartige Add-On-Erfahrung zu bieten.</span> <span>Bitte lesen Sie die folgenden Richtlinien, bevor Sie Ihr Add-on abschicken.</span></span></p>
+
+
+<dl>
+ <dd></dd><dt><a href="/Mozilla/Add-ons/AMO/Policy/Agreement">Developer Agreement</a></dt>
+<dd>Effective January 5, 2016</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Reviews">Review Process</a></dt>
+<dd>Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.</dd> <dt><a href="/Mozilla/Add-ons/AMO/Policy/Featured">Featured Add-ons</a></dt>
+<dd>How up-and-coming add-ons become featured and what's involved in the process. </dd> <strong><a href="/de/Add-ons#Contact_us">Contacting us</a></strong>
+
+ <p>     <span id="result_box" lang="de"><span>Wie Sie uns bezüglich dieser Richtlinien oder Ihres Add-ons kontaktieren können.</span></span></p>
+
+</dl>
diff --git a/files/de/mozilla/add-ons/bootstrapped_extensions/index.html b/files/de/mozilla/add-ons/bootstrapped_extensions/index.html
new file mode 100644
index 0000000000..582b48c775
--- /dev/null
+++ b/files/de/mozilla/add-ons/bootstrapped_extensions/index.html
@@ -0,0 +1,243 @@
+---
+title: Bootstrapped extensions
+slug: Mozilla/Add-ons/Bootstrapped_extensions
+translation_of: Archive/Add-ons/Bootstrapped_extensions
+---
+<p>{{ gecko_minversion_header("2.0") }}</p>
+<div class="note">
+ <p><strong>Note:</strong> All extensions created using the <a class="link-https" href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/">Add-on SDK</a> are bootstrapped! All the bootstrapping code is generated for you, so you don't really need to think about it. Not using the Add-on SDK? Read on...</p>
+</div>
+<p>Traditional extensions include <strong>overlays</strong>, wherein the application can load up XUL from the extension's package and automatically apply it atop its own UI. While this makes creating extensions that add to the application's user interface relatively easy, it means that updating, installing, or disabling an extension requires an application restart.</p>
+<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduces <strong>bootstrapped extensions</strong>. These are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application. This is done using a special script file that's included in the extension that contains functions the browser calls to command the extension to install, uninstall, start up, and shut down.</p>
+<p>All the application does is call into this script file; the extension is responsible for adding and removing its user interface and handling any other setup and shutdown tasks it requires.</p>
+<p>This article discusses how bootstrapped extensions work. See this tutorial on <a href="/en-US/Add-ons/How_to_convert_an_overlay_extension_to_restartless">converting from an overlay extension to restartless</a> for a practical step by step guide to migrating.</p>
+<h2 id="The_startup_and_shutdown_process">The startup and shutdown process</h2>
+<p>A key feature of bootstrapped extensions is that they must be able to be started up and shut down on demand by the application. When the extension's <code>startup()</code> function is called, it must manually inject its user interface and other behavior into the application. Similarly, when its <code>shutdown()</code> function is called, it must remove anything it's added to the application, as well as all references to any of its objects.</p>
+<p>There are several scenarios in which the <code>startup()</code> function may be called; for example:</p>
+<ul>
+ <li>When the extension is first installed, assuming that it's both compatible with the application and is enabled.</li>
+ <li>When the extension becomes enabled using the add-ons manager window.</li>
+ <li>When the application is started up, if the extension is enabled and compatible with the application.</li>
+</ul>
+<p>Some examples of when the <code>shutdown()</code> function may be called:</p>
+<ul>
+ <li>When the extension is uninstalled, if it's currently enabled.</li>
+ <li>When the extension becomes disabled.</li>
+ <li>When the user quits the application, if the extension is enabled.</li>
+</ul>
+<h2 id="Notes_on_modifying_the_application_user_interface">Notes on modifying the application user interface</h2>
+<h3 id="chrome.manifest_in_bootstrapped_add-ons">chrome.manifest in bootstrapped add-ons</h3>
+<p>You can use a <a href="/en-US/docs/Chrome_Registration"><code>chrome.manifest</code></a> file in bootstrapped add-ons to:</p>
+<ol>
+ <li>make your add-on's content available via a <code>chrome://</code> URL (using the <code>content</code>, <code>locale</code>, and <code>skin</code> instructions in the manifest);</li>
+ <li>replace existing <code>chrome://</code> URIs with your content (using the <code>override</code> instruction).</li>
+</ol>
+<p>Not all <code>chrome.manifest</code> instructions are supported in bootstrapped add-ons, for example you still cannot register <a href="/en-US/docs/XUL_Overlays">XUL Overlays</a> from a bootstrapped add-on. See the <a href="/en-US/docs/Chrome_Registration"><code>chrome.manifest</code></a> documentation for details.</p>
+<p>In Firefox 10 and later the <code>chrome.manifest</code> file located in the root of the add-on's XPI (i.e. a sibling of the <code>install.rdf</code>) is loaded automatically. In Firefox 8 and 9 you had to load/unload the manifest manually using {{ ifmethod("nsIComponentManager", "addBootstrappedManifestLocation") }} and {{ ifmethod("nsIComponentManager", "removeBootstrappedManifestLocation") }}. This feature was unavailable in Firefox versions before 8.</p>
+<h3 id="Adding_user_interface_manually">Adding user interface manually</h3>
+<p>If you decide to go ahead and try to develop a bootstrapped extension that modifies the application's user interface, here are a few suggestions to get you started.</p>
+<p>You need to look up the relevant application UI elements by their ID by calling {{ domxref("document.getElementById()") }}, then manipulate them to inject your UI. For example, you can get access to the menu bar in Firefox with <code>document.getElementById("main-menubar")</code>.</p>
+<p>Be sure that at shutdown time, you remove any user interface you've added.</p>
+<h2 id="Creating_a_bootstrapped_extension">Creating a bootstrapped extension</h2>
+<p>To mark an extension as bootstrappable, you need to add the following element to its <a href="/en-US/docs/Install_Manifests">install manifest</a>:</p>
+<pre><code>&lt;em:bootstrap&gt;true&lt;/em:bootstrap&gt;</code></pre>
+<p>Then you need to add a <a href="/en-US/docs/Extensions/bootstrap.js"><code><strong>bootstrap.js</strong></code> file</a> that contains the required functions; this should be alongside the <a href="/en-US/docs/Install_Manifests"><code>install.rdf</code> file</a> in the extension's package.</p>
+<h3 id="Backward_compatibility">Backward compatibility</h3>
+<p>Because older versions of Firefox don't know about the <code>bootstrap</code> property or <code>bootstrap.js</code> file, it's not overly difficult to create an XPI that will work on both as a bootstrappable extension and as a traditional extension. Create your extension as a bootstrappable extension, then add the traditional overlays as well. Newer versions of Firefox will use the <code>bootstrap.js</code> script, ignoring the components and overlays, while older versions will use the overlays.</p>
+<h2 id="Bootstrap_entry_points">Bootstrap entry points</h2>
+<p>The <code>bootstrap.js</code> script should contain several specific functions, which are called by the browser to manage the extension. The script gets executed in a privileged sandbox, which is cached until the extension is shut down.</p>
+<h3 id="startup">startup</h3>
+<p>Called when the extension needs to start itself up. This happens at application launch time or when the extension is enabled after being disabled (or after it has been shut down in order to install an update. As such, this can be called many times during the lifetime of the application.</p>
+<p>This is when your add-on should inject its UI, start up any tasks it may need running, and so forth.</p>
+<pre>void startup(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being started up. This will be one of <code>APP_STARTUP</code>, <code>ADDON_ENABLE</code>, <code>ADDON_INSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h3 id="shutdown">shutdown</h3>
+<p>Called when the extension needs to shut itself down, such as when the application is quitting or when the extension is about to be upgraded or disabled. Any user interface that has been injected must be removed, tasks shut down, and objects disposed of.</p>
+<pre>void shutdown(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters_2">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being shut down. This will be one of <code>APP_SHUTDOWN</code>, <code>ADDON_DISABLE</code>, <code>ADDON_UNINSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h3 id="install">install</h3>
+<p>Your bootstrap script must include an <code>install()</code> function, which the application calls before the first call to <code>startup()</code> after the extension is installed, upgraded, or downgraded.</p>
+<div class="note">
+ <strong>Note:</strong> This method is never called if the extension has never been started; for example, if an extension is installed but isn't compatible with the current version of the application, <code>install()</code> never gets called if it is uninstalled before becoming compatible. However, if the extension gets upgraded to a version that's compatible with the application, its <code>install()</code> function will be called at that time, before the first <code>startup()</code> call.</div>
+<pre>void install(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters_3">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being installed. This will be one of <code>ADDON_INSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h3 id="uninstall">uninstall</h3>
+<p>This function is called after the last call to <code>shutdown()</code> before a particular version of an extension is uninstalled. This will not be called if <code>install()</code> was never called.</p>
+<div class="note">
+ <strong>Note:</strong> It's important to keep in mind that <code>uninstall()</code> can be called even on extensions that are currently disabled, or are not compatible with the current application. Because of this, it's crucial that the function be implemented to gracefully handle APIs that may not be present in the application. This function will also not be called if a third-party application removes the extension while Firefox isn't running. Simply having code <code>function install() {} </code>IS NOT ENOUGH, if you have code in <code>uninstall </code>it will not run, you MUST run some code in the <code>install </code>function, at the least you must set arguments on the <code>install </code>function so like: <code>function install(aData, aReason) {}</code> then uninstall WILL WORK.</div>
+<div class="note">
+ <strong>Note:</strong> If you open addon manager and then click "Remove" on addon, it will not call uninstall function right away. Because it was soft uninstalled, as the "Undo" button is there. If you close addon manager or something to make that "Undo" button to go away then the hard uninstall takes place.</div>
+<div class="note">
+ <strong>Note:</strong> The uninstall function fires on downgrade and upgrade as well so you should make sure it is an uninstall by doing this:<br>
+ <code>function uninstall(aData, aReason) {</code><br>
+ <code>     if (aReason == ADDON_UNINSTALL) {</code><br>
+ <code>          console.log('really uninstalling');</code><br>
+ <code>     } else {</code><br>
+ <code>          console.log('not a permanent uninstall, likely an upgrade or downgrade');</code><br>
+ <code>     }</code><br>
+ <code>}</code></div>
+<pre>void uninstall(
+  data,
+  reason
+);
+</pre>
+<h6 id="Parameters_4">Parameters</h6>
+<dl>
+ <dt>
+  <code>data</code></dt>
+ <dd>
+  A <a href="#Bootstrap_data">bootstrap data structure</a>.</dd>
+ <dt>
+  <code>reason</code></dt>
+ <dd>
+  One of the <a href="#Reason_constants">reason constants</a>, indicating why the extension is being uninstalled. This will be one of <code>ADDON_UNINSTALL</code>, <code>ADDON_UPGRADE</code>, or <code>ADDON_DOWNGRADE</code>.</dd>
+</dl>
+<h2 id="Reason_constants">Reason constants</h2>
+<p>The bootstrap functions accept a <code>reason</code> parameter, which explains to the extension why it's being called. The reason constants are:</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Constant</td>
+   <td class="header">Value</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>APP_STARTUP</code></td>
+   <td>1</td>
+   <td>The application is starting up.</td>
+  </tr>
+  <tr>
+   <td><code>APP_SHUTDOWN</code></td>
+   <td>2</td>
+   <td>The application is shutting down.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_ENABLE</code></td>
+   <td>3</td>
+   <td>The add-on is being enabled.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_DISABLE</code></td>
+   <td>4</td>
+   <td>The add-on is being disabled. (Also <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=620541">sent during uninstallation</a>)</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_INSTALL</code></td>
+   <td>5</td>
+   <td>The add-on is being installed.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_UNINSTALL</code></td>
+   <td>6</td>
+   <td>The add-on is being uninstalled.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_UPGRADE</code></td>
+   <td>7</td>
+   <td>The add-on is being upgraded.</td>
+  </tr>
+  <tr>
+   <td><code>ADDON_DOWNGRADE</code></td>
+   <td>8</td>
+   <td>The add-on is being downgraded.</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Bootstrap_data">Bootstrap data</h2>
+<p>Each of the entry points is passed a simple data structure containing some useful information about the add-on being bootstrapped. More information about the add-on can be obtained by calling <code><a href="/en-US/docs/Addons/Add-on_Manager/AddonManager#getAddonByID()">AddonManager.getAddonByID()</a></code>. The data is a simple JavaScript object with the following properties:</p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Property</td>
+   <td class="header">Type</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>id</code></td>
+   <td><code>string</code></td>
+   <td>The ID of the add-on being bootstrapped.</td>
+  </tr>
+  <tr>
+   <td><code>version</code></td>
+   <td><code>string</code></td>
+   <td>The version of the add-on being bootstrapped.</td>
+  </tr>
+  <tr>
+   <td><code>installPath</code></td>
+   <td><code>nsIFile</code></td>
+   <td>The installation location of the add-on being bootstrapped. This may be a directory or an XPI file depending on whether the add-on is installed unpacked or not.</td>
+  </tr>
+  <tr>
+   <td><code>resourceURI</code></td>
+   <td><code>nsIURI</code></td>
+   <td>A URI pointing at the root of the add-ons files, this may be a <code>jar:</code> or <code>file:</code> URI depending on whether the add-on is installed unpacked or not. {{ gecko_minversion_inline("7.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>oldVersion</code></td>
+   <td><code>string</code></td>
+   <td>The previously installed version, if the reason is <code>ADDON_UPGRADE</code> or <code>ADDON_DOWNGRADE</code>, and the method is <code>install</code> or <code>startup</code>. {{ gecko_minversion_inline("22.0") }}</td>
+  </tr>
+  <tr>
+   <td><code>newVersion</code></td>
+   <td><code>string</code></td>
+   <td>The version to be installed, if the reason is <code>ADDON_UPGRADE</code> or <code>ADDON_DOWNGRADE</code>, and the method is <code>shutdown</code> or <code>uninstall</code>. {{ gecko_minversion_inline("22.0") }}</td>
+  </tr>
+ </tbody>
+</table>
+<div class="note">
+ <p><strong>Note:</strong> An add-on may be upgraded/downgraded at application startup, in this case the <code>startup</code> method reason is <code>APP_STARTUP</code>, and the <code>oldVersion</code> property is not set. Also be aware that in some circumstances an add-on upgrade/downgrade may occur without the <code>uninstall</code> method being called.</p>
+</div>
+<h2 id="Add-on_debugger">Add-on debugger</h2>
+<p>From Firefox 31 onwards, you can use the <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a> to debug bootstrapped add-ons.</p>
+<h2 id="Further_reading">Further reading</h2>
+<ul>
+ <li>Dave Garrett provides a step-by-step guide to <a class="external" href="https://flagfox.wordpress.com/2014/01/19/writing-restartless-addons/">convert an old overlay based extension into a restartless addon</a>. Some code samples provided.</li>
+ <li>Dave Townsend provides a basic code base to <a class="external" href="http://www.oxymoronical.com/blog/2011/01/Playing-with-windows-in-restartless-bootstrapped-extensions">load UI for each opened window</a> in a bootstrapped extension.</li>
+ <li>Wladimir Palant explains <a class="external" href="http://adblockplus.org/blog/how-many-hacks-does-it-take-to-make-your-extension-install-without-a-restart">problems and bugs found when converting an existing extension</a>, including some solutions and workarounds. (largely obsolete)</li>
+ <li>Mark Finkle provides some simple example code for <a class="external" href="http://starkravingfinkle.org/blog/2011/01/bootstrap-jones-adventures-in-restartless-add-ons/">restartless add-ons in mobile Firefox</a>, <a class="external" href="http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-more-resources/">adding resources (like the options window)</a> to bootstrapped extensions and <a class="external" href="http://starkravingfinkle.org/blog/2011/01/restartless-add-ons-%e2%80%93-default-preferences/">using default preferences</a> without a <code>default/preferences/prefs.js</code> file.</li>
+ <li>Kris Maglione writes about <a class="external" href="http://maglione-k.users.sourceforge.net/bootstrapped.xhtml">the requirements for the cleanup procedures</a> in bootstrapped extensions.</li>
+ <li>Edward Lee shows off some <a class="external" href="http://ed.agadak.net/2011/01/restartless-add-on-example-code">helpful coding patterns and examples</a> you can use in your bootstrapped add-on.</li>
+ <li>Documentation for <a href="/en-US/docs/Extensions/Inline_Options">Inline Options</a> in Firefox 7 and later.</li>
+</ul>
diff --git a/files/de/mozilla/add-ons/index.html b/files/de/mozilla/add-ons/index.html
new file mode 100644
index 0000000000..298aba8754
--- /dev/null
+++ b/files/de/mozilla/add-ons/index.html
@@ -0,0 +1,198 @@
+---
+title: Add-ons
+slug: Mozilla/Add-ons
+tags:
+  - Add-ons
+  - Erweiterungen
+  - Mozilla
+translation_of: Mozilla/Add-ons
+---
+<div>{{AddonSidebar}}</div>
+
+<div class="summary"><u><em><strong>Ändern und Erweitern von Mozilla-Anwendungen</strong></em></u></div>
+
+<p><span class="seoSummary">Add-ons fügen neue Funktionalitäten zu <a href="/de/docs/Mozilla/Gecko">Gecko</a>-basierten Anwendungen wie zum Beispiel Firefox, SeaMonkey und Thunderbird hinzu.</span><strong> </strong>Es gibt zwei Arten von Add-ons: <a href="#Extensions">Erweiterungen</a> fügen neue Funktionen zur Anwendung hinzu, während <a href="#Themes">Themes</a> nur die Oberfläche verändern.</p>
+
+<p><span id="ouHighlight__0_2TO0_2">Für</span><span id="noHighlight_0.46174817388551737"> </span><span id="ouHighlight__9_18TO4_16">Erweiterungen</span><span id="noHighlight_0.9728453500078768"> </span><span id="ouHighlight__20_22TO18_20">und</span><span id="noHighlight_0.8772702394846859"> </span><span id="ouHighlight__24_29TO22_27">Themes</span><span id="noHighlight_0.10864923417065742"> </span><span id="ouHighlight__40_47TO29_36">betreibt</span><span id="noHighlight_0.2896404695195993"> </span><span id="ouHighlight__32_38TO38_44">Mozilla</span><span id="noHighlight_0.616403534771801"> </span><span id="ouHighlight__49_49TO46_48">ein</span><span id="noHighlight_0.3610688851925862"> </span><span id="ouHighlight__51_60TO50_59">Repository</span><span id="noHighlight_0.4564345131244706"> </span><span id="ouHighlight__62_63TO61_63">auf</span><span id="noHighlight_0.8092074683100744"> </span><a href="https://addons.mozilla.org/">addons.mozilla.org</a><span id="noHighlight_0.2282951451891393">,</span><span id="noHighlight_0.6708139759356772"> </span><span id="ouHighlight__85_88TO85_88">auch</span><span id="noHighlight_0.05199455050576829"> </span><span id="ouHighlight__90_94TO90_96">bekannt</span><span id="noHighlight_0.5422853980015302"> </span><span id="ouHighlight__96_97TO98_100">als</span><span id="noHighlight_0.7749799119731183"> </span><span id="ouHighlight__99_101TO102_104">AMO</span><span id="noHighlight_0.6685905641724511">.</span><span id="noHighlight_0.631834269557855"> </span><span id="ouHighlight__104_107TO107_110">Wenn</span><span id="noHighlight_0.7392724408625175"> </span><span id="ouHighlight__109_111TO112_114">Sie</span><span id="noHighlight_0.21350134406125387"> </span><a href="/de/Add-ons/Submitting_an_add-on_to_AMO"><span id="ouHighlight__120_126TO116_122">Add-ons</span><span id="noHighlight_0.2923239221030458"> bei</span><span id="noHighlight_0.8881758058990628"> </span><span id="ouHighlight__131_133TO128_130">AMO</span><span id="noHighlight_0.025624897842256078"> einreichen</span></a><span id="noHighlight_0.8413771821831256"> </span><span id="ouHighlight__140_142TO143_148">werden</span><span id="noHighlight_0.5558507955998613"> diese </span><span id="ouHighlight__144_151TO150_158">überprüft</span><span id="noHighlight_0.9072753976621971"> </span><span id="ouHighlight__154_156TO160_162">und erst</span><span id="noHighlight_0.6736322856600808"> </span><span id="ouHighlight__158_162TO164_167">nach</span><span id="noHighlight_0.25558448245838705"> </span><span id="ouHighlight__164_170TO169_179">bestandener</span><span id="noHighlight_0.8168167267155648"> </span><span id="ouHighlight__172_177TO181_187">Prüfung</span><span id="noHighlight_0.7442566133261889"> veröffentlicht</span><span id="noHighlight_0.8740845934787674">. Allerdings ist es nicht zwingend erforderlich, dass Add-ons nur über AMO veröffentlicht werden, aber durch die Überprüfung gewinnen Anwender an Vertrauen und im Gegenzug können Sie von AMO als einer zentralen Plattform, auf der viele hilfreiche Add-ons zu finden sind, nur profitieren.</span></p>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span class="highlight" id="ouHighlight__0_6TO0_6">Add-ons</span><span id="noHighlight_0.8073168651876949"> </span><span id="ouHighlight__8_10TO8_13">können</span><span id="noHighlight_0.5161412189661699"> </span><span id="ouHighlight__12_18TO15_20">großen</span><span id="noHighlight_0.7385260295513605"> </span><span id="ouHighlight__20_25TO22_33">Einfluss auf</span><span id="noHighlight_0.6855261499753901"> </span><span id="ouHighlight__27_29TO35_37">das</span><span id="noHighlight_0.16685755020083615"> </span><span id="ouHighlight__31_39TO39_47">Verhalten</span><span id="noHighlight_0.8541112890313974"> </span><span id="ouHighlight__41_42TO49_51">der</span><span id="noHighlight_0.4702563262360646"> </span><span id="ouHighlight__48_58TO53_61">Anwendung haben</span><span id="ouHighlight__60_63TO62_66">, die</span><span id="noHighlight_0.4344044719962509"> </span><span id="ouHighlight__71_74TO68_70">sie</span><span id="noHighlight_0.6103633117751325"> </span><span id="ouHighlight__65_69TO72_77">hosten</span><span id="noHighlight_0.5064620255593768">.</span><span id="noHighlight_0.8461832550228662"> </span><span id="ouHighlight__77_81TO80_88">Wir haben</span><span id="noHighlight_0.5294361961437433"> </span><span id="ouHighlight__93_93TO90_93">eine</span><span id="noHighlight_0.6544640902426183"> </span><span id="ouHighlight__95_97TO95_99">Reihe</span><span id="noHighlight_0.03377692679910005"> </span><span id="ouHighlight__99_100TO101_103">von</span><span id="noHighlight_0.9377326475684262"> </span><a href="/de/docs/Mozilla/Add-ons/Add-on_guidelines"><span id="ouHighlight__102_111TO105_115">Richtlinien</span></a><span id="ouHighlight__83_91TO194_203"> entwickelt</span><span id="noHighlight_0.5106467926791978">, </span><span id="ouHighlight__113_114TO118_119">um</span><span id="noHighlight_0.14890796820080987"> </span><span id="ouHighlight__116_126TO121_135">sicherzustellen</span><span id="ouHighlight__128_131TO136_141">, dass</span><span id="noHighlight_0.07500516160225124"> S</span><span id="ouHighlight__133_136TO143_145">ie</span><span id="noHighlight_0.08855436033349207"> </span><span id="ouHighlight__146_146TO147_150">eine</span><span id="noHighlight_0.3070385633480808"> </span><span id="ouHighlight__148_151TO152_155">gute</span><span id="noHighlight_0.3381150327176671"> </span><span id="ouHighlight__153_162TO157_165">Erfahrung</span><span id="noHighlight_0.07569587577790593"> </span><span id="ouHighlight__164_165TO167_169">für</span><span id="noHighlight_0.8464872954812956"> </span><span id="ouHighlight__167_171TO171_178">Benutzer</span><span id="noHighlight_0.6111953604296508"> </span><span id="ouHighlight__138_144TO180_192">bereitstellen</span><span id="noHighlight_0.754293482871765">.</span><span id="noHighlight_0.8279596833879079"> </span><span id="ouHighlight__174_178TO206_210">Diese</span><span id="noHighlight_0.1932574202336862"> </span><span id="ouHighlight__180_189TO212_222">Richtlinien</span><span id="noHighlight_0.2279840053412009"> </span><span id="ouHighlight__191_195TO224_229">gelten</span><span id="noHighlight_0.7699032448605116"> </span><span id="ouHighlight__197_199TO231_233">für</span><span id="noHighlight_0.5009387101195566"> </span><span id="ouHighlight__201_203TO235_238">alle</span><span id="noHighlight_0.1494141467754172"> </span><span id="ouHighlight__205_209TO240_244">Arten</span><span id="noHighlight_0.14879182542509328"> </span><span id="ouHighlight__211_212TO246_248">von</span><span id="noHighlight_0.5012259301526238"> </span><span id="ouHighlight__214_220TO250_253">Add-</span><span id="noHighlight_0.23289593709132983">ons</span><span id="noHighlight_0.4169765534770873">,</span><span id="noHighlight_0.48070762106654374"> </span><span id="ouHighlight__223_229TO259_260">ob</span><span id="noHighlight_0.3238985427414621"> </span><span id="ouHighlight__231_234TO262_264">sie</span><span id="noHighlight_0.5918557393357521"> </span><span id="ouHighlight__247_248TO266_268">auf</span><span id="noHighlight_0.7562549712671994"> </span><a href="https://addons.mozilla.org/"><span id="ouHighlight__250_267TO270_287">addons.mozilla.org</span></a><span id="noHighlight_0.5740639914818754"> </span><span id="ouHighlight__269_270TO289_292">oder</span><span id="noHighlight_0.28226842992825674"> </span><span id="ouHighlight__272_274TO294_298">nicht</span><span id="noHighlight_0.8114463871280692"> gehostet werden</span><span id="noHighlight_0.7988823650391782">.</span></div>
+</div>
+
+<hr>
+<h2 id="Erweiterungen"><a name="Extensions">Erweiterungen</a></h2>
+
+<p><span id="ouHighlight__0_9TO0_12">Erweiterungen</span><span id="noHighlight_0.5729434698073165"> fügen </span><span id="ouHighlight__15_17TO73_76">neue</span><span id="noHighlight_0.5426566923941274"> </span><span id="ouHighlight__19_31TO78_91">Funktionalität</span><span id="noHighlight_0.5729434698073165"> bei</span><span id="noHighlight_0.17223497468812032"> </span><span id="ouHighlight__36_42TO25_31">Mozilla</span><span id="noHighlight_0.30201855489047735">-</span><span id="ouHighlight__44_55TO33_43">Anwendungen</span><span id="noHighlight_0.9323699890664823"> </span><span id="ouHighlight__57_63TO45_47">wie</span><span id="noHighlight_0.6288054173067209"> </span><span id="ouHighlight__65_71TO49_55">Firefox</span><span id="noHighlight_0.3720649555765366"> </span><span id="ouHighlight__73_75TO57_59">und</span><span id="noHighlight_0.41093353307315184"> </span><span id="ouHighlight__77_87TO61_71">Thunderbird</span><span id="noHighlight_0.005072096932092651"> </span><span id="ouHighlight__33_34TO14_23">hinzu</span><span id="noHighlight_0.514778115570198">.</span><span id="noHighlight_0.8402892092302489"> Sie k</span><span id="ouHighlight__95_97TO94_99">önnen dem Browser</span><span id="noHighlight_0.6506630460504175"> </span>neue Funktionen <span id="ouHighlight__123_129TO105_111">hinzufügen</span><span id="noHighlight_0.4739361983240178">,</span><span id="noHighlight_0.9961192317983276"> </span><span id="ouHighlight__132_138TO114_118">z. B.</span><span id="noHighlight_0.8826244039728934"> </span><span id="ouHighlight__140_140TO120_123">eine</span><span id="noHighlight_0.5894468244715919"> </span><span id="ouHighlight__142_150TO125_130">andere</span><span id="noHighlight_0.21119886019042655"> </span><span id="ouHighlight__152_154TO132_142">Möglichkeit</span><span id="noHighlight_0.040012773147417136"> </span><span id="ouHighlight__156_157TO144_146">zum</span><span id="noHighlight_0.6037609008470418"> </span><span id="ouHighlight__159_164TO148_156">Verwalten</span><span id="noHighlight_0.7243803787966292"> von </span><span id="ouHighlight__166_169TO162_175">Registerkarten</span><span id="noHighlight_0.9132172497546358">,</span><span id="noHighlight_0.3979001439345283"> </span><span id="ouHighlight__103_105TO178_181">neue</span><span id="noHighlight_0.707735932331072"> </span><span id="ouHighlight__107_114TO183_192">Funktionen</span><span id="noHighlight_0.40561987701461166"> </span><span id="ouHighlight__116_117TO194_203">hinzufügen</span><span id="noHighlight_0.9616888386930491"> </span><span id="ouHighlight__172_174TO205_207">und</span><span id="noHighlight_0.6438472756046978"> </span><span id="ouHighlight__176_179TO209_211">sie</span><span id="noHighlight_0.5784811038902246"> </span><span id="ouHighlight__181_183TO213_218">können</span><span id="noHighlight_0.5937395654078539"> </span><span id="ouHighlight__192_194TO220_222">Web</span><span id="noHighlight_0.7099929023902743">-</span><span id="ouHighlight__196_202TO224_230">Inhalte</span><span id="noHighlight_0.9209985235882363"> </span><span id="ouHighlight__204_205TO232_234">zur</span><span id="noHighlight_0.09029320754299464"> </span><span id="ouHighlight__207_213TO236_247">Verbesserung</span><span id="noHighlight_0.20353211567771035"> </span><span id="ouHighlight__215_217TO249_251">der</span><span id="noHighlight_0.2439272349522139"> </span><span id="ouHighlight__219_227TO253_274">Benutzerfreundlichkeit</span><span id="noHighlight_0.9924717971226085"> </span><span id="ouHighlight__229_230TO276_279">oder</span><span id="noHighlight_0.43115927678722177"> die </span><span id="ouHighlight__232_239TO285_294">Sicherheit</span><span id="noHighlight_0.9524965819559671"> </span><span id="ouHighlight__241_242TO296_298">von</span><span id="noHighlight_0.7894184901812318"> </span><span id="ouHighlight__244_253TO300_309">bestimmten</span><span id="noHighlight_0.47692432029040743"> </span><span id="ouHighlight__255_262TO311_319">Webseiten</span><span id="noHighlight_0.07282619191471151"> </span><span id="ouHighlight__185_190TO321_326">ändern</span><span id="noHighlight_0.28402655314769354">.</span></p>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span class="highlight" id="ouHighlight__0_4TO0_1">Es</span><span id="noHighlight_0.5618336419358886"> </span><span id="ouHighlight__6_8TO3_6">gibt</span><span id="noHighlight_0.20951348350366739"> </span><span id="ouHighlight__10_14TO8_11">drei</span><span id="noHighlight_0.5210041330526933"> </span><span id="ouHighlight__16_24TO13_24">verschiedene</span><span id="noHighlight_0.15803069640292677"> Ansätze </span><span id="ouHighlight__58_67TO40_52">Erweiterungen</span><span id="noHighlight_0.7944043659249324"> </span><span id="ouHighlight__52_56TO54_62">zu erstellen</span><span id="noHighlight_0.7515176659448694"> können</span><span id="noHighlight_0.9583879950808301">:</span><span id="noHighlight_0.48850260791567"> </span><span id="ouHighlight__70_75TO72_77">Add-on</span><span id="noHighlight_0.5063497891968006"> </span><span id="ouHighlight__77_85TO79_90">SDK-basierte</span><span id="noHighlight_0.6910049815748374"> </span><span id="ouHighlight__87_96TO92_104">Erweiterungen</span><span id="noHighlight_0.8618006793204717">,</span><span id="noHighlight_0.42408608134295733"> </span><span id="ouHighlight__99_106TO107_113">manuell</span><span id="noHighlight_0.1487685728083037"> </span><span id="ouHighlight__108_119TO115_126">bootstrapped</span><span id="noHighlight_0.6457540411668959"> </span><span id="ouHighlight__121_131TO128_138">restartless</span><span id="noHighlight_0.20860427395815706"> </span><span id="ouHighlight__133_142TO140_152">Erweiterungen</span><span id="noHighlight_0.3909614429694541"> </span><span id="ouHighlight__145_147TO154_156">und</span><span id="noHighlight_0.5844507143177976"> </span><span id="ouHighlight__149_155TO158_164">Overlay</span><span id="noHighlight_0.6223730968805569">-</span><span id="ouHighlight__157_166TO166_178">Erweiterungen</span><span id="noHighlight_0.04213765936154057">.</span></div>
+
+<div></div>
+</div>
+
+<ul class="card-grid">
+ <li><span><a href="https://developer.mozilla.org/de/Add-ons/SDK">Add-on SDK Erweiterungen</a></span>
+
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+  <div></div>
+
+  <div>Erweiterungen, die auf high-level JavaScript APIs aufbauen und keinen Browserneustart bei der Installation erfordern.</div>
+  </div>
+ </li>
+ <li><span><a href="/en-US/Add-ons/Bootstrapped_extensions">Restartless Erweiterungen</a></span>
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+  <div></div>
+
+  <div>Erweiterungen, die keinen Browserneustart bei der Installation erfordern.</div>
+  </div>
+ </li>
+ <li><a href="/de/Add-ons/Overlay_Extensions"><span>Overlay Erweiterungen</span></a>
+  <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+  <div></div>
+
+  <div>Overlay-Erweiterungen, die gewöhnlich <a href="/de/docs/Mozilla/Tech/XUL/Overlays">XUL-Overlays</a> verwenden, und einen Browserneustart bei der Installation erfordern</div>
+  </div>
+ </li>
+</ul>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="ouHighlight__0_1TO0_3">Wenn</span><span id="noHighlight_0.3337830105998172"> </span><span id="ouHighlight__3_5TO5_7">Sie</span><span id="noHighlight_0.7746803241322997"> </span><span id="ouHighlight__7_9TO9_14">können</span><span id="noHighlight_0.585451144512538">,</span><span id="noHighlight_0.4911257835218017"> </span><span id="ouHighlight__12_15TO17_22">ist es</span><span id="noHighlight_0.6065425206393317"> </span><span id="ouHighlight__17_25TO24_29">ratsam</span><span id="noHighlight_0.550658005662535">,</span><span id="noHighlight_0.24798880559775416"> </span><span id="ouHighlight__34_36TO32_34">das</span><span id="noHighlight_0.8340677088719144"> </span><span id="ouHighlight__38_43TO36_41">Add-on</span><span id="noHighlight_0.00014064138883218558">-</span><span id="ouHighlight__45_47TO43_45">SDK</span><span id="noHighlight_0.8375346034178479">  zu </span><span id="ouHighlight__30_32TO47_55">verwenden</span><span id="noHighlight_0.005823161182457626">, die <span id="ouHighlight__38_43TO36_41">Add-on</span><span id="noHighlight_0.00014064138883218558">-</span><span id="ouHighlight__45_47TO43_45">SDK </span></span><span id="ouHighlight__56_59TO58_66">verwendet</span><span id="noHighlight_0.14337984823954886"> </span><span id="ouHighlight__61_63TO68_70">die</span><span id="noHighlight_0.7781581584527945"> </span><span id="ouHighlight__65_75TO72_82">restartless</span><span id="noHighlight_0.4376804997463938"> </span><span id="ouHighlight__77_95TO84_106">Erweiterungsmechanismus</span><span id="noHighlight_0.3984695253305903"> die aber</span><span id="noHighlight_0.7931560723784686"> </span><span id="ouHighlight__112_118TO113_121">bestimmte</span><span id="noHighlight_0.2588679376188092"> </span><span id="ouHighlight__120_124TO123_130">Aufgaben</span><span id="noHighlight_0.8667723987939762"> </span><span id="ouHighlight__101_110TO132_142">vereinfacht</span><span id="noHighlight_0.6199566203398377"> </span><span id="ouHighlight__126_128TO144_146">und</span><span id="noHighlight_0.2381105889500461"> </span><span id="ouHighlight__146_151TO163_166">sich selbst </span><span id="ouHighlight__130_138TO148_156">bereinigt. </span><span id="ouHighlight__154_155TO169_172">Wenn</span><span id="noHighlight_0.8347930705003632"> </span><span id="ouHighlight__157_159TO174_176">das</span><span id="noHighlight_0.0387513500553347"> </span><span id="ouHighlight__161_166TO178_183">Add-on</span><span id="noHighlight_0.6450042984906047"> </span><span id="ouHighlight__168_170TO185_187">SDK</span><span id="noHighlight_0.7701572494323595"> nicht </span><span id="ouHighlight__178_187TO195_205">ausreichend</span><span id="noHighlight_0.6563860977922914"> </span><span id="ouHighlight__189_191TO207_209">für</span><span id="noHighlight_0.6976277595872102"> </span><span id="ouHighlight__193_196TO211_214">Ihre</span><span id="noHighlight_0.04591068407091248"> </span><span id="ouHighlight__198_202TO216_226">Bedürfnisse</span><span id="noHighlight_0.22159616810780236"> </span><span id="ouHighlight__172_176TO228_230">ist</span><span id="noHighlight_0.6674557675600933">,</span><span id="noHighlight_0.07989125941461361"> </span><span id="ouHighlight__205_213TO233_246">implementieren</span><span id="noHighlight_0.30761721803101016"> Sie </span><span id="ouHighlight__246_252TO252_262">stattdessen</span><span id="noHighlight_0.8909545170859443"> </span><span id="ouHighlight__215_215TO264_267">eine</span><span id="noHighlight_0.6468098346773389"> </span><span id="ouHighlight__217_222TO269_276">manuelle</span><span id="noHighlight_0.6341425702033984"> </span><span id="ouHighlight__224_234TO278_288">restartless</span><span id="noHighlight_0.6460871563716616">-</span><span id="ouHighlight__236_244TO290_300">Erweiterung</span><span id="noHighlight_0.5146973093507594">.</span></div>
+
+<div></div>
+</div>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="ouHighlight__57_60TO0_4">Lesen</span><span id="noHighlight_0.6551587170848595"> Sie </span><span id="ouHighlight__0_2TO10_12">für</span><span id="noHighlight_0.5235885588700181"> </span><span id="ouHighlight__4_7TO14_20">weitere</span><span id="noHighlight_0.3269583681457525"> </span><span id="ouHighlight__9_19TO22_34">Informationen</span><span id="noHighlight_0.540100826342384"> </span><span id="ouHighlight__21_22TO36_38">zur</span><span id="noHighlight_0.13894618541551684"> </span><span id="ouHighlight__24_31TO40_46">Auswahl</span><span id="noHighlight_0.25469384450538257"> "</span><span id="ouHighlight__33_37TO48_53">welche</span><span id="noHighlight_0.7575584097586778"> </span><span id="ouHighlight__39_47TO55_61">Technik</span><span id="noHighlight_0.5414143564779148"> </span><span id="ouHighlight__52_54TO63_71">verwenden</span><span id="noHighlight_0.8016183801484662">" </span><span id="ouHighlight__62_65TO73_78">diesen</span><span id="noHighlight_0.2896063301754803"> </span><a href="/de/Add-ons/Comparing_Extension_Toolchains"><span id="ouHighlight__67_76TO80_88">Vergleich</span></a><span id="noHighlight_0.9816731982769745">.</span></div>
+
+<div></div>
+</div>
+
+<h3 id="Debugging">Debugging</h3>
+
+<p>Die Entwicklung von Erweiterung wird erschwert, wenn man für den Debug über keine Möglichkeit verfügt zu sehen, in welcher Zeile der Fehler aufgetreten ist. Sie müssen die Entwickler Präferenzen aktivieren, damit die logs in der Browser Konsole gezeigt werden. Für Dektopnutzer: <a href="https://developer.mozilla.org/de/docs/Einrichten_einer_Entwicklungsumgebung_f%C3%BCr_Erweiterungen#Entwicklungseinstellungen">Einrichten einer Entwicklungsumgebung für Erweiterungen</a>.</p>
+
+<p>Für eine Desktop-Umgebung nutzen Sie: <a href="/de/docs/XUL/School_tutorial/Eine_Entwicklungsumgebung_einrichten_Environment">Eine Entwicklungsumgebung einrichten</a>, für Mobile Geräte (Android/iOS) nutzen Sie: <a href="/de/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a>. Letztere verwendet die "Browser Toolbox" innerhalb der Dektop WebIDE, um auf dem Mobilgerät auftretende Fehler zu erkennen, nutzen Sie für Firefox OS auch die WebIDE.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Empfohlene_Vorgehensweisen"><span id="ouHighlight__0_13TO0_7">Empfohlene Vorgehensweisen</span></h3>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span class="highlight" id="ouHighlight__0_8TO0_3">Egal</span><span id="noHighlight_0.9527565672013398">, </span><span id="ouHighlight__10_12TO6_8">wie</span><span id="noHighlight_0.9263453430701603"> </span><span id="ouHighlight__14_16TO10_12">Sie</span><span id="noHighlight_0.20698839178159"> </span><span id="ouHighlight__26_27TO14_17">eine</span><span id="noHighlight_0.6200662748583877"> </span><span id="ouHighlight__29_37TO19_29">Erweiterung</span><span id="noHighlight_0.6728120070352871"> </span><span id="ouHighlight__18_24TO34_43">entwickeln</span><span id="noHighlight_0.4299495607061933">.</span><span id="noHighlight_0.7741888108021036"> </span><span id="ouHighlight__40_48TO46_49">Gibt</span><span id="noHighlight_0.5415096933419522"> es </span><span id="ouHighlight__50_53TO54_59">einige</span><span id="noHighlight_0.0720089039768479"> </span><span id="ouHighlight__55_64TO61_71">Richtlinien</span><span id="noHighlight_0.803657196413949">, denen </span><span id="ouHighlight__66_68TO78_80">Sie</span><span id="noHighlight_0.5984322114595474"> </span><span id="ouHighlight__74_79TO82_87">folgen</span><span id="noHighlight_0.12869484077400462"> </span><span id="ouHighlight__70_72TO89_94">können</span><span id="noHighlight_0.8370743591981885">, </span><span id="ouHighlight__81_82TO97_98">um</span><span id="noHighlight_0.6622236277215582"> </span><span id="ouHighlight__84_94TO100_114">sicherzustellen</span><span id="noHighlight_0.8564379951141409">, dass </span><span id="ouHighlight__96_99TO122_125">Ihre</span><span id="noHighlight_0.4459602478330692"> </span><span id="ouHighlight__101_109TO127_137">Erweiterung</span><span id="noHighlight_0.8961693769838563"> </span><span id="ouHighlight__128_128TO146_150">einem</span><span id="noHighlight_0.9686635232190152"> </span><span id="ouHighlight__130_133TO152_159">Benutzer eine möglichst gute Nutzererfahrung</span><span id="noHighlight_0.6251852022548666"> bietet</span><span id="ouHighlight__149_156TO174_180">.</span></div>
+
+<div></div>
+</div>
+
+<dl>
+ <dt><a href="/de/Add-ons/Performance_best_practices_in_extensions">Leistung</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div><span id="ouHighlight__9_12TO0_2">Die</span><span id="noHighlight_0.5269484393147706"> </span><span id="ouHighlight__14_22TO4_14">Erweiterung</span><span id="noHighlight_0.9292851327044691"> </span><span id="ouHighlight__24_25TO16_18">ist</span><span id="noHighlight_0.7115102572562606"> </span><span id="ouHighlight__27_30TO20_26">schnell</span><span id="noHighlight_0.9124290392126198">,</span><span id="noHighlight_0.8579411377226112"> </span><span id="ouHighlight__33_42TO29_42">reaktionsfähig</span><span id="noHighlight_0.14649752077292222"> </span><span id="ouHighlight__44_46TO44_46">und</span><span id="noHighlight_0.8931592573259234"> </span><span id="ouHighlight__48_64TO48_66">Speicher-effizient.</span></div>
+ </div>
+ </dd>
+ <dt><a href="/de/Add-ons/Security_best_practices_in_extensions">Sicherheit</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div><span id="noHighlight_0.7809287776294521">Die Erweiterung setzt den Nutzer keinen schädlichen Websites aus.</span></div>
+ </div>
+ </dd>
+ <dt><a href="/de/Add-ons/Extension_etiquette">Etikette</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <p><span id="ouHighlight__0_7TO0_13">Die Erweiterung arbeitet problemlos mit anderen Erweiterungen</span><span id="noHighlight_0.5275381715109507">.</span></p>
+ </div>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<h3 id="Anwendungsspezifische"><span id="ouHighlight__0_19TO0_20">Anwendungsspezifische</span></h3>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="noHighlight_0.28953880883995153">Der </span><span id="ouHighlight__0_3TO4_11">Großteil</span><span id="noHighlight_0.841644606651682"> </span><span id="ouHighlight__5_6TO13_15">der</span><span id="noHighlight_0.9945862029585774"> </span><span id="ouHighlight__12_24TO17_29">Dokumentation</span><span id="noHighlight_0.4540168435472163"> </span><span id="ouHighlight__26_32TO31_52">geht davon aus</span><span id="ouHighlight__34_39TO53_62">, dass Sie</span><span id="noHighlight_0.7684776301011831"> </span><span id="ouHighlight__52_54TO64_66">für</span><span id="noHighlight_0.4193207842861575"> </span><span id="ouHighlight__56_62TO68_74">Firefox</span><span id="noHighlight_0.9088718078539929"> </span><span id="ouHighlight__64_70TO76_82">Desktop</span><span id="noHighlight_0.49963813570432103"> </span><span id="ouHighlight__41_50TO84_93">entwickeln</span><span id="noHighlight_0.9909568108756502">.</span><span id="noHighlight_0.7634750581056711"> </span><span id="ouHighlight__73_74TO96_99">Wenn</span><span id="noHighlight_0.18227136516518694"> </span><span id="ouHighlight__76_81TO101_103">Sie</span><span id="noHighlight_0.7937397378231141"> </span><span id="ouHighlight__94_96TO105_107">für</span><span id="noHighlight_0.446034339567268"> </span><span id="ouHighlight__98_101TO109_114">einige</span><span id="noHighlight_0.6132288336308135"> </span><span id="ouHighlight__103_107TO116_121">andere</span><span id="noHighlight_0.4998320478574969"> </span><span id="ouHighlight__109_119TO123_136">Gecko-basierte</span><span id="noHighlight_0.9832400471917658"> </span><span id="ouHighlight__121_131TO138_146">Anwendung</span><span id="noHighlight_0.2489654801480421"> </span><span id="ouHighlight__83_92TO148_157">entwickeln</span><span id="noHighlight_0.5137074691361836">,</span><span id="noHighlight_0.52164172348249"> </span><span id="ouHighlight__134_142TO160_163">gibt</span><span id="noHighlight_0.5326594647041315"> es </span><span id="ouHighlight__144_148TO168_172">große</span><span id="noHighlight_0.49279966118057716"> </span><span id="ouHighlight__150_160TO174_185">Unterschiede</span><span id="noHighlight_0.00917762905149666">, über die Sie Bescheid wissen müssen</span>.</div>
+
+<div></div>
+</div>
+
+<dl>
+ <dt><a href="/de/Add-ons/Thunderbird">Thunderbird</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div><span class="highlight" id="ouHighlight__0_9TO0_10">Entwicklung</span><span id="noHighlight_0.8594649359455269"> von </span><span id="ouHighlight__11_20TO16_28">Erweiterungen</span><span id="noHighlight_0.808223459280189"> </span><span id="ouHighlight__22_24TO30_32">für</span><span id="noHighlight_0.1371760678355618"> </span><span id="ouHighlight__26_28TO34_36">den</span><span id="noHighlight_0.07522888675983863"> </span><span id="ouHighlight__30_40TO38_48">Thunderbird</span><span id="noHighlight_0.8486035940187313">-</span><span id="ouHighlight__42_45TO50_53">Mail</span><span id="noHighlight_0.47393784639771463">-</span><span id="ouHighlight__47_52TO55_60">Client</span><span id="noHighlight_0.1425177715644017">.</span></div>
+ </div>
+ </dd>
+ <dt><a href="/de/Add-ons/Firefox_for_Android">Firefox for Android</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div><span class="highlight" id="ouHighlight__0_9TO0_10">Entwicklung</span><span id="noHighlight_0.4886350776165175"> von </span><span id="ouHighlight__11_20TO16_28">Erweiterungen</span><span id="noHighlight_0.8972505665957908"> </span><span id="ouHighlight__22_24TO30_32">für</span><span id="noHighlight_0.7124573638197107"> </span><span id="ouHighlight__26_32TO34_40">Firefox</span><span id="noHighlight_0.21979868666214342"> </span><span id="ouHighlight__34_36TO42_44">für</span><span id="noHighlight_0.18709199135447352"> </span><span id="ouHighlight__38_44TO46_52">Android</span><span id="noHighlight_0.7186912318112938">.</span></div>
+ </div>
+ </dd>
+ <dt><a href="/de/Add-ons/SeaMonkey_2">SeaMonkey</a></dt>
+ <dd>
+ <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+ <div><span id="ouHighlight__0_9TO0_10">Entwicklung</span><span id="noHighlight_0.4353357474301892"> von </span><span id="ouHighlight__11_20TO16_28">Erweiterungen</span><span id="noHighlight_0.3231901619416755"> </span><span id="ouHighlight__22_24TO30_32">für </span><a href="http://www.seamonkey-project.org/">SeaMonkey</a><span id="noHighlight_0.8390064965105459"> </span><span id="ouHighlight__40_47TO44_51">Software</span><span id="noHighlight_0.4412931994597855">-</span><span id="ouHighlight__49_53TO53_57">Suite</span><span id="noHighlight_0.3284779725993763">.</span></div>
+ </div>
+ </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Themes_2"><a name="Themes">Themes</a></h2>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span class="highlight" id="ouHighlight__0_5TO0_5">Themen</span><span id="noHighlight_0.7091726869291386"> </span><span id="ouHighlight__7_9TO7_10">sind</span><span id="noHighlight_0.7158110424914277"> </span><span id="ouHighlight__11_17TO12_18">Add-ons</span><span id="ouHighlight__19_22TO19_23">, die</span><span id="noHighlight_0.7855084263475988"> </span><span id="ouHighlight__52_65TO25_42">Benutzeroberfläche</span><span id="noHighlight_0.14409582791714548"> </span><span id="ouHighlight__34_36TO44_46">der</span><span id="noHighlight_0.9733285273704742"> </span><span id="ouHighlight__38_50TO48_56">Anwendung</span><span id="noHighlight_0.8181555853832905"> </span><span id="ouHighlight__24_32TO58_65">anpassen</span><span id="noHighlight_0.20276572757547962">.</span><span id="noHighlight_0.2625807275944092"> </span><span id="ouHighlight__68_72TO68_69">Es</span><span id="noHighlight_0.40480842245991133"> </span><span id="ouHighlight__74_76TO71_74">gibt</span><span id="noHighlight_0.35580628877654075"> </span><span id="ouHighlight__78_80TO76_79">zwei</span><span id="noHighlight_0.6726631148974175"> </span><span id="ouHighlight__82_86TO81_85">Arten</span><span id="noHighlight_0.6951386979247874"> </span><span id="ouHighlight__88_89TO87_89">von</span><span id="noHighlight_0.1266225433530359"> </span><span id="ouHighlight__91_96TO91_96">Themen</span><span id="noHighlight_0.6480903868387894">:</span><span id="noHighlight_0.3826606478753982"> </span><span id="ouHighlight__99_109TO99_105">leichte</span><span id="noHighlight_0.6792783607305855"> </span><span id="ouHighlight__111_116TO107_112">Themen</span><span id="noHighlight_0.4933933862487505"> </span><span id="ouHighlight__118_120TO114_116">und</span><span id="noHighlight_0.376437195200402"> </span><span id="ouHighlight__122_129TO118_126">komplette</span><span id="noHighlight_0.6218638899327298"> </span><span id="ouHighlight__131_136TO128_133">Themen</span><span id="noHighlight_0.796731371924988">.</span></div>
+
+<div></div>
+</div>
+
+<div class="column-container">
+<div class="column-half">
+<p><a href="https://addons.mozilla.org/de/developers/docs/themes"><span class="highlight" id="ouHighlight__0_10TO0_6">Leichte</span><span id="noHighlight_0.8076423798904167"> </span><span id="ouHighlight__12_17TO8_13">Themen</span></a><span id="noHighlight_0.8955283939242232"> </span><span id="ouHighlight__19_21TO15_18">sind</span><span id="noHighlight_0.9476356229330717"> </span><span id="ouHighlight__23_26TO20_23">viel</span><span id="noHighlight_0.860282754437777"> </span><span id="ouHighlight__28_34TO25_33">einfacher</span><span id="noHighlight_0.582288824259858"> </span><span id="ouHighlight__36_37TO35_36">zu</span><span id="noHighlight_0.5216144599053265"> </span><span id="ouHighlight__39_47TO38_51">implementieren</span><span id="noHighlight_0.765565431708579"> </span><span id="ouHighlight__49_52TO53_55">als</span><span id="noHighlight_0.5166018447680067"> </span><span id="ouHighlight__54_61TO57_65">komplette</span><span id="noHighlight_0.40329506865457243"> </span><span id="ouHighlight__63_68TO67_72">Themen</span><span id="noHighlight_0.9061345100744131">,</span><span id="noHighlight_0.35463797060676616"> </span><span id="ouHighlight__71_73TO75_78">aber sie </span><span id="ouHighlight__75_81TO105_110">bieten</span><span id="noHighlight_0.4430890269706572"> </span><span id="ouHighlight__83_86TO80_83">sehr</span><span id="noHighlight_0.9701129855139587"> </span><span id="ouHighlight__88_94TO85_93">begrenzte</span><span id="noHighlight_0.6256824291356461"> </span><span id="ouHighlight__96_108TO95_103">Anpassung</span><span id="noHighlight_0.22200604584963135">s möglichkeiten </span><span id="noHighlight_0.2890287412664867">.</span></p>
+</div>
+
+<div class="column-half">
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><span id="ouHighlight__0_3TO0_2">Mit</span><span id="noHighlight_0.7117414737790739"> </span><a href="/de/docs/Themes"><span id="ouHighlight__5_12TO4_13">kompletten</span><span id="noHighlight_0.04497219750149328"> Themes</span><span id="noHighlight_0.900419536727446"> </span></a><span id="ouHighlight__25_32TO23_28">machen</span><span id="noHighlight_0.7218148045305813"> </span><span id="ouHighlight__21_23TO30_32">Sie</span><span id="noHighlight_0.4386707677328683"> </span><span id="ouHighlight__34_37TO34_37">viel</span><span id="noHighlight_0.6945682788019498"> </span><span id="ouHighlight__39_44TO39_46">tieferen</span><span id="noHighlight_0.02507011941532078"> </span><span id="ouHighlight__46_58TO48_57">Änderungen</span><span id="noHighlight_0.6993966692173353"> </span><span id="ouHighlight__60_61TO59_60">an</span><span id="noHighlight_0.5480234798726392"> </span><span id="ouHighlight__63_65TO62_64">der</span><span id="noHighlight_0.32801931360345093"> </span><span class="highlight" id="ouHighlight__79_80TO66_83">Benutzeroberfläche</span><span id="noHighlight_0.812546935384922"> der </span><span id="ouHighlight__67_77TO89_97">Anwendung</span><span id="noHighlight_0.35402061599221446">.</span><span id="noHighlight_0.3490873352351369"> </span><span id="ouHighlight__83_85TO100_102">Die</span><span id="noHighlight_0.5419638678279032"> </span><span id="ouHighlight__87_99TO104_116">Dokumentation</span><span id="noHighlight_0.4889522018065986"> </span><span id="ouHighlight__101_103TO118_120">für</span><span id="noHighlight_0.3147442304269288"> </span><span id="ouHighlight__105_112TO122_130">komplette</span><span id="noHighlight_0.7409278300021354"> </span><span id="ouHighlight__114_119TO132_137">Themes</span><span id="noHighlight_0.9310480698691203"> </span><span id="ouHighlight__121_122TO139_141">ist</span><span id="noHighlight_0.19504357656123383"> </span><span id="ouHighlight__131_134TO143_150">veraltet</span><span id="noHighlight_0.351278927378499">,</span><span id="noHighlight_0.7834788929649756"> </span><span id="ouHighlight__137_139TO153_156">aber</span><span id="noHighlight_0.23221578864327252"> </span><span id="ouHighlight__141_142TO158_160">ist</span><span id="noHighlight_0.2072200413320433"> </span><span id="ouHighlight__154_157TO162_165">hier</span><span id="noHighlight_0.48896474805878065"> </span><span id="ouHighlight__159_160TO167_169">als</span><span id="noHighlight_0.7927970407375282"> </span><span id="ouHighlight__162_162TO171_174">eine</span><span id="noHighlight_0.3640498873599233"> </span><span id="ouHighlight__164_171TO176_183">mögliche</span><span id="noHighlight_0.4694294791588658"> </span><span id="ouHighlight__173_177TO185_193">Grundlage</span><span id="noHighlight_0.7299930099582119"> </span><span id="ouHighlight__179_181TO195_197">für</span><span id="noHighlight_0.08697375973628907"> </span><span id="ouHighlight__183_189TO199_211">aktualisierte</span><span id="noHighlight_0.4713024466741753"> </span><span id="ouHighlight__191_203TO213_225">Dokumentation</span><span id="noHighlight_0.9536066369584425"> </span><span id="ouHighlight__144_149TO227_235">verbunden</span><span id="noHighlight_0.8079093729885053">.</span></div>
+</div>
+</div>
+</div>
+
+<h2 id="Andere_Arten_von_Add-ons">Andere Arten von Add-ons</h2>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><a href="/de/docs/Creating_OpenSearch_plugins_for_Firefox">Search engine plugins</a><span id="noHighlight_0.19786193015987918"> </span><span id="ouHighlight__22_24TO20_23">sind</span><span id="noHighlight_0.4042654635760823"> </span><span id="ouHighlight__26_26TO25_28">eine</span><span id="noHighlight_0.013331733575812854"> </span><span id="ouHighlight__28_33TO30_37">einfache</span><span id="noHighlight_0.3357292309767407"> </span><span id="ouHighlight__35_37TO39_41">und</span><span id="noHighlight_0.6906528779067063"> </span><span id="ouHighlight__39_42TO43_46">sehr</span><span id="noHighlight_0.795727328148957"> </span><span id="ouHighlight__44_51TO48_58">spezifische</span><span id="noHighlight_0.3885277082041798"> </span><span id="ouHighlight__53_56TO60_62">Art</span><span id="noHighlight_0.9928546588503686"> </span><span id="ouHighlight__58_59TO64_66">von</span><span id="noHighlight_0.05442968422145267"> </span><span id="ouHighlight__61_66TO68_73">Add-on</span><span id="noHighlight_0.23935903302768258">:</span><span id="noHighlight_0.3205499902071268"> </span><span id="ouHighlight__69_72TO76_78">sie</span><span id="noHighlight_0.7641452782587046"> </span><span id="ouHighlight__78_80TO80_83">fügen neue</span><span id="noHighlight_0.25923348582678285"> </span><span id="ouHighlight__82_95TO85_97">Suchmaschinen</span><span id="noHighlight_0.40861143856459026"> </span><span id="ouHighlight__97_98TO99_100">zu</span><span id="noHighlight_0.9796185082863216"> </span><span id="ouHighlight__100_102TO102_104">den</span><span id="noHighlight_0.9744248881763996"> </span><span id="ouHighlight__104_112TO106_112">Browser</span><span id="noHighlight_0.238452498937324">-</span><span id="ouHighlight__114_124TO114_123">Suchleiste</span><span id="noHighlight_0.6935225429152729"> </span><span id="ouHighlight__74_76TO125_134">hinzu</span><span id="noHighlight_0.8712683010470288">.</span></div>
+
+<div></div>
+</div>
+
+<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
+<div><strong><a href="/de/docs/Plugins">Plugins</a></strong><span id="noHighlight_0.308275920971552"> </span><span id="ouHighlight__8_11TO8_13">helfen</span><span id="noHighlight_0.005012862116077099"> </span><span id="ouHighlight__13_15TO15_17">den</span><span id="noHighlight_0.5836467766155674"> </span><span id="ouHighlight__17_27TO19_27">Anwendung</span><span id="noHighlight_0.5622831932929843"> den </span><span id="ouHighlight__40_46TO29_34">Inhalt</span><span id="noHighlight_0.0759762703159298"> zu </span><span id="ouHighlight__29_38TO39_47">verstehen</span><span id="ouHighlight__48_51TO48_52">, die</span><span id="noHighlight_0.9410264063356472"> </span><span id="ouHighlight__61_63TO54_58">nicht</span><span id="noHighlight_0.027592567795727163"> </span><span id="ouHighlight__65_72TO60_64">nativ</span><span id="noHighlight_0.1596520819365158"> </span><span id="ouHighlight__74_80TO66_76">unterstützt</span><span id="noHighlight_0.35445393961131644"> </span><span id="ouHighlight__56_59TO78_81">werden</span><span id="noHighlight_0.20435452023787382">.</span><span id="noHighlight_0.6269652232383389"> </span><span id="ouHighlight__83_84TO84_86">Wir</span><span id="noHighlight_0.4575597174820274"> </span><span id="ouHighlight__86_88TO88_91">sind</span><span id="noHighlight_0.9182470995338107"> </span><span id="ouHighlight__90_106TO93_97">dabei</span><span id="noHighlight_0.2323513020812058"> </span><span id="ouHighlight__108_118TO99_108">ablehnend</span><span id="noHighlight_0.18013907391857142"> Plugins zu </span><span id="ouHighlight__120_126TO110_122">Supporten</span><span id="noHighlight_0.8477490172852702">, </span><span id="ouHighlight__147_148TO143_144">da</span><span id="noHighlight_0.6743600132620321"> </span><span id="ouHighlight__150_153TO146_148">sie</span><span id="noHighlight_0.4732348168075391"> </span><span id="ouHighlight__160_160TO150_153">eine</span><span id="noHighlight_0.03990327193490939"> </span><span id="ouHighlight__162_168TO155_164">Geschichte</span><span id="noHighlight_0.053116464521166584"> </span><span id="ouHighlight__170_171TO166_168">der</span><span id="noHighlight_0.9308770254849978"> </span><span id="ouHighlight__181_189TO170_179">Stabilität</span><span id="noHighlight_0.053022201910917444">,</span><span id="noHighlight_0.9255764685927823"> </span><span id="ouHighlight__192_202TO182_189">Leistung</span><span id="noHighlight_0.2685633189745187"> </span><span id="ouHighlight__205_207TO191_193">und</span><span id="noHighlight_0.10023133462949951"> </span><span id="ouHighlight__218_225TO195_213">Sicherheitsprobleme</span><span id="noHighlight_0.7081075791010901"> </span><span id="ouHighlight__173_179TO215_224">verursacht</span><span id="noHighlight_0.26674105625618405"> </span><span id="ouHighlight__155_158TO226_230">haben</span><span id="noHighlight_0.03774240860132083">.</span></div>
+</div>
+
+<h2 id="Inhalt">Inhalt</h2>
+
+<ol>
+ <li><a href="/de/Add-ons/Overlay_Extensions" title="Overlay extensions">Overlay Erweiterung</a></li>
+ <li><a href="/de/Add-ons/Bootstrapped_extensions" title="Restartless extensions">Restartless Erweiterung</a></li>
+ <li><a href="/de/Add-ons/SDK">Add-on SDK</a></li>
+ <li><a href="#">Erweiterung  Bewährte</a>
+  <ol>
+   <li><a href="/de/Add-ons/Performance_best_practices_in_extensions" title="Performance">Leistung</a></li>
+   <li><a href="/de/Add-ons/Security_best_practices_in_extensions" title="Security">Sicherheit</a></li>
+   <li><a href="/de/Add-ons/Extension_etiquette" title="Etiquette">Etikette</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Themes</a>
+  <ol>
+   <li><a href="https://addons.mozilla.org/de/developers/docs/themes" title="Lightweight themes">Leichte Themes</a></li>
+   <li><a href="/de/docs/Themes" title="Complete themes">Komplete Themes</a></li>
+  </ol>
+ </li>
+ <li><a href="#">Veröffentlichung Add-ons</a>
+  <ol>
+   <li><a href="https://addons.mozilla.org/" title="addons.mozilla.org">addons.mozilla.org</a></li>
+   <li><a href="/de/docs/Mozilla/Add-ons/Add-on_guidelines">Add-on Richtlinien</a></li>
+  </ol>
+ </li>
+</ol>
diff --git a/files/de/mozilla/add-ons/performance_best_practices_in_extensions/index.html b/files/de/mozilla/add-ons/performance_best_practices_in_extensions/index.html
new file mode 100644
index 0000000000..5a1c7e8052
--- /dev/null
+++ b/files/de/mozilla/add-ons/performance_best_practices_in_extensions/index.html
@@ -0,0 +1,156 @@
+---
+title: Best Practice für Performance in Erweiterungen
+slug: Mozilla/Add-ons/Performance_best_practices_in_extensions
+tags:
+  - Add-ons
+  - Best Practice
+  - Erweiterungen
+  - Leitfaden
+  - Performanz
+translation_of: Archive/Add-ons/Performance_best_practices_in_extensions
+---
+<p>Einer der größten Vorteile von Firefox ist seine Erweiterbarkeit. Erweiterungen können beinahe jede beliebige Funktion erfüllen. Doch dieses Konzept hat einen Nachteil: Eine schlecht geschriebene Erweiterung kann sich stark negativ auf das Nutzungserlebnis auswirken, und auch zu allgemeinen Leistungseinbußen in Firefox führen. Der folgende Artikel soll eine Reihe von Vorschlägen liefern, um die Leistung und Geschwindigkeit Deiner Erweiterung zu erhöhen, und dadurch auch von Firefox selbst.</p>
+
+<h2 id="Die_Startup_Leistung_Verbessern">Die Startup Leistung Verbessern</h2>
+
+<p>Erweiterungen werden immer dann geladen und gestartet, wenn eine neues Browser Fenster geöffnet wird. Im Umkehrschluss bedeutet das aber, dass Deine Erweiterung einen direkten Einfluss darauf hat, wie lange ein Benutzer beim Laden einer neuen Seite warten muss. Es gibt mehrere Möglichkeiten, die Startzeit Deiner Erweiterung zu optimieren und somit die Verzögerung für den Endbenutzer zu minimieren.</p>
+
+<h3 id="Lade_nur_was_nötig_ist">Lade nur, was nötig ist</h3>
+
+<p>Lade keine Ressourcen beim Startup, die nicht direkt benötigt werden. Das sind Daten, die erst nach einer Benutzerinteraktion, etwa ein Klick auf einen Button, benötigt werden, oder Daten die nur bei bestimmten Einstellungen zum Tragen kommen. Auch wenn Deine Erweiterung Features anbietet, die nur funktionieren wenn der Benutzer sich in ein Service eingeloggt hat, lade die Ressourcen für diese Features erst beim tatsächlichen Login.</p>
+
+<h3 id="Nutze_JavaScript_Code_Module">Nutze JavaScript Code Module</h3>
+
+<p>Du kannst Teile deiner Erweiterung in <a href="/de/docs/Mozilla/JavaScript_code_modules/Using" title="/en-US/docs/Mozilla/JavaScript_code_modules/Using">JavaScript code modules</a> kapseln. Diese Module können zur Laufzeit bei Bedarf geladen werden und reduzieren somit den Ladeaufwand zum Programmstart.</p>
+
+<p>Die JavaScript Code Module bieten hier einen Vorteil gegenüber XPCOM Modulen, die immer zu Beginn geladen werden.</p>
+
+<p>Natürlich hängt es von der Komplexität der Erweiterung ab, ob eine Modularisierung des Codes sinnvoll ist.</p>
+
+<h3 id="Verschiebe_alles_was_verschoben_werden_kann">Verschiebe alles, was verschoben werden kann</h3>
+
+<p>Die meisten Erweiterungen fangen das load event eines Fensters ab, um ihren Startup Code auszuführen. Hier sollte so wenig wie möglich getan werden. Das Browser Fenster wird so lange blockiert, bis der load Handler deiner Erweiterung abgeschlossen ist. Das bedeutet, je länger die Erweiterung dafür braucht, desto langsamer wirkt Firefox für den Benutzer.</p>
+
+<p>Jede Operation, die nicht sofort ausgeführt werden muss, kann mittels einem {{ interface("nsITimer") }} oder mit der {{ domxref("window.setTimeout()") }} Funktion für einen späteren Zeitpunkt geplant werden. Sogar kurze Verzögerungen in diesem Programmbereich können eine große Auswirkung auf die Ladegeschwindigkeit haben.</p>
+
+<h2 id="General_Performance_Tips">General Performance Tips</h2>
+
+<h3 id="Vermeide_Speicherlecks">Vermeide Speicherlecks</h3>
+
+<p>Speicherlecks können die Leistung deiner Erweiterung stark reduzieren, weil sie dafür sorgen, dass der Garbage Collector und der Cycle Collector mehr Arbeit haben.</p>
+
+<p>Sogenannte Zombiebereiche sind eine Form von Speicherlecks, die Du selbst sehr einfach entdecken und verhindern kannst. Lies dazu den Artikel zu <a href="/de/Zombie_compartments" title="en/Zombie_compartments">Zombie compartments</a>, speziell die Sektion <a href="/de/Zombie_compartments#Proactive_checking_of_add-ons" title="en/Zombie_compartments#Proactive_checking_of_add-ons">Proactive checking of add-ons</a>.</p>
+
+<p>Im Artikel <a href="/de/Extensions/Common_causes_of_memory_leaks_in_extensions" title="en/Extensions/Common_causes_of_zombie_compartments_in_extensions">Common causes of memory leaks in extensions</a> werden weitere Möglichkeiten, wie Du Zombiebereiche und andere Formen von Speicherlecks verhindern kannst, besprochen.</p>
+
+<p>Neben der direkten Suche nach den oben genannten Lecks solltest Du auch allgemein ein Auge auf die Speichernutzung deines Addons haben und regelmäßig unter about:memory überprüfen. Als Beispiel sei <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=719601" title="https://bugzilla.mozilla.org/show_bug.cgi?id=719601">bug 719601</a> genannt, bei dem ein "System Principal" JavaScript Bereich auf mehrere 100 MB an Speicher anwuchs, was <em>sehr</em> viel größer ist als im Regelfall.</p>
+
+<h3 id="Nutze_JavaScript_Module">Nutze JavaScript Module</h3>
+
+<p>JavaScript Module verhalten sich wie jeder andere JavaScript Code, mit dem feinen Unterschied, dass sie als Singletons agieren und daher von Firefox in den Cache abgelegt werden können. Dadurch können sie beim nächsten Start sehr viel effizienter geladen werden. Wann immer deine Erweiterung JavaScript Code von einem {{ HTMLElement("script") }} Element lädt, solltest du überlegen, stattdessen ein JavaScript Modul zu nutzen. Weitere Information über JavaScript Module und ihre Verwendung werden im Artikel <a href="/de/docs/Mozilla/JavaScript_code_modules/Using" title="/en-US/docs/Mozilla/JavaScript_code_modules/Using">Using JavaScript Code Modules</a> besprochen.</p>
+
+<h3 id="Vermeide_Langsamen_CSS_Code">Vermeide Langsamen CSS Code</h3>
+
+<ul>
+ <li>Lies den Leitfaden <a href="/de/CSS/Writing_Efficient_CSS" title="en/CSS/Writing_Efficient_CSS">"writing efficient CSS"</a></li>
+ <li>Beachte, dass jeder Selektor, der auf viele unterschiedliche Knoten zutreffen könnte, eine Quelle von Ineffizienz darstellen kann, entweder während dem Matching oder beim Verarbeiten von Updates. Das ist speziell in letzterem Fall problematisch, wenn der Selektor dynamisch zutreffen könnte oder nicht. Ein unqualifiziertes ":hover" sollte vermieden werden wie die Pest.</li>
+</ul>
+
+<h3 id="Vermeide_DOM_Mutation_Event_Listeners">Vermeide DOM Mutation Event Listeners</h3>
+
+<p>Durch das Hinzufügen eines DOM Mutation Listeners in einem Dokument werden die meisten DOM Mutation Optimierungen deaktiviert und die Performanz von weiteren Änderungen der DOM-Struktur des Dokuments wird <a href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1">stark herabgesetzt</a>. Des weiteren kann dieser Effekt durch das Deaktivieren eines Mutation Listeners nicht wieder rückgängig gemacht werden. Die folgenden Events sollten daher strikt vermieden werden: <code>DOMAttrModified</code>, <code>DOMAttributeNameChanged</code>, <code>DOMCharacterDataModified</code>, <code>DOMElementNameChanged</code>, <code>DOMNodeInserted</code>, <code>DOMNodeInsertedIntoDocument</code>, <code>DOMNodeRemoved</code>, <code>DOMNodeRemovedFromDocument</code>, <code>DOMSubtreeModified</code></p>
+
+<p>Weitere Information zu diesen veralteten Events findest Du im Artikel <a href="/de/docs/Web/Guide/DOM/Events/Mutation_events" title="en-US/docs/Web/Guide/DOM/Events/Mutation_events">Mutation events</a>. Stattdessen sollten <a href="/de/docs/Web/API/MutationObserver" title="en-US/docs/Web/API/MutationObserver">Mutation Observers</a> benutzt werden.</p>
+
+<h3 id="Benutze_Lazy_Load_für_Services">Benutze Lazy Load für Services</h3>
+
+<p>Das JavaScript Modul <a href="/de/JavaScript_code_modules/XPCOMUtils.jsm#Methods">XPCOMUtils</a> bietet zwei Möglichkeiten für Lazy Loading:</p>
+
+<ul>
+ <li><code>defineLazyGetter()</code> definiert eine Getter-Funktion für ein bestimmtes Objekt, die erst bei der erstmaligen Verwendung angelegt wird. <a href="http://mxr.mozilla.org/mozilla-central/search?string=defineLazyGetter">Beispiele</a>.</li>
+ <li><code>defineLazyServiceGetter()</code> definiert eine Funktion für ein bestimmtes Objekt, die als Getter für ein Service fungiert. Das Service wird dabei erst aktiviert, wenn es zum ersten Mal benutzt wird. {{ LXRSearch("ident", "string", "defineLazyServiceGetter", "Lies den Quellcode") }} für Beispiele.</li>
+</ul>
+
+<p>Seit Firefox 4.0 werden viele übliche Services bereits in <a href="/de/JavaScript_code_modules/Services.jsm" title="en/JavaScript_code_modules/Services.jsm">Services.jsm</a> gecached.</p>
+
+<h3 id="Reduziere_File_IO">Reduziere File I/O</h3>
+
+<p>TODO: Hier fehlen Beispiele, wie etwa Links zu Code, Bugs, oder Docs.</p>
+
+<ul>
+ <li>Wenn du mit Firefox 3.6 und darunter kompatibel sein willst, oder wenn du <code>em:unpack</code> benutzt, verwende chrome JARs!</li>
+ <li>Kombiniere dein CSS</li>
+ <li>Kombiniere deine Einstellungsseiten</li>
+ <li>Kombiniere Schnittstellen in eine einzelne .idl Datei, um xpt Dateien zu reduzieren</li>
+ <li>Kombiniere Toolbar Icons in eine einzelne Datei</li>
+</ul>
+
+<h3 id="Benutze_die_Richtige_Kompressionsstufe_für_JAR_und_XPI_Dateien">Benutze die Richtige Kompressionsstufe für JAR und XPI Dateien</h3>
+
+<p>Daten von komprimierten Archiven zu lesen ist zeitaufwändig. Je stärker ein Archiv komprimiert ist, desto mehr Aufwand muss auch für das Lesen der darin befindlichen Daten erbracht werden. Daher sollten alle JAR Dateien in deiner Erweiterung mit Kompressionslevel 0 (keine Kompression) gepackt werden. Es mag kontraproduktiv klingen, aber dadurch wird zwar die Dateigröße der JAR Datei erhöht, die Größe der XPI Datei aber <em>reduziert</em>, weil dadurch die Möglichkeit gegeben ist, dass beim Komprimiered der XPI Datei Kompressionen der einzelnen im JAR enthaltenen Dateien stattfinden können. (Das kann als eine Art <a href="https://de.wikipedia.org/wiki/Progressive_Kompression">progressive Kompression</a> bezeichnet werden).</p>
+
+<p>Wenn deine Erweiterung nicht explizit <code>em:unpack</code> verwendet, wird das XPI file ab Firefox 4 nicht entpackt, sondern direkt genutzt. Aus diesem Grund ist eine niedrige Kompressionsstufe zu bevorzugen, wobei wir zu Kompressionslevel 1 raten. Selbst im Vergleich mit maximaler Kompression wird dadurch die Größe des Downloads nur geringfügig angehoben.</p>
+
+<h3 id="Benutze_asynchrone_IO">Benutze asynchrone I/O</h3>
+
+<p>Diese Regel kann nicht oft genug wiederholt werden: Benutze niemals synchrone I/O in einem GUI Thread.</p>
+
+<ul>
+ <li>Benutze keine synchronen XMLHttpRequests (XHR). Verwende stattdessen asynchrone Anfragen und zeige dem Benutzer ein Ladesymbol oder eine Nachricht, falls es zu Wartezeiten kommt.</li>
+ <li>Hilfsfunktionen für asynchrones Lesen und Kopieren von Dateien werden von <a href="/de/JavaScript_code_modules/NetUtil.jsm" title="en/JavaScript_code_modules/NetUtil.jsm">NetUtils.jsm</a> bereitgestellt.</li>
+ <li>Greife niemals synchron auf eine SQLite Datenbank zu. Benutze stattdessen die <a href="/de/Storage#Asynchronously">asynchrone API</a>.</li>
+</ul>
+
+<h3 id="Unnötige_Verwendung_von_onreadystatechange_in_XHR">Unnötige Verwendung von onreadystatechange in XHR</h3>
+
+<p>Für die meisten Anwendungsfälle sind <code>addEventListener</code>(load/error) und/oder xhr.onload/.onerror völlig ausreichend und bieten den Vorteil, dass sie nur einmal aufgerufen werden, im Gegensatz zu <code>onreadystatechange</code>. In vielen Fällen wird <code>onreadystatechange</code> aus Kompatibilitätsgründen verwendet, wenn XHR in einer Webseite verwendet wird. Das ist oft auchreichend, um Ressourcen zu laden oder Fehler zu behandeln. Allerdings werden load/error Event Listener viel seltener aufgerufen als <code>onreadystatechange</code>, genauer gesagt nur einmal, und es ist nicht notwendig jedes mal den <code>readyState</code>  zu überprüfen oder herauszufinden, ob es sich um ein error Event handelt. <code>onreadystatechange</code> sollte nur benutzt werden, wenn es notwendig ist, eine Antwort noch während ihrem Einlangen zu behandeln.</p>
+
+<h3 id="Entferne_Event_Listeners">Entferne Event Listeners</h3>
+
+<p>Entferne Event Listener, wenn sie nicht mehr benötigt werden. Es ist viel effizienter, Event Listener zu entfernen, als sie etwa durch Flags zu deaktivieren; denn bei zweiterem Ansatz muss bei jedem auftretenden Event die Flag abgefragt werden. Konstrukte wie <code>function onMouseOver(evt) { if (is_active) { /* doSomeThing */ } }</code> sollten also vermieden werden. Auch "Einmal-Events" sollten danach wieder deaktiviert werden:</p>
+
+<pre class="brush: js"> function init() {
+   var largeArray;
+   addEventListener('load', function onLoad() {
+        removeEventListener('load', onLoad, true);
+        largeArray.forEach();
+ }, true);
+</pre>
+
+<p>Andernfalls kann es vorkommen, dass Closure Objekte des Listeners weiter referenziert werden (in obigem Beispiel die Variable <code>largeArray</code>). Der Listener wird dadurch weit über seine nötige Lebensdauer im Speicher gehalten.</p>
+
+<h3 id="Befülle_Menüs_nach_Bedarf">Befülle Menüs nach Bedarf</h3>
+
+<p>Befülle Kontextmenüs (page, tabs, tools) nur nach Bedarf und reduziere Berechnungen auf ein Minimum, um die Reaktionsgeschwindigkeit der UI zu erhalten. Es ist nicht notwendig, bei jeder Änderung das gesamte Menü neu zu befüllen. Diese Aufgabe kann warten, bis der Benutzer das Menü tatsächlich verwenden will. Füge einen Listener für das "popupshowing" Event hinzu und erstelle/befülle das Kontextmenü dort.</p>
+
+<h3 id="Vermeide_Maus-Bewegungs-Events">Vermeide Maus-Bewegungs-Events</h3>
+
+<p>Vermeide die Verwendung von Mausbewegungsevents (enter, over, exit) oder minimiere zumindest die Berechnungen, die beim Auslösen eines solchen Events durchgeführt werden auf ein Minimum. Solche Events, besonders das <code>mouseover</code> Event, treten überlichweise sehr häufig auf. Es wird geraten, im Eventhandler nur neue Information zu speichern und die Berechnung erst dann auszuführen, wenn der Benutzer sie benötigt (zum Beispiel bei einem <code>popupshowing</code> Event). Vergiss auch nicht darauf, nicht mehr benötigte Event Listener auszuschalten (siehe oben).</p>
+
+<h3 id="Vermeide_Polling">Vermeide Polling</h3>
+
+<p>Benutze die {{ interface("nsIObserverService") }} Funktion stattdessen. Jede Erweiterung darf via {{ interface("nsIObserverService") }} eigene Benachrichtigungen versenden, aber die wenigsten benutzen diese Funktionalität. Auch viele andere Services bieten Funktionalität zur Beobachtung, etwa nslPrefBranch2.</p>
+
+<h3 id="aPNGaGIF_sind_oft_nicht_zu_Empfehlen">aPNG/aGIF sind oft nicht zu Empfehlen</h3>
+
+<p>Animationen benötigen viel Ladezeit, weil eine große Anzahl an Bildern dekodiert werden muss (die Frames der Animation). Animierte Bilder werden häufig aus dem Cache entfernt, was dazu führt, dass sie immer wieder neu geladen werden müssen. Besonders anfällig dafür ist {{ interface("nsITree") }} / {{ XULElem("tree") }}, das unter manchen Umständen gar kein Caching betreibt.</p>
+
+<h3 id="base64md5sha1_Implementierungen">base64/md5/sha1 Implementierungen</h3>
+
+<p>Verwende keine eigenen base64/md5/sha1 Implementierungen. Die eingebauten Funktionen für base64 <code>atob</code>/<code>btoa</code> sind völlig ausreichend und können in overlay Scripts sowie in JavaScript Modulen verwendet werden. Hashes können mit {{ interface("nsICryptoHash") }}, berechnet werden, das entweder einen String oder {{ interface("nsIInputStream") }} akzeptiert.</p>
+
+<h3 id="Image_sprites">Image sprites</h3>
+
+<p>Mehrere Bilder können in ein Sprite kombiniert werden. Siehe {{ cssxref("-moz-image-region") }}. Die meisten XUL Widgets, die zum Anzeigen von Bildern verwendet werden können (inklusive {{ XULElem("button") }} und {{ XULElem("toolbarbutton") }}) erlauben auch die Verwendung von {{ cssxref("list-style-image") }}. Vermeide die Benutzung der <code>imagesrc</code>/<code>src</code> Attribute für die einbettung von Bildern.</p>
+
+<h3 id="Verwende_Chrome_Workers">Verwende Chrome Workers</h3>
+
+<p>Für lange andauernde Berechnungen oder Datenverarbeitung kann {{ domxref("ChromeWorker") }} verwendet werden.</p>
+
+<h2 id="Weiterführende_Links">Weiterführende Links</h2>
+
+<ul>
+ <li><a href="/en/Performance/Measuring_add-on_startup_performance" title="en/Measuring Add-on Startup Performance">Measuring Add-on Startup Performance</a></li>
+ <li><a class="external" href="http://blog.mozilla.com/addons/2010/06/14/improve-extension-startup-performance/" title="http://blog.mozilla.com/addons/2010/06/14/improve-extension-startup-performance/">How to Improve Extension Startup Performance</a></li>
+ <li><a href="/en-US/docs/Performance">General information about measuring and improving performance in Mozilla code</a></li>
+</ul>
diff --git a/files/de/mozilla/add-ons/sdk/builder/index.html b/files/de/mozilla/add-ons/sdk/builder/index.html
new file mode 100644
index 0000000000..d243acec45
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/builder/index.html
@@ -0,0 +1,16 @@
+---
+title: Builder
+slug: Mozilla/Add-ons/SDK/Builder
+tags:
+  - builder
+translation_of: Archive/Add-ons/Add-on_SDK/Builder
+---
+<p>Der Add-on Builder war ein web-basiertes Entwicklungssystem welches Entwicklern erlaubt hat, mit den SDK APIs Addons zu erstellen ohne das cfx Kommando-Zeilen-Tool verwenden zu müssen. Es wurde am 1. April 2014 eingestellt und jetzt leitet es auf die builder.addons.mozilla.org-Seite weiter.<br>
+ <br>
+ Falls sie bisher das SDK nur über den Builder verwendet haben, wissen sie bereits das meiste, das sie benötigen um direkt mit dem SDK arbeiten zu können. Die <a href="/en-US/Add-ons/SDK/High-Level_APIs">high-level</a> und <a href="/en-US/Add-ons/SDK/Low-Level_APIs">low-level</a> APIs, die für Builder Addons verwendet wurden sind jeweils die gleichen. Mit folgenden Schritten können sie zum SDK wechseln:</p>
+
+<ul>
+ <li>installieren sie <a href="/de/Add-ons/SDK/Tutorials/Installation">das SDK lokal</a></li>
+ <li>machen sie sich mit dem cfx Kommando-Zeilen-Tool mit Hilfe dieser <a href="/de/Add-ons/SDK/Tutorials/Getting_started">Einführung</a> und der  <a href="/de/Add-ons/SDK/Tools/cfx">detailierten <code>cfx</code> Referenz </a>vertraut</li>
+ <li>lernen sie die <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json</a> Datei zum Konfigurieren ihres Add-On kennen</li>
+</ul>
diff --git a/files/de/mozilla/add-ons/sdk/guides/content_scripts/index.html b/files/de/mozilla/add-ons/sdk/guides/content_scripts/index.html
new file mode 100644
index 0000000000..a94176f2cb
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/guides/content_scripts/index.html
@@ -0,0 +1,484 @@
+---
+title: Content Scripts
+slug: Mozilla/Add-ons/SDK/Guides/Content_Scripts
+translation_of: Archive/Add-ons/Add-on_SDK/Guides/Content_Scripts
+---
+<article id="wikiArticle">
+<p><span class="seoSummary">Viele Add-ons müssen den Inhalt von Webseiten modifizieren oder auf diesen zugreifen können. Der Grundcode des Add-on  bekommt aber keinen direkten Zugriff auf Webinhalte. Stattdessen müssen SDK Add-ons den Code,  der Zugriff auf Webinhalte erhält in seperate Skripte auslagern, die sogenannten "Content Scripts". Diese Seite beschreibt wie man Content Scripts entwickelt und diese implementiert. </span></p>
+
+<p>Content Scripts sind einer der verwirrenderen Aspekte beim Arbeiten mit der SDK, aber Sie werden mit Sicherheit mit ihnen arbeiten müssen. Es gibt fünf grundlegende Prinzipien:</p>
+
+<ul>
+ <li>Der Grundcode des Add-ons, wie zum Beispiel "main.js" und andere module im "lib" Verzeichnis, können die <a href="/de/Add-ons/SDK/High-Level_APIs">high-level</a> und <a href="/de/Add-ons/SDK/Low-Level_APIs">low-level</a> APIs benutzen, aber nicht direkt auf Webinhalte zugreifen.</li>
+ <li>Content Skripts <a href="/de/Add-ons/SDK/Guides/Two_Types_of_Scripts#API_Access_for_Add-on_Code_and_Content_Scripts">können keine SDK APIs</a> ( kein Zugang zu <code>exports</code>, <code>require</code>), dafür aber auf Webinhalte zugreifen.</li>
+ <li>SDK APIs, die Content Skripts verwenden, wie zum Beispiel <a href="/de/Add-ons/SDK/High-Level_APIs/page-mod">page-mod</a> und <a href="/de/Add-ons/SDK/High-Level_APIs/tabs">tabs</a>, bieten Funktionen die es dem Grundcode des Add-ons ermöglichen Content Skripts  in eine Weebseite zu laden.</li>
+ <li>Content Skripts können als Strings geladen werden, werden aber öfter in seperaten Dateien im Add-on Ordner "data" abgespeichert. Jpm erzeugt keinen "data" Ordner, daher muss dieser manuell hinzugefügt werden und ihr Content Scrikt dort abgespeichert werden.</li>
+ <li>Eine Nachricht übertragende API erlaubt es dem Grundcode und dem Content Skript miteinander zu kommunizieren.</li>
+</ul>
+
+<p>Dieses komplette Add-on zeigt alle diese Prinzipien. Die "main.js" hängt ein Content Skript an den aktuellen Tab, mittels den <a href="/de/Add-ons/SDK/High-Level_APIs/tabs">tabs </a>Modules, an. In diesem Fall wird der Content Skript in Form eines Strings übergeben. Das Content Skript ersetzt einfach nur den Inhalt der Seite:</p>
+
+<pre class="brush: js">// main.js
+var tabs = require("sdk/tabs");
+var contentScriptString = 'document.body.innerHTML = "&lt;h1&gt;Diese Seite wurde aufgegessen&lt;/h1&gt;";'
+
+tabs.activeTab.attach({
+  contentScript: contentScriptString
+});</pre>
+
+<p>Die folgenden high-level SDK Module können Content Skripts benutzen, um Webseiten zu bearbeiten:</p>
+
+<ul>
+ <li><a href="/de/Add-ons/SDK/High-Level_APIs/page-mod">page-mod</a>: Erlaubt es Ihnen Content Skripts bei Webseiten, die mit einem bestimmten URL Muster übereinstimmen, einzusetzen.</li>
+ <li><a href="/de/Add-ons/SDK/High-Level_APIs/tabs">tabs</a>: Exportiert ein Tab Objekt um mit einem Browser Tab zu arbeiten.Das Tab Objekt beinhaltet eine Funktion <a href="/de/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"><code>attach()</code></a> um dem Skript Content Skripte anzuhängen.</li>
+ <li><a href="/de/Add-ons/SDK/High-Level_APIs/page-worker">page-worker</a>:  Lässt Sie eine Webseite erhalten ohne diese anzuzeigen. Sie können diesen Seiten Content Skripte anhängen, die DOM der Seite erreichen oder diese maniulieren.</li>
+ <li><a href="/de/Add-ons/SDK/High-Level_APIs/context-menu">context-menu</a>: Hiermit können Sie ein Content Skript benutzen um mit einer Seite zu interagieren, in der das Menü aufgerufen ist.</li>
+</ul>
+
+<p>Zusätzlich sind manche SDK Benutzeroberflächen Komponenten - Panel, Sidebar, frames - darauf ausgelegt HTML zu benutzen und haben deshalb seperate Skripte um mit ihrem Inhalt zu interagieren. In vielen Punkten sind diese Skripte wie Content Skripte, aber dies ist nicht Teil dieses Artikels. Um mehr über die Interaktion des Inhalts eines Benutzeroberflächenmoduls zu erfahren, schauen Sie sich die modulspezifischen Dokumentationen: <a href="/de/Add-ons/SDK/High-Level_APIs/panel">panel</a>, <a href="/de/Add-ons/SDK/Low-Level_APIs/ui_sidebar">sidebar</a>, <a href="/de/Add-ons/SDK/Low-Level_APIs/ui_frame">frame </a>an.</p>
+
+<p>Fast alle diese Beispiele, die in dieser Anleitung präsentiert werden, sind als komplette, aber minimalistische, Add-ons in der<a href="https://github.com/mdn/addon-sdk-content-scripts"> addon-sdk-content-scripts repository</a> auf Github vorhanden.</p>
+
+<h2 id="Content_Skripts_laden">Content Skripts laden</h2>
+
+<article id="wikiArticle">
+<p>Sie können ein einzelnes Skript laden, indem Sie einen String an die <code>contentScript</code> oder die <code>contentScriptFile</code> Option übergeben. Die <code>contentScript</code> Option behandelt den übergebenen String wie ein eigenes Skript:</p>
+
+<pre class="brush: js">// main.js
+
+var pageMod = require("sdk/page-mod");
+var contentScriptValue = 'document.body.innerHTML = ' +
+                         ' "&lt;h1&gt;Page matches ruleset&lt;/h1&gt;";';
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScript: contentScriptValue
+});</pre>
+
+<p><code>Die contentScriptFile</code> Option behandelt den String wie eine resource:// URL, die auf ein Skript zeigt, dass in ihrem Add-on Verzeichnis "data" gespeichert ist. jpm erstellt standardmäßig keinen "data" Ordner, also muss dieser erst erstellt werden, wenn Sie ihre Content Scripts verwenden wollen.</p>
+
+<p>Das Add-on liefert eine URL, die auf die Datei "content-script.js" zeigt, welche im <code>data</code> Unterordner des Add-on Stammverzeichnisses enthalten ist:</p>
+
+<pre class="brush: js">// main.js
+
+var data = require("sdk/self").data;
+var pageMod = require("sdk/page-mod");
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScriptFile: data.url("content-script.js")
+});</pre>
+
+<pre class="brush: js">// content-script.js
+
+document.body.innerHTML = "&lt;h1&gt;Seite erfüllt die Regeln.&lt;/h1&gt;";</pre>
+
+<div class="note">
+<p>Ab Firefox 34 , kann "./content-script.js" als Alias für self.data.url("content-script.js") verwendet werden. Die main.js kann also auch folgendermaßen geschrieben werden:</p>
+
+<pre class="brush: js">var pageMod = require("sdk/page-mod");
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScriptFile: "./content-script.js"
+});
+</pre>
+</div>
+
+<div class="warning">
+<p>Wenn ihr Content Skript nicht sehr simpel ist oder aus einem statischen String besteht, sollten Sie <code>contentScript</code>:  nicht benutzen. Wenn Sie es doch tun, könnten Sie Probleme haben Ihr Add.on auf AMO verifiziert zu bekommmen.</p>
+
+<p>Stattdessen sollten Sie ihr Skript in einer seperaten Datei schreiben und mit<code> contentScriptFile</code> laden. Das macht ihren Code übersichtlicher und er ist einfacher zu Warten, sichern und debuggen.</p>
+</div>
+
+<p>Sie können auch mehrere Skripte in <code>contentScript oder contentScriptFile laden, indem Sie ein Array von Strings übergeben:</code></p>
+
+<pre class="brush: js">// main.js
+
+var tabs = require("sdk/tabs");
+
+tabs.on('ready', function(tab) {
+  tab.attach({
+      contentScript: ['document.body.style.border = "5px solid red";', 'window.alert("hi");']
+  });
+});
+</pre>
+
+<pre class="brush: js">// main.js
+
+var data = require("sdk/self").data;
+var pageMod = require("sdk/page-mod");
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScriptFile: [data.url("jquery.min.js"), data.url("my-content-script.js")]
+});</pre>
+
+<p>Wenn Sie das tuen, können die Skripte direkt miteinander kommunizieren, als wären es Skripte der gleichen Webseite.</p>
+
+<p>Sie können auch <code>contentScript und contentScriptFile zusammen benutzen.</code> Wenn Sie das tun, werden die Skripte, die sie in <code>contentScriptFile spezifizieren vor denen in contentScript geladen. Das ermöglicht es Ihnen javaScript Bibliotheken, wie JQuery über eine URL zu laden und dann ein simples Skript inline zu verwenden, dass diese Bibliothek benutzt:</code></p>
+
+<pre class="brush: js">// main.js
+
+var data = require("sdk/self").data;
+var pageMod = require("sdk/page-mod");
+
+var contentScriptString = '$("body").html("&lt;h1&gt;Page matches ruleset&lt;/h1&gt;");';
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScript: contentScriptString,
+  contentScriptFile: data.url("jquery.js")
+});</pre>
+
+<div class="warning">
+<p>Wenn ihr Content Skript nicht sehr simpel ist oder aus einem statischen String besteht, sollten Sie <code>contentScript</code>:  nicht benutzen. Wenn Sie es doch tun, könnten Sie Probleme haben Ihr Add.on auf AMO verifiziert zu bekommmen.</p>
+
+<p>Stattdessen sollten Sie ihr Skript in einer seperaten Datei schreiben und mit<code> contentScriptFile</code> laden. Das macht ihren Code übersichtlicher und er ist einfacher zu Warten, sichern und debuggen.</p>
+</div>
+
+<h3 id="Kontrollieren_wann_das_Skript_angehängt_werden_soll.">Kontrollieren, wann das Skript angehängt werden soll.</h3>
+
+<p>Die <code>contentScriptWhen</code> Option spezifiziert, wann das/die Content Skript/e geladen werden sollen. Diese brauch eine dieser Parameter:</p>
+
+<ul>
+ <li><code>"start"</code>: Läd das Skript sofort, nach dem das Dokumentelement der Seite in den DOM eingefügt wird. ZU diesem Zeitpunkt wurde der DOM Inhalt noch nicht geladen,, deshalb kann das Skript nicht damit interagieren.</li>
+ <li><code>"ready"</code>: Läd das Skript nachdem der DOM der Seite geladen wurde: Dies ist der Fall, wenn das <a href="https://developer.mozilla.org/de/Gecko-Specific_DOM_Events">DOMContentLoaded Event  </a>abgefeuert wird. Ab diesem Zeitpunkt können Content Skripts mit dem DOM interagieren, aber extern referenzierte Stylesheets und Bilder könnten noch nicht geladen sein.</li>
+ <li><code>"end"</code>: Läd das Skript nachdem der komplette Inhalt (DOM, JS, CSS, images) der Seute geladen wurde. Zu diesem Zeitpunkt wird das <a href="https://developer.mozilla.org/de/DOM/window.onload">window.onload event</a> abgefeuert.</li>
+</ul>
+
+<p>Der Standardwert ist <code>"end"</code>.</p>
+
+<p>Die Funktion <a href="/de/Add-ons/SDK/High-Level_APIs/tabs#attach(options)"><code>tab.attach()</code></a> akzepiert contentScriptWhen nicht, da es generell aufgerufen wird wenn die Seite geladen wurde.</p>
+
+<h3 id="Übergabe_von_Konfigurationsoptionen">Übergabe von Konfigurationsoptionen</h3>
+
+<p>Das <code>contentScriptOptions</code> Objekt ist ein JSON Objekt, das den Content Skripts als "read-only" Wert als <code><a href="/de/Add-ons/SDK/Guides/Content_Scripts/self">self</a>.options Eigenschaft</code> übergeben wird:</p>
+
+<pre class="brush: js">// main.js
+
+var tabs = require("sdk/tabs");
+
+tabs.on('ready', function(tab) {
+  tab.attach({
+      contentScript: 'window.alert(self.options.message);',
+      contentScriptOptions: {"message" : "hello world"}
+  });
+});</pre>
+
+<p>Jeder Wert (Objekt, Feld, String, etc), dass in JSON dargestellt werden kann, kann hier benutzt werden.</p>
+
+<h2 id="Zugriff_auf_den_DOM">Zugriff auf den DOM</h2>
+
+<p>Content Skripts können natürlich wie jedes andere Skript, dass die Seite geladen hat ( Page Skripts) auf den DOM zugreifen. Content Skripts und Page Skripts sind wie folgt von einander isoliert:</p>
+
+<ul>
+ <li>Content Skripts sehen keine JavaScript Objekte, die der Seite über Page Skripts hinzugefügt wurden.</li>
+ <li>Auch wenn ein Page Skript das Verhalten eines DOM Objekts verändert hat, sieht das Content Skript nur das Originalverhalten.</li>
+</ul>
+
+<p>Das gleiche gilt auch umgekehrt: Page Skripts sehen keine JavaScript Objekte, die von Content Skripts hinzugefügt wurden.</p>
+
+<p>Stellen Sie sich eine Seite vor, die zum Beispiel eine Variable <code>foo</code> über ein Page Skript zum <code>window</code> Objekt hinzufügt:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html"&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;script&gt;
+    window.foo = "hello from page script"
+    &lt;/script&gt;
+  &lt;/head&gt;
+&lt;/html&gt;</pre>
+
+<p>Ein anderes Skript, dass nach diesem Skript in die Seite geladen wird, kann auf <code>foo </code>zugreifen. Ein Content Skript kann dies nicht:</p>
+
+<pre class="brush: js">// main.js
+
+var tabs = require("sdk/tabs");
+var mod = require("sdk/page-mod");
+var self = require("sdk/self");
+
+var pageUrl = self.data.url("page.html")
+
+var pageMod = mod.PageMod({
+  include: pageUrl,
+  contentScript: "console.log(window.foo);"
+})
+
+tabs.open(pageUrl);</pre>
+
+<pre>console.log: my-addon: null
+</pre>
+
+<p>Es gibt gute Gründe für diese Isolation. Erstens können Content Skripts so keine Objekte an Webseiten übermitteln und somit Sicherheitslücken schaffen. Zweitens können Content Skripts so Objekte erzeugen, ohne sich Sorgen machen zu müssen, dass diese mit Objekten kollidieren, die in Page Skripts erzeugt wurden.</p>
+
+<p>Die Isulation bedeutet, dass wenn zum Beispiel eine Webseite die JQuery Bibliothek läd, das Content Skript nicht in der Lage ist dieses zu sehen, aber eine eigene JQuery Bibliothek laden kann ohne das es ein Problem mit der Version gibt, die über das Page Skript hinzugefügt wurde.</p>
+
+<h3 id="Interaktion_mit_Page_Skripts">Interaktion mit Page Skripts</h3>
+
+<p>Normalerweise möchte man Content Skripts und Page Skripts voneinander isolieren. Wenn dies nicht der Fall ist, da Sie zum Beispiel Objekte zwischen beiden Skripten austauschen wollen, oder Nachrichten zwischen ihnen schicken wollen können Sie mehr zum Thema unter  <a href="https://developer.mozilla.org/de/Add-ons/SDK/Guides/Content_Scripts/Interacting_with_page_scripts">Interaktion mit Page Skripts</a> finden.</p>
+
+<h3 id="Event_Listeners">Event Listeners</h3>
+
+<p>Man kann in Content Skripts genau wie in einem Page Skript auf DOM Events warten. Es gibt nur zwei wichtige Unterschieden:</p>
+
+<p>Erstens: Falls Sie einen Event Listener als String an <a href="https://developer.mozilla.org/de/DOM/element.setAttribute"><code>setAttribute()</code></a> übergeben, wird der Listener im Seitenkontext ausgeführt und hat somit keinen Zugriff auf Variablen, die im Content Skript definiert wurden.</p>
+
+<p>Zum Beispiel, wird dieses Content Skript mit der Fehlermeldung "theMessage is not defined" ausgeben:</p>
+
+<pre class="brush: js">var theMessage = "Hello from content script!";
+anElement.setAttribute("onclick", "alert(theMessage);");</pre>
+
+<p>Zweitens: Falls Sie einen Event Listener per direkter Zuweisung einem <a href="/de/docs/Web/API/GlobalEventHandlers">globalen Event Handler</a>  wie <code>onclick zuweisen</code>, könnten Zuweisungen, die die Seite vornimmt überschrieben werden. Zur Veranschaulichung ist hier ein Add-on, das versucht einen click Handler per Zuweisung an window.onclick anzufügen:</p>
+
+<pre class="brush: js">var myScript = "window.onclick = function() {" +
+               "  console.log('unsafewindow.onclick: ' + window.document.title);" +
+               "}";
+
+require("sdk/page-mod").PageMod({
+  include: "*",
+  contentScript: myScript,
+  contentScriptWhen: "start"
+});</pre>
+
+<p>Das wird auf den meisten Seiten funktionieren, bis auf denen, die ebenfalls ein onclick zuweisen:</p>
+
+<pre class="brush: html">&lt;html&gt;
+  &lt;head&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;script&gt;
+    window.onclick = function() {
+      window.alert("it's my click now!");
+    }
+    &lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Aus diesen Gründen ist es besser Event Listeners per <a href="https://developer.mozilla.org/de/DOM/element.addEventListener"><code>addEventListener()</code></a> hinzuzufügen. So definieren Sie einen Listener als Funktion:</p>
+
+<pre class="brush: js">var theMessage = "Hello from content script!";
+
+anElement.onclick = function() {
+  alert(theMessage);
+};
+
+anotherElement.addEventListener("click", function() {
+  alert(theMessage);
+});</pre>
+
+<h2 id="Kommunikation_mit_dem_Add-on">Kommunikation mit dem Add-on</h2>
+
+<p>Damit Add-On Sktipts und Content Skripts miteinander kommunizieren können, haben beide Seiten der Konversation Zugriff auf ein <code>port</code> Objekt.</p>
+
+<ul>
+ <li>Um eine Nachricht von einer Seite zur anderen zu schicken nutzen Sie <code>port.emit()</code></li>
+ <li>Um eine Nachricht von der anderen Seite zu empfangen nutzen <code>port.on()</code></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7873/content-scripting-overview.png" style="display: block; margin-left: auto; margin-right: auto;">Nachrichten sind asyncron, was bedeutet, dass der Sender nicht wartet, bis er eine Antwort des Empfängers erhält, sondern die Nachricht schickt und das weiter arbeitet.</p>
+
+<p>Hier ist ein simples Beispieladd-on, das eine Nachricht an ein Content Skript per <code>port </code>schickt:</p>
+
+<pre class="brush: js">// main.js
+
+var tabs = require("sdk/tabs");
+var self = require("sdk/self");
+
+tabs.on("ready", function(tab) {
+  worker = tab.attach({
+    contentScriptFile: self.data.url("content-script.js")
+  });
+  worker.port.emit("alert", "Message from the add-on");
+});
+
+tabs.open("http://www.mozilla.org");</pre>
+
+<pre class="brush: js">// content-script.js
+
+self.port.on("alert", function(message) {
+  window.alert(message);
+});</pre>
+
+<div class="note">
+<p>Das context-menu Modul benutzt das Kommunikationsmodul, das hier beschrieben wird nicht. Um etwas über die Kommunikation mit geladenen Content Skripts im context-menu zu erfahren, schauen Sie in die <a href="/de/Add-ons/SDK/High-Level_APIs/context-menu">context-menu Dokumentation</a>.</p>
+</div>
+
+<h3 id="Zugriff_auf_port_im_Content_Skript">Zugriff auf port im Content Skript</h3>
+
+<p>Im Content Skript ist das port Objekt als Eigenschaft im globalen Objekt<a href="/de/Add-ons/SDK/Guides/Content_Scripts/self"><code> self</code></a> verfügbar. So versenden Sie eine Nachricht vom Content Skript:</p>
+
+<pre class="brush: js">self.port.emit("myContentScriptMessage", myContentScriptMessagePayload);</pre>
+
+<p>Um eine Nachricht vom Add-on Code zu bekommen:</p>
+
+<pre class="brush: js">self.port.on("myAddonMessage", function(myAddonMessagePayload) {
+  // Handle the message
+});</pre>
+
+<div class="note">
+<p><span>Das globale <a href="/de/Add-ons/SDK/Guides/Content_Scripts/self"><code>self</code></a> Objekt ist etwas komplett anderes als das <a href="https://developer.mozilla.org/de/Add-ons/SDK/High-Level_APIs/self">self Modul</a>, das einer API in einem Add-on die Möglichkeit bietet auf Daten und die ID des Add-ons zuzugreifen.</span></p>
+</div>
+
+<h3 id="Zugriff_auf_port_im_Add-on_Skript">Zugriff auf port im Add-on Skript</h3>
+
+<p>Im Add-on Code ist das Bindeglied zur Kommunikation zwischen Add-on und einem spezifischen Content Skript das  <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/content_worker"><code>worker</code></a> Objekt. Das <code>port Objekt ist also eine Eigenschaft des</code>  <code>worker</code> Objekts.</p>
+
+<p>Der worker wird aber im Add-on Code nicht von allen Modulen gleich verwendet.</p>
+
+<h4 id="Vom_page-worker"><code>Vom page-worker</code></h4>
+
+<p><code>Das page-worker</code> Objekt integriert die worker API direkt. Um also eine Nachricht von einem Content Skript zu erhalten, das mit dem page-worker assoziiert wird benutzt man <code>pageWorker.port.on()</code>:</p>
+
+<pre class="brush: js">// main.js
+
+var pageWorkers = require("sdk/page-worker");
+var self = require("sdk/self");
+
+var pageWorker = require("sdk/page-worker").Page({
+  contentScriptFile: self.data.url("content-script.js"),
+  contentURL: "http://en.wikipedia.org/wiki/Internet"
+});
+
+pageWorker.port.on("first-para", function(firstPara) {
+  console.log(firstPara);
+});</pre>
+
+<p>Um eine benutzerdefinierte Nachricht vom Add-on zu schicken, nutz man <code>pageWorker.port.emit()</code>:</p>
+
+<pre class="brush: js">// main.js
+
+var pageWorkers = require("sdk/page-worker");
+var self = require("sdk/self");
+
+pageWorker = require("sdk/page-worker").Page({
+  contentScriptFile: self.data.url("content-script.js"),
+  contentURL: "http://en.wikipedia.org/wiki/Internet"
+});
+
+pageWorker.port.on("first-para", function(firstPara) {
+  console.log(firstPara);
+});
+
+pageWorker.port.emit("get-first-para");</pre>
+
+<pre class="brush: js">// content-script.js
+
+self.port.on("get-first-para", getFirstPara);
+
+function getFirstPara() {
+  var paras = document.getElementsByTagName("p");
+  if (paras.length &gt; 0) {
+    var firstPara = paras[0].textContent;
+    self.port.emit("first-para", firstPara);
+  }
+}</pre>
+
+<h4 id="Vom_page-mod"><code>Vom page-mod</code></h4>
+
+<p>Ein einziges  <code>page-mod</code> Objekt kann ein Skript an mehrere Seiten anhängen. Jede dieser Seiten hat ihren eigenen Context, in dem sie dieses Skript aufrufen. Daher benötigt es seperate Kanäle(worker) für jede Seite.</p>
+
+<p><code>page-mod</code> integriert also die worker API nicht direkt, sondern es wird jedes Mal wenn ein Content Skript an eine Seite angehängt wird das <code>attach</code> Event aufgerufen,  dessen listener einen worker für den Kontext übergeben bekommt. Durch das bereit stellen eines listeners bei attach kann man das port Objekt für das Content Skript, dass dieser Seite angefügt wurde über diesen page-mod verwenden:</p>
+
+<pre class="brush: js">// main.js
+
+var pageMods = require("sdk/page-mod");
+var self = require("sdk/self");
+
+var pageMod = pageMods.PageMod({
+  include: ['*'],
+  contentScriptFile: self.data.url("content-script.js"),
+  onAttach: startListening
+});
+
+function startListening(worker) {
+  worker.port.on('click', function(html) {
+    worker.port.emit('warning', 'Do not click this again');
+  });
+}</pre>
+
+<pre class="brush: js">// content-script.js
+
+window.addEventListener('click', function(event) {
+  self.port.emit('click', event.target.toString());
+  event.stopPropagation();
+  event.preventDefault();
+}, false);
+
+self.port.on('warning', function(message) {
+  window.alert(message);
+});
+</pre>
+
+<p>Im oben gezeigten Add-on gibt es zwei Nachrichten:</p>
+
+<ul>
+ <li><code>click</code> wird vom page-mod an das Add-on geschickt, wenn der Nutzer auf ein Element auf der Seite klickt</li>
+ <li><code>warning</code> schickt einen String zurück an den page-mod</li>
+</ul>
+
+<h4 id="Von_Tab.attach()"><code>Von Tab.attach()</code></h4>
+
+<p><code>Die Tab.attach()</code> methode liefert einen worker zurück, den man zur Kommunikation mit dem/den Content Skript/Content Skripts, die angehängt wurden, verwenden kann.</p>
+
+<p>Das Add-on fügt einen Button zu Firefox hinzu: Wenn der Benutzer den Button drückt, fügt das Add-on ein Content Skript an den aktuellen Tab an. Das Skript sendet eine Nachricht namens "my-addon-message" und wartet auf eine Antwort namens "my-script-response":</p>
+
+<pre class="brush: js">//main.js
+
+var tabs = require("sdk/tabs");
+var buttons = require("sdk/ui/button/action");
+var self = require("sdk/self");
+
+buttons.ActionButton({
+  id: "attach-script",
+  label: "Attach the script",
+  icon: "./icon-16.png",
+  onClick: attachScript
+});
+
+function attachScript() {
+  var worker = tabs.activeTab.attach({
+    contentScriptFile: self.data.url("content-script.js")
+  });
+  worker.port.on("my-script-response", function(response) {
+    console.log(response);
+  });
+  worker.port.emit("my-addon-message", "Message from the add-on");
+}
+</pre>
+
+<pre class="brush: js">// content-script.js
+
+self.port.on("my-addon-message", handleMessage);
+
+function handleMessage(message) {
+  alert(message);
+  self.port.emit("my-script-response", "Response from content script");
+}</pre>
+
+<h3 id="Die_port_API">Die port API</h3>
+
+<p>Schaue unter <a href="/de/Add-ons/SDK/Guides/Content_Scripts/port">der Referenzseite für das port Objekt</a>.</p>
+</article>
+
+<h3 id="Die_postMessage_API">Die postMessage API</h3>
+
+<p>bevor das port Objekt hinzugefügt wurde, kommunizierten Add-on Code und Content Skripts über eine andere API:</p>
+
+<ul>
+ <li>Das Content Skript rief <code>self.postMessage()</code> auf, um zu senden und <code>self.on() um zu empfangen.</code></li>
+ <li>Das Add-on Skript rief <code>worker.postMessage()</code> auf, um zu senden und  <code>worker.on()</code> um zu empfangen</li>
+</ul>
+
+<p>Die API ist immer noch verfügbar und <a href="/de/Add-ons/SDK/Guides/Content_Scripts/using_postMessage">dokumentiert</a>, aber es gibt keinen Grund sie statt der port API zu verwenden, die hier beschrieben wird. Die Ausnahme bildet das<a href="/de/Add-ons/SDK/High-Level_APIs/context-menu"> context-menu</a> Modul, welches immer noch postMessage verwendet.</p>
+
+<h3 id="Content_Skript_zu_Content_Skript">Content Skript zu Content Skript</h3>
+
+<p>Content Skripts können nur direkt miteinander kommunizieren, wenn diese im gleichen Kontext geladen wurden. Beispiel: Wenn ein einziger Aufruf von  <code>Tab.attach()</code>  zwei Content Skripts anhängt, können diese sich gegenseitig sehen. Wenn aber <code>Tab.attach() </code>zweimal aufgerufen wird, und die Content Skripts einzeln anhängt,können die Content Skripte nicht miteinander kommunizieren. Dann müssen die Nachrichten über die  port API über den Add-on code gesendet werden.</p>
+
+<h2 id="Cross-domain_Content_Skripts">Cross-domain Content Skripts</h2>
+
+<p>Grundsätzlich hat ein Content Skript keine cross-domain Privilegien. Sie können also keinen Inhalt eines iframes auslesen, wenn dieser Inhalt von einer anderen Domain stammt, oder XMLHttpRequests an eine andere Domain schicken.</p>
+
+<p>Um dieses Feature für spezielle Domains hinzuzufügen fügen Sie dem <a href="/de/Add-ons/SDK/Tools/package_json">package.json </a>ihres Add-ons den Schlüssel <code>"cross-domain-content" </code>unter dem <code>"permissions"</code> Schlüssel hinzu. Siehe dafür den Artikel  <a href="/de/Add-ons/SDK/Guides/Content_Scripts/Cross_Domain_Content_Scripts">cross-domain content scripts</a>.</p>
+</article>
diff --git a/files/de/mozilla/add-ons/sdk/guides/index.html b/files/de/mozilla/add-ons/sdk/guides/index.html
new file mode 100644
index 0000000000..fbb8311866
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/guides/index.html
@@ -0,0 +1,154 @@
+---
+title: Leitfäden
+slug: Mozilla/Add-ons/SDK/Guides
+translation_of: Archive/Add-ons/Add-on_SDK/Guides
+---
+<p>Auf dieser Seite sind theoretische und detailliertere Artikel über das SDK auffindbar.</p>
+<hr>
+<h3 id="Für_Mitwirkende"><a name="contributors-guide">Für Mitwirkende</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Getting_Started">Erste Schritte</a></dt>
+   <dd>
+    Erfahre, wie du zu dem SDK beitragen kannst: den Quellcode erhalten, Bugs melden und beheben, Patches einreichen, Überprüfungen und Hilfe erhalten.</dd>
+   <dt>
+    <a href="Guides/Modules">Module</a></dt>
+   <dd>
+    Erfahre mehr über das vom SDK verwendete Modulsystem (basierend auf der CommonJS-Spezifikation), wie Sandboxes und Compartments zum Erhöhen der Sicherheit verwendet werden können, und über den im SDK enthaltenen Modul-Loader Cuddlefish.</dd>
+   <dt>
+    <a href="Guides/Classes_and_Inheritance">Klassen und Vererbung</a></dt>
+   <dd>
+    Erfahre, wie Klassen und Vererbungen in JavaScript implementiert werden können, unter Verwendung von Konstruktoren und Prototypen, und über die Helper-Funktion des SDKs zum Vereinfachen dieser Prozesse.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Private_Properties">Private Eigenschaften</a></dt>
+   <dd>
+    Erfahre, wie private Eigenschaften in JavaScript unter Verwendung von Prefixes, Closures und WeakMaps implementiert werden können und wie das SDK private Eigenschaften durch das Verwenden von Namespaces (eine Verallgemeinerung von WeakMaps) unterstützt.</dd>
+   <dt>
+    <a href="Guides/Content_Processes">Prozesse</a></dt>
+   <dd>
+    Das SDK wurde dafür entwickelt, in einer Umgebung zu arbeiten, in welcher Code zum Manipulieren von Web-Inhalten in unterschiedlichen Prozessen wie der Haupt-Code des Add-ons ausgeführt wird. Dieser Artikel erklärt die wichtigsten Vorteile dieses Konzepts.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="SDK-Infrastruktur"><a name="sdk-infrastructure">SDK-Infrastruktur</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Module_structure_of_the_SDK">Modulstruktur des SDKs</a></dt>
+   <dd>
+    Das SDK selbst sowie die dafür konzipierten Add-ons bestehen aus wiederverwendbaren JavaScript-Modulen. Dieser Artikel erklärt, worum es sich bei diesen Modulen handelt, wie sie geladen werden können und wie die Modul-Baumstruktur des SDKs aufgebaut ist.</dd>
+   <dt>
+    <a href="Guides/SDK_API_Lifecycle">SDK-API-Lebenszyklus</a></dt>
+   <dd>
+     Einführung in den Lebenszyklus der SDK-APIs, beinhaltet Stabilitätsbewertungen für APIs.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Program_ID">Programm-ID</a></dt>
+   <dd>
+    Die Programm-ID ist ein eindeutiger Bezeichner für ein Add-on. Dieser Leitfaden zeigt, wie sie erstellt wird, und wozu sie dient.</dd>
+   <dt>
+    <a href="Guides/Firefox_Compatibility">Firefox-Kompatibilität</a></dt>
+   <dd>
+    Lerne, mit welchen Firefox-versionen eine SDK-Version kompatibel ist und wie Kompatibilitätsprobleme behandelt werden können.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="SDK-Spracheigenschaften"><a name="sdk-idioms">SDK-Spracheigenschaften</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Working_with_Events">Arbeiten mit Events</a></dt>
+   <dd>
+    Erstelle Event-basierten Code mit Hilfe des SDK-Eventausgabe-Frameworks.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Two_Types_of_Scripts">Zwei Arten von Scripts</a></dt>
+   <dd>
+    Dieser Artikel erklärt die Unterschiede zwischen den vom Haupt-Code des Add-ons verwendbaren APIs und von denen, die von einem Content-Script verwendet werden können.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Content-Scripts"><a name="content-scripts">Content-Scripts</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Content_Scripts">Einführung in Content-Scripts</a></dt>
+   <dd>
+    Eine Übersicht über Content-Scripts.</dd>
+   <dt>
+    <a href="Guides/Loading_content_scripts">Laden von Content-Scripts</a></dt>
+   <dd>
+    Laden von Content-Scripts in Webseiten, Einbindung entweder von Strings oder von eigenen Dateien und Festlegen des Ausführungszeitpunktes.</dd>
+   <dt>
+    <a href="Guides/Accessing_the_DOM">Auf das DOM zugreifen</a></dt>
+   <dd>
+    Informationen über den Zugriff von Content-Scripts auf das DOM (Document Object Model).</dd>
+   <dt>
+    <a href="Guides/Communicating_with_other_scripts">Kommunikation mit anderen Scripts</a></dt>
+   <dd>
+    Erfahre, wie ein Content-Script mit der <em>main.js</em>-Datei, mit anderen Content-Scripts und von der Webseite selbst geladenen Scripts kommunizieren kann.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/using_port">Verwendung von "port"</a></dt>
+   <dd>
+    Kommunikation zwischen einem Content-Script und den anderen Bestandteilen des Add-ons über das <code>port</code>-Objekt.</dd>
+   <dt>
+    <a href="Guides/using_postMessage">Verwendung von "postMessage()"</a></dt>
+   <dd>
+    Kommunikation zwischen einem Content-Script und den anderen Bestandteilen des Add-ons über die <code>postMessage()</code>-API und ein Vergleich dieser Technik mit dem <code>port</code>-Objekt.</dd>
+   <dt>
+    <a href="Guides/Cross_domain_content_scripts">Domainübergreifende Content-Scripts</a></dt>
+   <dd>
+    Lerne, wie man Content-Scripts dazu befähigt, mit Inhalten von anderen Domains zu interagieren.</dd>
+   <dt>
+    <a href="Guides/Reddit_example">Reddit-Beispiel</a></dt>
+   <dd>
+    Ein einfaches Add-on mit Content-Scripts.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="XUL-Portierung"><a name="xul-migration">XUL-Portierung</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/XUL_Migration_Guide">XUL Portierungsleitfaden</a></dt>
+   <dd>
+    Techniken zum Portieren eines XUL Add-ons auf das SDK.</dd>
+   <dt>
+    <a href="Guides/XUL_vs_SDK">XUL versus SDK</a></dt>
+   <dd>
+    Ein Vergleich der Stärken und Schwächen des SDK's mit denen der traditionellen XUL-basierten Add-ons.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="Guides/Porting_the_Library_Detector">Portierungs-Beispiel</a></dt>
+   <dd>
+    Ein Walkthrough durch das Portieren eines relativ einfachen XUL-basierten Add-ons auf das SDK.</dd>
+  </dl>
+ </div>
+</div>
diff --git a/files/de/mozilla/add-ons/sdk/index.html b/files/de/mozilla/add-ons/sdk/index.html
new file mode 100644
index 0000000000..4a73b5fbeb
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/index.html
@@ -0,0 +1,83 @@
+---
+title: Add-on SDK
+slug: Mozilla/Add-ons/SDK
+translation_of: Archive/Add-ons/Add-on_SDK
+---
+<p>Das Add-on SDK ermöglicht es, Add-ons für Firefox unter Verwendung der Standard-Webtechnologien zu entwickeln: JavaScript, HTML und CSS. Das SDK beinhaltet JavaScript APIs zum Erstellen, Ausführen, Testen und Packen von Add-ons.</p>
+
+<hr>
+<h3 id="Tutorials">Tutorials</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Mozilla/Add-ons/SDK/Tutorials#getting-started">Erste Schritte</a></dt>
+ <dd>Anleitungen zum <a href="/en-US/Add-ons/SDK/Tutorials/Installation">Installieren des SDKs</a> sowie zur Verwendung des <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">cfx-Tools</a> zum Entwickeln, Testen und Packen von Add-ons.</dd>
+ <dt> </dt>
+ <dt><a href="/de/docs/Mozilla/Add-ons/SDK/Tutorials#interact-with-the-browser">Interagieren mit dem Browser</a></dt>
+ <dd><a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Webseiten öffnen, auf das Laden von Webseiten reagieren und geöffnete Webseiten auflisten. </a></dd>
+ <dd>Das <a href="/en-US/Add-ons/SDK/Tutorials/Listen_For_Page_Load">Laden von Webseiten reagieren</a> und <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">geöffnete Webseiten auflisten</a>.</dd>
+ <dt><a href="/de/docs/Mozilla/Add-ons/SDK/Tutorials#development-techniques">Entwicklungstechnologien</a></dt>
+ <dd>Lerne Entwicklungstechnologien wie das <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">Testen der Add-on-Elemente</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Logging">Loggen</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Creating_Reusable_Modules">Erstellen von wiederverwendbaren Modulen</a>, die <a href="/en-US/Add-ons/SDK/Tutorials/l10n">Lokalisierung</a> und das<a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development"> Entwickeln für mobile Endgeräte</a> kennen.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/de/docs/Mozilla/Add-ons/SDK/Tutorials#create-user-interfaces">Benutzeroberflächen</a></dt>
+ <dd>Erstelle Benutzeroberflächenkomponenten wie <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">Toolbar-Buttons</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">Kontextmenüs</a>, <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Menüeinträge</a> oder <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">Dialoge</a>.</dd>
+ <dt><a href="/de/docs/Mozilla/Add-ons/SDK/Tutorials#modify-web-pages">Inhalte von Webseiten bearbeiten</a></dt>
+ <dd>Inhalte von Seiten <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">über ein spezifisches URL-Muster</a> oder dynamisch <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">einen bestimmten Tab bearbeiten</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Zusammenfassung</a></dt>
+ <dd>Walk-through durch das Beispiel-Add-on "Annotator".</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Leitfäden">Leitfäden</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#contributors-guide">Zum SDK beitragen</a></dt>
+ <dd><a href="/en-US/Add-ons/SDK/Guides/Getting_Started">Trage zum SDK bei</a> und lerne die wichtigsten im SDK-Quelltext verwendeten Objekte wie <a href="/en-US/Add-ons/SDK/Guides/Modules">Module</a>, <a href="/en-US/Add-ons/SDK/Guides/Classes_and_Inheritance">Klassen und Vererbung</a>, <a href="/en-US/Add-ons/SDK/Guides/Private_Properties">private Eigenschaften</a> und <a href="/en-US/Add-ons/SDK/Guides/Content_Processes">Inhaltsabläufe</a> kennen.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-infrastructure">SDK-Aufbau</a></dt>
+ <dd>Verstehe die Technologien, die dem SDK zugrunde liegen: <a href="/en-US/Add-ons/SDK/Guides/Module_structure_of_the_SDK">Modulstruktur</a>, <a href="/en-US/Add-ons/SDK/Guides/Program_ID">Programm-ID</a> und die Regeln, die die <a href="/en-US/Add-ons/SDK/Guides/Firefox_Compatibility">Firefox-Kompatibilität</a> definieren.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Content-Scripts</a></dt>
+ <dd>Eine detaillierte Anleitung zum <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">Arbeiten mit Content-Scripts</a>. Erklärt wird das <a href="/en-US/Add-ons/SDK/Guides/Loading_content_scripts">Laden von Content-Scripts</a>,<a href="/en-US/Add-ons/SDK/Guides/Accessing_the_DOM"> auf welche Objekte ein Content-Script zugreifen kann</a> und <a href="/en-US/Add-ons/SDK/Guides/Communicating_with_other_scripts">wie man zwischen einem Content-Script und dem Rest des Add-ons kommunizieren kann</a>.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Guides#sdk-idioms">SDK-Spracheigenschaften</a></dt>
+ <dd>Das  <a href="/en-US/Add-ons/SDK/Guides/Working_with_Events">SDK-Event-Framework</a> und die <a href="/en-US/Add-ons/SDK/Guides/Two_Types_of_Scripts">Unterscheidung zwischen Add-on-Scripts und Content-Scripts</a>.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">XUL-Migration</a></dt>
+ <dd>Anleitung zum <a href="/en-US/Add-ons/SDK/Guides/XUL_Migration_Guide">Portieren von XUL-Add-ons auf das SDK</a>. Diese Anleitung beinhaltet einen <a href="/en-US/Add-ons/SDK/Guides/XUL_vs_SDK">Vergleich der beiden Umgebungen</a> und ein <a href="/en-US/Add-ons/SDK/Guides/Porting_the_Library_Detector">Beispiel des Portierens eines XUL-Add-ons</a>.</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h3 id="Referenzen">Referenzen</h3>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/High-Level_APIs">High-Level-APIs</a></dt>
+ <dd>Dokumentation der High-Level-SDK-APIs.</dd>
+ <dt><a href="/en-US/Add-ons/SDK/Tools">Tools-Referenz</a></dt>
+ <dd>Dokumentation des <a href="/en-US/Add-ons/SDK/Tools/cfx">cfx-Tools</a> zum Entwickeln, Testen und Packen von Add-ons, der <a href="/en-US/Add-ons/SDK/Tools/console">Konsole</a>, die global zum Loggen verwendet wird und der <a href="/en-US/Add-ons/SDK/Tools/package_json">package.json-Datei</a>.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Add-ons/SDK/Low-Level_APIs">Low-Level-APIs</a></dt>
+ <dd>Dokumentation der Low-Level-SDK-APIs.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
diff --git a/files/de/mozilla/add-ons/sdk/tools/index.html b/files/de/mozilla/add-ons/sdk/tools/index.html
new file mode 100644
index 0000000000..8c67b4644e
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tools/index.html
@@ -0,0 +1,14 @@
+---
+title: Tools
+slug: Mozilla/Add-ons/SDK/Tools
+tags:
+  - Add-on SDK
+  - CFX
+  - JPM
+  - NeedsTranslation
+  - TopicStub
+translation_of: Archive/Add-ons/Add-on_SDK/Tools
+---
+<p>Articles listed here provide a reference for the SDK's tools:</p>
+
+<p>{{ LandingPageListSubpages ("/en-US/Add-ons/SDK/Tools", 7) }}</p>
diff --git a/files/de/mozilla/add-ons/sdk/tools/jpm/index.html b/files/de/mozilla/add-ons/sdk/tools/jpm/index.html
new file mode 100644
index 0000000000..86e6a82aa3
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tools/jpm/index.html
@@ -0,0 +1,497 @@
+---
+title: jpm
+slug: Mozilla/Add-ons/SDK/Tools/jpm
+translation_of: Archive/Add-ons/Add-on_SDK/Tools/jpm
+---
+<div class="note">
+<p>Sie können <code>jpm</code> ab Firefox 38 verwenden.</p>
+
+<p>Dieser Artikel bezieht sich auf <code>jpm</code>.</p>
+</div>
+
+<p><span class="seoSummary">Der Node-basierte Ersatz für <code><a href="/de/Add-ons/SDK/Tools/cfx">cfx</a></code>, erlaubt das Testen, Starten und Paketieren von Add-Ons.</span></p>
+
+<p>Schauen Sie sich das <a href="/de/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29"><code>jpm</code>-Tutorial</a> als Einführung an.</p>
+
+<p><code>jpm</code> wird folgendermaßen verwendet:</p>
+
+<pre class="brush: bash">jpm [command] [options]
+</pre>
+
+<p><code>jpm</code> unterstützt die folgenden globalen Optionen:</p>
+
+<pre class="brush: bash">-h, --help        - Zeigt eine Hilfsnachricht
+-V, --version     - Anzeigen der JPM Versionsnummer
+</pre>
+
+<h2 id="Installation">Installation</h2>
+
+<p><code>jpm</code> wird über den Node Package Manager (<code><a class="external external-icon" href="https://www.npmjs.org/package/jpm">npm</a></code>) installiert. <code>npm</code> ist im Installer von Node.js enthalten, welchen Sie auf <a class="external external-icon" href="http://nodejs.org/">nodejs.org</a> finden.</p>
+
+<p>Nachdem Sie <code>npm</code> installiert haben, können Sie <code>jpm</code> wie jedes andere <code>npm</code>-Paket installieren:</p>
+
+<pre class="brush: bash">npm install jpm -g</pre>
+
+<p>Abhängig von ihren Einstellungen müssen Sie den Befehl möglicherweise mit Adminrechten ausführen:</p>
+
+<pre class="brush: bash">sudo npm install jpm -g</pre>
+
+<p>Tippen Sie folgendes in die Eingabeaufforderung:</p>
+
+<pre class="brush: bash">jpm</pre>
+
+<p>Es sollte sich eine Zusammenfassung der <code>jpm</code>-Kommandos öffnen. Im Gegensatz zu <code>cfx</code> ist <code>jpm</code> in jeder Eingabeaufforderung verwendbar, solange Sie es mit der Option <code>-g</code> installiert haben.</p>
+
+<h3 id="Probleme">Probleme?</h3>
+
+<p>Falls Sie die Zusammenfassung nicht verstehen, fragen Sie nach Hilfe. SDK-Nutzer und Teammitglieder des Projekts diskutieren über Probleme und Vorschläge in der  <a class="external external-icon" href="http://groups.google.com/group/mozilla-labs-jetpack/topics">Projekt- Mailingliste</a>. Andere könnten das selbe Problem wie Sie gehabt haben, also suchen Sie bitte zuerst im Listenarchiv. Sie können mit anderen SDK-Nutzern im Kanal <a class="external external-icon" href="http://mibbit.com/?channel=%23jetpack&amp;server=irc.mozilla.org">#jetpack</a> in <a class="external external-icon" href="http://irc.mozilla.org/">Mozillas IRC-Netzwerk</a> chatten.</p>
+
+<h2 id="Command_reference">Command reference</h2>
+
+<p>There are six jpm commands:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 20%;"><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_init"><code>jpm init</code></a></td>
+   <td>Create a skeleton add-on as a starting point for your own add-on.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_run"><code>jpm run</code></a></td>
+   <td>Launch an instance of Firefox with your add-on installed.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_test"><code>jpm test</code></a></td>
+   <td>Runs your add-on's unit tests.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_xpi"><code>jpm xpi</code></a></td>
+   <td>Package your add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, which is the install file format for Firefox add-ons.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_post"><code>jpm post</code></a></td>
+   <td>Package your add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, then post it to some url.</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/Add-ons/SDK/Tools/jpm#jpm_watchpost"><code>jpm watchpost</code></a></td>
+   <td>Package your add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file whenever there is a file changed, and post that to some url.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="jpm_init">jpm init</h3>
+
+<p>This command initializes a new add-on from scratch.</p>
+
+<p>Create a new directory, change into it, and run <code>jpm init</code>.</p>
+
+<pre class="brush: bash">mkdir my-addon
+cd my-addon
+jpm init</pre>
+
+<p>You'll then be asked to supply some information about your add-on: this will be used to create your add-on's <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json">package.json</a> file.</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#title">title</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#name">name</a>: this defaults to the name of the directory in which you are running <code>jpm init</code>. Unless an <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#id"><code>id</code></a> field is present in package.json, jpm will prepend "@" to <code>name</code> and use the result as the <a href="https://developer.mozilla.org/en-US/Add-ons/Install_Manifests#id"><code>id</code> field in the add-on's install manifest</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#version">version</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#description">description</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#main">entry point</a> (which maps to "main" in package.json)</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#author">author</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#engines">engines</a> (supported applications)</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#license">license</a></li>
+</ul>
+
+<p>Most of these fields have a default, which is shown in brackets after the question. If you just press Enter, your add-on will get the default value.</p>
+
+<p>Once you've supplied a value or accepted the default for these properties, you'll be shown the complete contents of "package.json" and asked to accept it.</p>
+
+<p>Then jpm will create an skeleton add-on, as a starting point for your own add-on development, with the following file structure:</p>
+
+<ul class="directory-tree">
+ <li>my-addon
+  <ul>
+   <li>index.js</li>
+   <li>package.json</li>
+   <li>test
+    <ul>
+     <li>test-index.js</li>
+    </ul>
+   </li>
+  </ul>
+ </li>
+</ul>
+
+<h3 id="jpm_run">jpm run</h3>
+
+<p>This command runs a new instance of Firefox with the add-on installed:</p>
+
+<pre class="brush: bash">jpm run</pre>
+
+<p><code>jpm run</code> accepts the following options:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%;"><code>-b --binary BINARY</code></td>
+   <td>
+    <p>Use the version of Firefox specified in BINARY. BINARY may be specified as a full path or as a path relative to the current directory.</p>
+
+    <pre class="brush: bash">
+jpm run -b /path/to/Firefox/Nightly</pre>
+    See <a href="/en-US/Add-ons/SDK/Tools/jpm#Selecting_a_browser_version">Selecting a browser version</a>.</td>
+  </tr>
+  <tr>
+   <td><code>--binary-args CMDARGS</code></td>
+   <td>
+    <p>Pass <a href="/en-US/docs/Mozilla/Command_Line_Options">extra arguments</a> to Firefox.</p>
+
+    <p>For example, to pass the <code>-jsconsole</code> argument to Firefox, which will launch the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>, try the following:</p>
+
+    <pre class="brush: bash">
+jpm run --binary-args -jsconsole</pre>
+
+    <p>To pass multiple arguments, or arguments containing spaces, quote them:</p>
+
+    <pre class="brush: bash">
+jpm run --binary-args '-url mzl.la -jsconsole'</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--debug</code></td>
+   <td>Run the <a href="/en-US/Add-ons/Add-on_Debugger">add-on debugger</a> attached to the add-on.</td>
+  </tr>
+  <tr>
+   <td><code>-o --overload PATH</code></td>
+   <td>
+    <p>Rather than use the SDK modules built into Firefox, use the modules found at PATH. If <code>-o</code> is specified and PATH is omitted, jpm will look for the JETPACK_ROOT environment variable and use its value as the path.</p>
+
+    <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Overloading_the_built-in_modules">Overloading the built-in modules</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>-p --profile=<code> PROFILE</code></code></td>
+   <td>
+    <p>By default, jpm uses a clean temporary Firefox <a href="http://support.mozilla.com/en-US/kb/profiles">profile</a> each time you call jpm run. Use the <code>--profile</code> option to instruct jpm to launch Firefox with an existing profile.</p>
+
+    <p>The PROFILE value may be a profile name or the path to the profile.</p>
+
+    <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Using_profiles">Using profiles</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>-v --verbose</code></td>
+   <td>Verbose operation.</td>
+  </tr>
+  <tr>
+   <td><code>--no-copy</code></td>
+   <td>
+    <div class="warning">Use with caution because <code>jpm run|test</code> changes many preferences, never use with your main profile.</div>
+
+    <div class="note">This only applies when <code>--profile</code> is used.</div>
+    Disables the copying of the profile used, which allows one to reuse a profile.</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="jpm_test">jpm test</h3>
+
+<p>Use this command to run an add-on's unit tests. It will:</p>
+
+<ul>
+ <li>look for a directory called "test" under the add-on's root</li>
+ <li>open every file in there whose name starts with "test-" (note the hyphen after "test" in the filename. <code>jpm test</code> will include a file called "test-myCode.js", but will exclude files called "test_myCode.js" or "testMyCode.js")</li>
+ <li>call every function exported from that file whose name starts with "test"</li>
+</ul>
+
+<pre class="brush: bash">jpm test
+</pre>
+
+<p>See the <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Unit_testing">tutorial on unit testing</a> and the <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/test_assert">reference documentation for the <code>assert</code> module</a> for more details on this.</p>
+
+<p><code>jpm test</code> accepts the following options:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><code>-b --binary BINARY</code></td>
+   <td>
+    <p>Use the version of Firefox specified in BINARY. BINARY may be specified as a full path or as a path relative to the current directory.</p>
+
+    <pre class="brush: bash">
+jpm test -b /path/to/Firefox/Nightly</pre>
+
+    <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Selecting_a_browser_version">Selecting a browser version</a>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--binary-args CMDARGS</code></td>
+   <td>
+    <p>Pass <a href="http://kb.mozillazine.org/Command_line_arguments">extra arguments</a> to Firefox.</p>
+
+    <p>For example, to pass the <code>-jsconsole</code> argument to Firefox, which will launch the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>, try the following:</p>
+
+    <pre class="brush: bash">
+jpm test --binary-args -jsconsole</pre>
+
+    <p>To pass multiple arguments, or arguments containing spaces, quote them:</p>
+
+    <pre class="brush: bash">
+jpm test --binary-args '-url mzl.la -jsconsole'</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--debug</code></td>
+   <td>Run the <a href="/en-US/Add-ons/Add-on_Debugger">add-on debugger</a> attached to the add-on.</td>
+  </tr>
+  <tr>
+   <td style="width: 30%;"><code>-f --filter FILE[:TEST]</code></td>
+   <td>
+    <p>Only run tests whose filenames match FILE and optionally match TEST, both regexps.</p>
+
+    <pre class="brush: bash">
+jpm test --filter base64:btoa</pre>
+
+    <p>The above command only runs tests in files whose names contain "base64", and in those files only runs tests whose names contain "btoa".</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 30%;"><code>-o --overload PATH</code></td>
+   <td>
+    <p>Rather than use the SDK modules built into Firefox, use the modules found at PATH. If <code>-o</code> is specified and PATH is omitted, jpm will look for the JETPACK_ROOT environment variable and use its value as the path.</p>
+
+    <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Overloading_the_built-in_modules">Overloading the built-in modules</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td style="width: 30%;"><code>-p --profile<code> PROFILE</code></code></td>
+   <td>
+    <p>By default, jpm uses a clean temporary Firefox <a href="http://support.mozilla.com/en-US/kb/profiles">profile</a> each time you call jpm run. Use the <code>--profile</code> option to instruct jpm to launch Firefox with an existing profile.</p>
+
+    <p>The PROFILE value may be a profile name or the path to the profile.</p>
+
+    <p>See <a href="/en-US/Add-ons/SDK/Tools/jpm#Using_profiles">Using profiles</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--stop-on-error</code></td>
+   <td>
+    <p>By default jpm test keeps running tests even after tests fail. Specify <code>--stop-on-error</code> to stop running tests after the first failure:</p>
+
+    <pre class="brush: bash">
+jpm test --stop-on-error</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--tbpl</code></td>
+   <td>Print test output in <a href="https://treeherder.mozilla.org/">Treeherder</a> format</td>
+  </tr>
+  <tr>
+   <td><code>--times NUMBER</code></td>
+   <td>
+    <p>Run tests NUMBER of times:</p>
+
+    <pre class="brush: bash">
+jpm test --times 2</pre>
+   </td>
+  </tr>
+  <tr>
+   <td><code>-v --verbose</code></td>
+   <td>Verbose operation.</td>
+  </tr>
+  <tr>
+   <td><code>--no-copy</code></td>
+   <td>
+    <div class="warning">Use with caution because <code>jpm run|test</code> changes many preferences, never use with your main profile.</div>
+
+    <div class="note">This only applies when <code>--profile</code> is used.</div>
+    Disables the copying of the profile used, which allows one to reuse a profile.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="jpm_xpi">jpm xpi</h3>
+
+<p>This command packages the add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, which is the install file format for Mozilla add-ons.</p>
+
+<pre class="brush: bash">jpm xpi</pre>
+
+<p>It looks for a file called <code>package.json</code> in the current directory and creates the corresponding XPI file. It ignores any ZIPs or XPIs in the add-on's root, and any test files.</p>
+
+<p>Once you have built an XPI file you can distribute your add-on by submitting it to <a href="http://addons.mozilla.org">addons.mozilla.org</a>.</p>
+
+<p><code>jpm xpi</code> accepts the following option:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><code>-v --verbose</code></td>
+   <td>
+    <p>Verbose operation:</p>
+
+    <pre class="brush: bash">
+jpm xpi -v</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="jpm_post">jpm post</h3>
+
+<p>This command packages the add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, the posts it to some url.</p>
+
+<pre class="brush: bash">jpm post</pre>
+
+<p>It looks for a file called <code>package.json</code> in the current directory and creates a XPI file with which to post to the <code>--post-url</code>.</p>
+
+<p><code>jpm post</code> accepts the following options:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><code>--post-url URL</code></td>
+   <td>
+    <p>The url to post the extension to after creating a XPI.</p>
+
+    <pre class="brush: bash">
+jpm post --post-url http://localhost:8888/</pre>
+
+    <p>See <a href="https://www.npmjs.com/package/jpm#using-post-and-watchpost">Using Post and Watchpost</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>-v --verbose</code></td>
+   <td>
+    <p>Verbose operation:</p>
+
+    <pre class="brush: bash">
+jpm post --post-url http://localhost:8888/ -v</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="jpm_watchpost">jpm watchpost</h3>
+
+<p>This command packages the add-on as an <a href="https://developer.mozilla.org/en/XPI">XPI</a> file, the posts it to some url whenever a file in the current working directory changes.</p>
+
+<pre class="brush: bash">jpm watchpost</pre>
+
+<p>Creates a XPI whenever a file in the current working directory changes and posts that to the <code>--post-url</code>.</p>
+
+<p><code>jpm watchpost</code> accepts the following options:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td><code>--post-url URL</code></td>
+   <td>
+    <p>The url to post the extension to after creating a XPI.</p>
+
+    <pre class="brush: bash">
+jpm watchpost --post-url http://localhost:8888/</pre>
+
+    <p>See <a href="https://www.npmjs.com/package/jpm#using-post-and-watchpost">Using Post and Watchpost</a> for more information.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>-v --verbose</code></td>
+   <td>
+    <p>Verbose operation:</p>
+
+    <pre class="brush: bash">
+jpm watchpost --post-url http://localhost:8888/ -v</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Techniques">Techniques</h2>
+
+<h3 id="Selecting_a_browser_version">Selecting a browser version</h3>
+
+<p>By default, <code>jpm run</code> and <code>jpm test</code> will run the release version of Firefox. You can instruct jpm to use a different version in one of two ways:</p>
+
+<ul>
+ <li>
+  <p>you can use the <code>-b</code> or <code>--binary</code> option to instruct jpm to run a different version of Firefox. You can supply a path to a specific binary:</p>
+
+  <pre class="brush: bash">jpm run -b /path/to/Firefox/Nightly</pre>
+
+  <p>As a shorthand for this, you can pass "nightly", "aurora", "beta", or "firefox" and jpm will look in the default location for these Firefox versions:</p>
+
+  <pre class="brush: bash">jpm run -b nightly</pre>
+ </li>
+ <li>
+  <p>you can set the <code>JPM_FIREFOX_BINARY</code> environment variable with the path to the version of Firefox you want to run. When you invoke <code>jpm run</code> or <code>jpm test</code> without the <code>-b</code> option, jpm will first check  <code>JPM_FIREFOX_BINARY</code>, and use this as the path if it is set.</p>
+ </li>
+</ul>
+
+<h3 id="Using_.jpmignore_to_ignore_files">Using <code>.jpmignore</code> to ignore files</h3>
+
+<p>Using <code>.jpmignore</code> is similar to using <code>.gitignore</code> with <code>git</code>, <code>.hgignore</code> with Mercurial, or <code>.npmignore</code> with <code>npm</code>. By using this file you can let <code>jpm</code> know which files you would like it to ignore when building a <code>.xpi</code> file with <code>jpm xpi</code>.</p>
+
+<p>Here is an example:</p>
+
+<pre class="brush: bash"># Ignore .DS_Store files created by mac
+.DS_Store
+
+# Ignore any zip or xpi files
+*.zip
+*.xpi
+</pre>
+
+<p>A <code>.jpmignore</code> file with the above contents would ignore all zip files and <code>.DS_Store</code> files from the xpi generated by <code>jpm xpi</code>.</p>
+
+<h3 id="Using_profiles_2"><a name="Using_profiles">Using profiles</a></h3>
+
+<p>By default, <code>jpm run</code> uses a new profile each time it is executed. This means that any profile-specific data entered from one run of <code>jpm</code> will not, by default, be available in the next run.</p>
+
+<p>This includes, for example, any extra add-ons you installed, or your history, or any data stored using the <a href="/en-US/Add-ons/SDK/High-Level_APIs/simple-storage">simple-storage</a> API.</p>
+
+<p>To make <code>jpm</code> use a specific profile, pass the <code>--profile</code> option, specifying the name of the profile you wish to use, or the path to the profile.</p>
+
+<pre class="brush: bash">jpm run --profile boogaloo
+</pre>
+
+<pre class="brush: bash">jpm run --profile path/to/boogaloo</pre>
+
+<p>If you supply <code>--profile</code> but its argument is not the name of or path to an existing profile, jpm will open the <a href="https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles">profile manager</a>,  enabling you to select and existing profile or create a new one:</p>
+
+<pre class="brush: bash">jpm run --profile i-dont-exist</pre>
+
+<h3 id="Developing_without_browser_restarts">Developing without browser restarts</h3>
+
+<p>Because <code>jpm run</code> restarts the browser each time you invoke it, it can be a little cumbersome if you are making very frequent changes to an add-on. An alternative development model is to use the <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/" rel="noreferrer">Extension Auto-Installer</a> add-on: this listens for new XPI files on a specified port and installs them automatically. That way you can test new changes without needing to restart the browser:</p>
+
+<ul>
+ <li>make a change to your add-on</li>
+ <li>run <code>jpm post --post-url http://localhost:8888/</code>, to make a xpi and post it.</li>
+</ul>
+
+<p>You could even automate this workflow with a simple script. For example:</p>
+
+<pre class="brush: bash">jpm watchpost --post-url http://localhost:8888/
+</pre>
+
+<p>Note that the logging level defined for the console is different when you use this method, compared to the logging level used when an add-on is run using <code>jpm run</code>. This means that if you want to see output from <a href="/en-US/Add-ons/SDK/Tutorials/Logging" rel="noreferrer"><code>console.log()</code></a> messages, you'll have to tweak a setting. See the documentation on <a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels" rel="noreferrer">logging levels</a> for the details on this.</p>
+
+<h3 id="Overloading_the_built-in_modules">Overloading the built-in modules</h3>
+
+<p>The SDK modules you use to implement your add-on are built into Firefox. When you run or package an add-on using <code>jpm run</code> or <code>jpm xpi</code>, the add-on will use the versions of the modules in the version of Firefox that hosts it.</p>
+
+<p>As an add-on developer, this is usually what you want. But if you're developing the SDK modules themselves, of course, it isn't. In this case you need to:</p>
+
+<ul>
+ <li>get a local copy of the SDK modules that you want: this usually means checking out the SDK from its <a href="https://github.com/mozilla/addon-sdk" rel="noreferrer">GitHub repo</a></li>
+ <li>set the <code>JETPACK_ROOT</code> environment variable to your local copy</li>
+ <li>pass the <code>-o</code> option to <code>jpm run</code> or <code>jpm xpi</code>:</li>
+</ul>
+
+<pre>jpm run -o
+</pre>
+
+<p>This instructs jpm to use the local copies of the SDK modules, not the ones in Firefox. If you don't want to set the <code>JETPACK_ROOT</code> environment variable, you can pass the location of your copy of the SDK modules along with <code>-o</code>:</p>
+
+<pre>jpm run -o "/path/to/SDK/"</pre>
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html b/files/de/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html
new file mode 100644
index 0000000000..c5f41a2baf
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html
@@ -0,0 +1,100 @@
+---
+title: Einen Button zur Toolbar hinzufügen
+slug: Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Adding_a_Button_to_the_Toolbar
+---
+<div class="note">
+ Für dieses Tutorial wird die erfolgreiche <a href="/en-US/Add-ons/SDK/Tutorials/Installation">Installation des SDK</a> und erlernte <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">Vorkenntnisse von <code>cfx</code></a> vorrausgesetzt.</div>
+<div class="warning">
+ <p>Dieses Widget wird ab Firefox 29 nicht mehr verwendet/funktionieren. Um Buttons in Firefox 29 (+) hinzuzufügen, benutze bitte die <a href="/en-US/Add-ons/SDK/High-Level_APIs/ui">UI Module</a>, besonders die <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">Action-Buttons</a> oder <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_toggle">Toogle-Buttons</a> APIs.</p>
+</div>
+<p>Um einen Button zur Toolbar hinzuzufügen, verwende das <a href="/en-US/Add-ons/SDK/High-Level_APIs/widget"><code>widget</code></a>-Module.</p>
+<p>Erstelle ein neues Verzeichnis, navigiere mit der Eingabeaufforderung in dieses Verzeichnis, und gib <code>cfx init</code> ein. Dann öffne die Datei "main.js" im "lib"-Verzeichnis und gib folgenden Code ein:</p>
+<pre class="brush: js">var widgets = require("sdk/widget");
+var tabs = require("sdk/tabs");
+
+var widget = widgets.Widget({
+  id: "mozilla-link",
+  label: "Mozilla website",
+  contentURL: "http://www.mozilla.org/favicon.ico",
+  onClick: function() {
+    tabs.open("http://www.mozilla.org/");
+  }
+});</pre>
+<p>Das Widget wird wird zur AddOn-Leiste (unten am Fensterrand) hinzugefügt:</p>
+<p><img alt="" src="https://mdn.mozillademos.org/files/6697/widget-mozilla.png" style="width: 464px; height: 184px; display: block; margin-left: auto; margin-right: auto;">Du kannst leider nicht die Standart-Position des Icons ändern, aber der User kann den Standort jederzeit verändern. Das <code>id</code>-Attribut ist zwingend erforderlich. Es speichert die Position des Icons und sollte nicht verändert weren, da sonst wieder der Standart wiederhergestellt wird.</p>
+<p>Beim Aktivieren wird dieser Link geöffnet: <a href="http://www.mozilla.org">http://www.mozilla.org</a>.</p>
+<div style="">
+  </div>
+<h2 id="Das_Icon_angeben_(URL)">Das Icon angeben (URL)</h2>
+<p>Wenn Du dieses Widget verwendest, kannst Du das Icon via <code>contentURL</code>: anzeigen. Das kann eine lokale, aber auch eine externe Datei sein. Allerdings lässt es sich nicht empfehlen Icons im Internet zu verwenden, da bei einem Serverausfall die Grafik nicht geladen werden kann. Das Beispiel verwendet eine Grafik namens "my-icon.png" aus dem AddOn-Verzeichnis (data):</p>
+<div>
+ <pre class="brush: js" id="highlighter_533558" style="width: auto;">var widgets = require("sdk/widget");
+var tabs = require("sdk/tabs");
+var self = require("sdk/self");
+
+var widget = widgets.Widget({
+  id: "mozilla-link",
+  label: "Mozilla website",
+  contentURL: self.data.url("my-icon.png"),
+  onClick: function() {
+    tabs.open("http://www.mozilla.org/");
+  }
+});</pre>
+</div>
+<p><code><font face="Open Sans, sans-serif"><span style="line-height: 21px;">Du kannst das Icon immer mit </span></font>contentURL</code> ändern!</p>
+<h2 id="Responding_To_the_User">Responding To the User</h2>
+<p>You can listen for <code>click</code>, <code>mouseover</code>, and <code>mouseout</code> events by passing handler functions as the corresponding constructor options. The widget example above assigns a listener to the <code>click</code> event using the <code>onClick</code> option, and there are similar <code>onMouseover</code> and <code>onMouseout</code> options.</p>
+<p>To handle user interaction in more detail, you can attach a content script to the widget. Your add-on script and the content script can't directly access each other's variables or call each other's functions, but they can send each other messages.</p>
+<p>Here's an example. The widget's built-in <code>onClick</code> property does not distinguish between left and right mouse clicks, so to do this we need to use a content script. The script looks like this:</p>
+<pre class="brush: js">window.addEventListener('click', function(event) {
+  if(event.button == 0 &amp;&amp; event.shiftKey == false)
+    self.port.emit('left-click');
+  if(event.button == 2 || (event.button == 0 &amp;&amp; event.shiftKey == true))
+    self.port.emit('right-click');
+    event.preventDefault();
+}, true);</pre>
+<p>It uses the standard DOM <code>addEventListener()</code> function to listen for click events, and handles them by sending the corresponding message to the main add-on code. Note that the messages "left-click" and "right-click" are not defined in the widget API itself, they're custom events defined by the add-on author.</p>
+<p>Save this script in your <code>data</code> directory as "click-listener.js".</p>
+<p>Next, modify <code>main.js</code> to:</p>
+<ul>
+ <li>pass in the script by setting the <code>contentScriptFile</code> property</li>
+ <li>listen for the new events:</li>
+</ul>
+<pre class="brush: js">var widgets = require("sdk/widget");
+var tabs = require("sdk/tabs");
+var self = require("sdk/self");
+
+var widget = widgets.Widget({
+  id: "mozilla-link",
+  label: "Mozilla website",
+  contentURL: "http://www.mozilla.org/favicon.ico",
+  contentScriptFile: self.data.url("click-listener.js")
+});
+widget.port.on("left-click", function(){
+  console.log("left-click");
+});
+widget.port.on("right-click", function(){
+  console.log("right-click");
+});</pre>
+<p>Now execute <code>cfx run</code> again, and try right- and left-clicking on the button. You should see the corresponding string written to the command shell.</p>
+<h2 id="Attaching_a_Panel">Attaching a Panel</h2>
+
+<p><img alt="" class="image-right" src="https://mdn.mozillademos.org/files/6527/widget-panel-clock.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>If you supply a <a href="/en-US/Add-ons/SDK/High-Level_APIs/panel"><code>panel</code></a> object to the widget's constructor, then the panel will be shown when the user clicks the widget:</p>
+<pre class="brush: js">var data = require("sdk/self").data;
+var clockPanel = require("sdk/panel").Panel({
+  width:215,
+  height:160,
+  contentURL: data.url("clock.html")
+});
+require("sdk/widget").Widget({
+  id: "open-clock-btn",
+  label: "Clock",
+  contentURL: data.url("History.png"),
+  panel: clockPanel
+});</pre>
+<p>To learn more about working with panels, see the tutorial on <a href="/en-US/Add-ons/SDK/Display_a_Popup">displaying a popup</a>.</p>
+<h2 id="Learning_More">Learning More</h2>
+<p>To learn more about the widget module, see its <a href="/en-US/Add-ons/SDK/High-Level_APIs/widget">API reference documentation</a>.</p>
+<p>To learn more about content scripts, see the <a href="/en-US/Add-ons/SDK/Guides/Content_Scripts">content scripts guide</a>.</p>
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/getting_started/index.html b/files/de/mozilla/add-ons/sdk/tutorials/getting_started/index.html
new file mode 100644
index 0000000000..dbafb57553
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tutorials/getting_started/index.html
@@ -0,0 +1,214 @@
+---
+title: Getting started
+slug: Mozilla/Add-ons/SDK/Tutorials/Getting_started
+translation_of: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29
+---
+<p>This tutorial walks through creating a simple add-on using the SDK.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>To create add-ons for Firefox using the SDK, you'll first need to follow the instructions to <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">install and activate the SDK</a>. Once you've done that, you'll be looking at a command prompt.</p>
+
+<h2 id="Initializing_an_empty_add-on">Initializing an empty add-on</h2>
+
+<p>In the command prompt, create a new directory. The directory doesn't have to be under the SDK root: you can create it anywhere you like. Navigate to it, type <code>cfx init</code>, and hit enter:</p>
+
+<pre>mkdir my-addon
+cd my-addon
+cfx init
+</pre>
+
+<p>You'll see some output like this:</p>
+
+<pre>* lib directory created
+* data directory created
+* test directory created
+* doc directory created
+* README.md written
+* package.json written
+* test/test-main.js written
+* lib/main.js written
+* doc/main.md written
+Your sample add-on is now ready for testing:
+try "cfx test" and then "cfx run". Have fun!"
+</pre>
+
+<h2 id="Implementing_the_add-on">Implementing the add-on</h2>
+
+<p>Now you can write the add-on's code, which goes in the "main.js" file in your "lib" directory. This file was created for you in the previous step. Open it and add the following code:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}
+</pre>
+
+<p>Save the file.</p>
+
+<p>Next, save these three icon files to the "data" directory:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7635/icon-16.png" style="width: 16px; height: 16px;"></td>
+   <td>icon-16.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7637/icon-32.png" style="width: 32px; height: 32px;"></td>
+   <td>icon-32.png</td>
+  </tr>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/7639/icon-64.png" style="width: 64px; height: 64px;"></td>
+   <td>icon-64.png</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Back at the command prompt, type:</p>
+
+<pre>cfx run
+</pre>
+
+<p>This is the SDK command to run a new instance of Firefox with your add-on installed. When Firefox launches, in the top-right corner of the browser you'll see an icon with the Firefox logo. Click the icon, and a new tab will open with <a href="https://www.mozilla.org/" rel="noreferrer">https://www.mozilla.org/</a> loaded into it.</p>
+
+<div class="note">
+<p>You might see an error message like this when you type cfx run:</p>
+
+<pre class="bz_comment_text" id="comment_text_0">A given cfx option has an inappropriate value:
+  ZIP does not support timestamps before 1980</pre>
+
+<p>If so, you've run into <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1005412">bug 1005412</a>, meaning that the icon files you downloaded are given a timestamp of 1970. Until this bug is fixed, the workaround is to use the <a href="http://www.linfo.org/touch.html"><code>touch</code></a> command to update the timestamps:</p>
+
+<pre>touch icon-16.png</pre>
+</div>
+
+<p>That's all this add-on does. It uses two SDK modules: the <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> module, which enables you to add buttons to the browser, and the <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a> module, which enables you to perform basic operations with tabs. In this case, we've created a button whose icon is the Firefox icon, and added a click handler that loads the Mozilla home page in a new tab.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7643/mozilla-button.png" style="width: 382px; height: 221px; display: block; margin-left: auto; margin-right: auto;">Try editing this file. For example, we could change the page that gets loaded:</p>
+
+<pre class="brush: js">var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://developer.mozilla.org/");
+}</pre>
+
+<p>At the command prompt, execute <code>cfx run</code> again. This time clicking it takes you to <a href="https://developer.mozilla.org/">https://developer.mozilla.org/</a>.</p>
+
+<h2 id="Packaging_the_add-on">Packaging the add-on</h2>
+
+<p>When you've finished the add-on and are ready to distribute it, you'll need to package it as an XPI file. This is the installable file format for Firefox add-ons. You can distribute XPI files yourself or publish them to <a href="https://addons.mozilla.org" rel="noreferrer">https://addons.mozilla.org</a> so other users can download and install them.</p>
+
+<p>To build an XPI, just execute the command <code>cfx xpi</code> from the add-on's directory:</p>
+
+<pre>cfx xpi
+</pre>
+
+<p>You should see a message like:</p>
+
+<pre>Exporting extension to my-addon.xpi.
+</pre>
+
+<p>To test that this worked, try installing the XPI file in your own Firefox installation. You can do this by pressing the Ctrl+O key combination (Cmd+O on Mac) from within Firefox, or selecting the "Open" item from Firefox's "File" menu. This will bring up a file selection dialog; navigate to the "my-addon.xpi" file, open it and follow the prompts to install the add-on.</p>
+
+<h2 id="Summary">Summary</h2>
+
+<p>In this tutorial we've built and packaged an add-on using three commands:</p>
+
+<ul>
+ <li><code>cfx init</code> to initialize an empty add-on template</li>
+ <li><code>cfx run</code> to run a new instance of Firefox with the add-on installed, so we can try it out</li>
+ <li><code>cfx xpi</code> to package the add-on into an XPI file for distribution</li>
+</ul>
+
+<p>These are the three main commands you'll use when developing SDK add-ons. There's comprehensive <a href="/en-US/Add-ons/SDK/Tools/cfx" rel="noreferrer">reference documentation</a> covering all the commands you can use and all the options they take.</p>
+
+<p>The add-on code itself uses two SDK modules, <a href="/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action">action button</a> and <a href="/en-US/Add-ons/SDK/High-Level_APIs/tabs" rel="noreferrer">tabs</a>. There's reference documentation for all the <a href="/en-US/Add-ons/SDK/High-Level_APIs" rel="noreferrer">high-level</a> and <a href="/en-US/Add-ons/SDK/Low-Level_APIs" rel="noreferrer">low-level</a> APIs in the SDK.</p>
+
+<h2 id="What's_next">What's next?</h2>
+
+<p>To get a feel for some of the things you can do with the SDK APIs, try working through some of the <a href="/en-US/Add-ons/SDK/Tutorials" rel="noreferrer">tutorials</a>.</p>
+
+<h2 id="Advanced_techniques">Advanced techniques</h2>
+
+<h3 id="Overriding_the_built-in_modules">Overriding the built-in modules</h3>
+
+<p>The SDK modules you use to implement your add-on are built into Firefox. When you run or package an add-on using <code>cfx run</code> or <code>cfx xpi</code>, the add-on will use the versions of the modules in the version of Firefox that hosts it.</p>
+
+<p>As an add-on developer, this is usually what you want. But if you're developing the SDK modules themselves, of course, it isn't. In this case it's assumed that you have checked out the SDK from its <a href="https://github.com/mozilla/addon-sdk" rel="noreferrer">GitHub repo</a> and will have run the <a href="/en-US/Add-ons/SDK/Tutorials/Installation" rel="noreferrer">bin/activate</a> script from the root of your checkout.</p>
+
+<p>Then when you invoke <code>cfx run</code> or <code>cfx xpi</code>, you pass the "-o" option:</p>
+
+<pre>cfx run -o
+</pre>
+
+<p>This instructs cfx to use the local copies of the SDK modules, not the ones in Firefox.</p>
+
+<h3 id="Developing_without_cfx_run">Developing without cfx run</h3>
+
+<p>Because <code>cfx run</code> restarts the browser each time you invoke it, it can be a little cumbersome if you are making frequent changes to an add-on. An alternative development model is to use the <a href="https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/" rel="noreferrer">Extension Auto-Installer</a> add-on: this listens for new XPI files on a specified port and installs them automatically. That way you can test new changes without needing to restart the browser:</p>
+
+<ul>
+ <li>make a change to your add-on</li>
+ <li>run cfx xpi</li>
+ <li>post the add-on to the port specified</li>
+</ul>
+
+<p>You could even automate this workflow with a simple script. For example:</p>
+
+<pre>while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done
+</pre>
+
+<p>Note that the logging level defined for the console is different when you use this method, compared to the logging level used when an add-on is run using <code>cfx run</code>. This means that if you want to see output from <a href="/en-US/Add-ons/SDK/Tutorials/Logging" rel="noreferrer"><code>console.log()</code></a> messages, you'll have to tweak a setting. See the documentation on <a href="/en-US/Add-ons/SDK/Tools/console#Logging_Levels" rel="noreferrer">logging levels</a> for the details on this.</p>
+
+<p>Another example using <a href="http://gruntjs.com/">grunt</a> and <a href="https://www.npmjs.com/package/grunt-shell">grunt-shell</a>:</p>
+
+<pre class="brush: js">module.exports = function(grunt) {
+  'use strict';
+  require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);
+  grunt.initConfig({
+    shell: {
+      xpi: {
+        command: [
+          'cd pluginpath',
+          'cfx xpi',
+          'wget --post-file=pluginname.xpi http://localhost:8888/ || echo&gt;/dev/null'
+        ].join('&amp;&amp;')
+      }
+    },
+    watch: {
+      xpi: {
+        files: ['pluginpath/**'],
+        tasks: ['shell:xpi']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-shell');
+  grunt.registerTask('default', ['watch']);
+};</pre>
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/index.html b/files/de/mozilla/add-ons/sdk/tutorials/index.html
new file mode 100644
index 0000000000..6eb7e95b49
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tutorials/index.html
@@ -0,0 +1,165 @@
+---
+title: Tutorials
+slug: Mozilla/Add-ons/SDK/Tutorials
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials
+---
+<p>Auf dieser Seite wird gezeigt, wie man spezifische praktische Aufgaben unter Verwendung des SDKs bewältigen kann.</p>
+<hr>
+<h3 id="Erste_Schritte"><a name="getting-started">Erste Schritte</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Installation">Installation</a></dt>
+   <dd>
+    Download, Installation und Einrichtung des SDKs unter Windows, OS X und Linux.</dd>
+  </dl>
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Troubleshooting">Fehlerbehebung</a></dt>
+   <dd>
+    Lösungsansätze zum Beheben klassischer Probleme und Möglichkeiten zum Erhalten weiterer Hilfe.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Getting_started_with_cfx">Erste Schritte mit cfx</a></dt>
+   <dd>
+    Die elementaren cfx-Befehle zum Erstellen von Add-ons.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Benutzeroberflächen_erstellen"><a name="create-user-interfaces">Benutzeroberflächen erstellen</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">Toolbar-Button hinzufügen</a></dt>
+   <dd>
+    Einen Button zur Firefox-Toolbar hinzufügen.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Hauptmenü erweitern</a></dt>
+   <dd>
+    Items den Hauptmenüs von Firefox hinzufügen.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">Popups anzeigen</a></dt>
+   <dd>
+    Einen Popup-Dialog unter Verwendung von HTML und JavaScript anzeigen.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">Kontextmenü erweitern</a></dt>
+   <dd>
+    Items dem Kontextmenü von Firefox hinzufügen.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Interagieren_mit_dem_Browser"><a name="interact-with-the-browser">Interagieren mit dem Browser</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Webseiten öffnen</a></dt>
+   <dd>
+    Mit Hilfe des tabs-Moduls eine Seite in einem neuen Tab oder einem neuen Fenster öffnen und auf deren Inhalt zugreifen.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Listen_for_Page_Load">Auf das Laden von Webseiten reagieren</a></dt>
+   <dd>
+    Mit dem tabs-Modul erkennen, wenn neue Webseiten geladen werden und auf deren Inhalte zugreifen.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">Geöffnete Tabs auflisten </a></dt>
+   <dd>
+    Mit dem tabs-Modul geöffnete Tabs auflisten und auf ihre Inhalte zugreifen.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Inhalte_von_Webseiten_bearbeiten"><a name="modify-web-pages">Inhalte von Webseiten bearbeiten</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">Webseiten basierend auf deren URL bearbeiten</a></dt>
+   <dd>
+    URL-Filter für Webseiten erstellen und ein Script darin ausführen, sobald eine Seite geladen wird, deren URL mit einer URL im Filter übereinstimmt.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">Aktive Webseite bearbeiten</a></dt>
+   <dd>
+    Ein Script dynamisch in der aktuell aktiven Website ausführen.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Entwicklungstechnologien"><a name="development-techniques">Entwicklungstechnologien</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Logging">Loggen</a></dt>
+   <dd>
+    Nachrichten auf der Konsole für Diagnosezwecke ausgeben.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Creating_reusable_modules">Wiederverwendbare Module erstellen</a></dt>
+   <dd>
+    Gliedere dein Add-on in einzelne Module und erleichtere somit das Entwickeln, Debuggen und Erhalten des Add-ons. Erstelle wiederverwendbare Pakete, die deine Module enthalten, damit auch andere Add-on-Entwickler diese verwenden können.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">Testen der Bestandteile</a></dt>
+   <dd>
+    Erstellen und Ausführen von Tests mit dem SDK-test-Framework.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Chrome_authority">Chrome-Autorität</a></dt>
+   <dd>
+    Erhalte Zugriff auf das Components-Objekt und erlaube deinem Add-on XPCOM-Objekte zu laden und zu verwenden.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Creating_event_targets">Erstellen von benutzerdefinierten Events</a></dt>
+   <dd>
+    Erlaube deinen erstellten Objekten, eigene Events auszugeben.</dd>
+  </dl>
+ </div>
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">Auf das Starten und Beenden des Add-ons reagieren</a></dt>
+   <dd>
+    Werde benachrichtigt, wenn ein Add-on von Firefox gestartet oder beendet wird und übergebe Argumente an das Add-on über die Kommandozeile.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Module von Drittanbietern verwenden</a></dt>
+   <dd>
+    Installation und Verwendung von zusätzlichen Modulen, die nicht im SDK enthalten sind.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/l10n">Lokalisierung</a></dt>
+   <dd>
+    Entwicklung lokalisierbarer Add-ons.</dd>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">Entwicklung für mobile Endgeräte</a></dt>
+   <dd>
+    Entwicklung von Add-ons für Firefox Mobile für Android.</dd>
+  </dl>
+ </div>
+</div>
+<hr>
+<h3 id="Zusammenfassung"><a name="putting-it-together">Zusammenfassung</a></h3>
+<div class="column-container">
+ <div class="column-half">
+  <dl>
+   <dt>
+    <a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Add-on "Annotator"</a></dt>
+   <dd>
+    Walk-through durch das Beispiel-Add-on "Annotator".</dd>
+  </dl>
+ </div>
+</div>
+<p> </p>
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/installation/index.html b/files/de/mozilla/add-ons/sdk/tutorials/installation/index.html
new file mode 100644
index 0000000000..28e899226e
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tutorials/installation/index.html
@@ -0,0 +1,134 @@
+---
+title: Installation
+slug: Mozilla/Add-ons/SDK/Tutorials/Installation
+translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation
+---
+<div class="warning">
+<p><strong><code>Die </code></strong><strong><code>cfx</code> Installation ist veraltet. Sie sollten stattdessen  <a href="https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm">jpm</a> benutzen.</strong></p>
+
+<p>Mehr Informationen finden Sie unter <a href="https://blog.mozilla.org/addons/2015/02/26/jpm-replaces-cfx-for-firefox-38/">JPM replaces CFX for Firefox 38</a>.</p>
+</div>
+
+<h2 id="Vorraussetzungen">Vorraussetzungen</h2>
+
+<p>Um mit dem Add-on SDK zu entwickeln, brauchen Sie:</p>
+
+<ul>
+ <li><a href="http://www.python.org/">Python</a> 2.5, 2.6 or 2.7. Achtung, die Versionen 3.x von Python werden auf keinen Plattformen unterstützt. Python sollte in ihrem Pfad enthalten sein.</li>
+ <li>Firefox.</li>
+ <li>Die SDK: Sie können die letzte Version der SDK als <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.tar.gz">tarball</a> oder als <a href="https://ftp.mozilla.org/pub/mozilla.org/labs/jetpack/jetpack-sdk-latest.zip">zip file</a>, oder die neuste Entwicklungsversion im <a href="https://github.com/mozilla/addon-sdk">GitHub repository</a> herunterladen. Wenn Sie sich für die letzte Ebtwicklungsversion entscheiden, müssen die diese mit einer Nightly Version von Firefox verwenden.</li>
+</ul>
+
+<h2 id="Installation">Installation</h2>
+
+<h3 id="Installation_auf_FreeBSD_OS_X_Linux">Installation auf FreeBSD/ OS X / Linux</h3>
+
+<p>Entpacken Sie die Dateien an einen beliebigen Ort und navigieren Sie mit einer Kommandozeile/Shell in das Stammverzeichnis der SDK. Zum Beispiel so:</p>
+
+<pre>tar -xf addon-sdk.tar.gz
+cd addon-sdk
+</pre>
+
+<p>Danach aktivieren Sie so die SDK, wenn Sie ein Bash Benutzer sind (was die meisten sind):</p>
+
+<pre>source bin/activate
+</pre>
+
+<p>Als nicht-Bash Benutzer, müssen Sie folgenden Befehl verwenden:</p>
+
+<pre>bash bin/activate
+</pre>
+
+<p>In Ihrer Eingabeaufforderung sollten Sie jetzt einen neuen Prefix haben, der den Namen des SDK's root Verzeichniss hat:</p>
+
+<pre>(addon-sdk)~/mozilla/addon-sdk &gt;
+</pre>
+
+<h3 id="Installation_auf_Mac_mit_Homebrew">Installation auf Mac mit Homebrew</h3>
+
+<p>Falls Sie ein Mac Benutzer sind, können Sie die SDK auch mithilfe von <a href="http://brew.sh/">Homebrew</a> und dem folgenden Befehl installieren:</p>
+
+<pre>brew install mozilla-addon-sdk</pre>
+
+<p>Sobald die Installation erfolgreich abgeschlossen wurde, können Sie das cfx Programm jederzeit in der Kommandozeile verwenden und benötigen keine vorherige Aktivierung.</p>
+
+<h3 id="Installation_auf_Windows">Installation auf Windows</h3>
+
+<p>Entpacken Sie die Dateien an einen beliebigen Ort und navigieren Sie mit einer Kommandozeile/Shell in das Stammverzeichnis der SDK. Zum Beispiel so:</p>
+
+<pre>7z.exe x addon-sdk.zip
+cd addon-sdk
+</pre>
+
+<p>Dann führen Sie folgenden Befehl aus:</p>
+
+<pre>bin\activate
+</pre>
+
+<p>In Ihrer Eingabeaufforderung sollten Sie jetzt einen neuen Prefix haben, der den Namen des SDK's root Verzeichniss hat:</p>
+
+<pre>(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk&gt;
+</pre>
+
+<h2 id="Plausibilitätsprüfung"><span class="st">Plausibilitätsprüfung</span></h2>
+
+<p>Rufen Sie diesen Befehl in einer Kommandozeile auf:</p>
+
+<pre>cfx
+</pre>
+
+<p>Es sollte eine Meldung produzieren, die in etwa so aussieht, gefolgt von einer Auflistung der Benutzungsoptionen:</p>
+
+<pre>Usage: cfx [options] [command]
+</pre>
+
+<p>Das ist das <a href="/en-US/Add-ons/SDK/Tools/cfx"><code>cfx</code> Kommandozeilen Programm</a>. Es ist ihr primäres Interface für das Add-on SDK. Damit können Sie Firefox starten und ihr Add-on testen, ihr Add-on zur Veröffentlichung verpacken, sich Dokumentationen ansehen und Unit tests durchführen.</p>
+
+<h2 id="Nächste_Schritte">Nächste Schritte</h2>
+
+<p>Schauen Sie sich als nächstes das Tutorial  <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">Getting Started With cfx</a> an, das erklärt, wie man ein Add-on mit dem CFX Tool erstellt.</p>
+
+<h2 id="Fortgeschrittene_Themen">Fortgeschrittene Themen</h2>
+
+<h3 id="Das_SDK_von_Git_verwenden">Das SDK von Git verwenden</h3>
+
+<p>Die SDK wurde in GitHub entwickelt. Statt das verpackte Release zu verwenden, können Sie von <a class="external external-icon" href="https://github.com/mozilla/addon-sdk">GitHub repository </a>den letzten Entwicklungsstand, statt dem offiziellen Release verwenden.</p>
+
+<p>Wenn Sie den letzten Entwicklungsstand verwenden, benötigen Sie eine Nightly Version von Firefox und Sie können keine Add-ons bei <a class="external external-icon" href="https://addons.mozilla.org/">addons.mozilla.org</a> (AMO) einreichen, da AMP den offiziellen Release vorraussetzt.</p>
+
+<h4 id="Erweiterungen_für_AMO_von_Git_Quellen_entwickeln">Erweiterungen für AMO von Git Quellen entwickeln</h4>
+
+<p>Zum Einreichein bei <a href="https://addons.mozilla.org/">AMO</a> können nur der neuste git release tag für die Add-On SDK Quelldateien benutzt werden.</p>
+
+<p>Der Gitarchivbefehl wird benötigt um ein Paar  Git Atrributplatzhalter im Git Klonverzeichnis zu erweitern.</p>
+
+<p>git checkout 1.16</p>
+
+<p>git archive 1.16 python-lib/cuddlefish/_version.py | tar -xvf -</p>
+
+<h3 id="Permanente_Aktivierung"><code>Permanente Aktivierung</code></h3>
+
+<p>Sie können die Aktivierung permanent machen, in dem Sie die Variablen in ihrer Umgebung permanent setzen, so dass jede Eingabeaufforderung sie lesen kann. In diesem Fall müssen nicht jedesmal den activate Befehl verwenden, sobald Sie eine neue Eingabeaufforderung öffnen.</p>
+
+<p>Da sich die Anzahl der zu setzenden Variable mit jeder neuen Version des SDK ändern kann, ist es am Besten sich nach den jeweiligen Aktivierungsskripten zu richten um Festzustellen welche Variablen verwendet werden. Die Aktivierung benutzt verschieden Skripte für Bashumgebungen (Linux und OS X) und Windowsumgebungen.</p>
+
+<h4 id="Windows">Windows</h4>
+
+<p>Bei Windows, <code>benutzt bin\activate</code> die <code>activate.bat</code> Datei. Sie können die Aktivierung permanent machen, indem Sie in der Kommandozeile das setx tool verwenden.</p>
+
+<h4 id="Linux_OS_X">Linux / OS X</h4>
+
+<p>Auf Linux und OS X<code> benutz source bin/activate</code> das <code>activate</code> bash Skript. Die Aktivierung kann per <code>~/.bashrc</code> (Linux) oder <code>~/.bashprofile</code> (OS X) Permanent gemacht werden.</p>
+
+<p>Eine Alternative ist das Erstellen eines symbolischen Links im Ordner <code>~/bin, </code>der auf das cfx Programm verweist:</p>
+
+<pre>ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
+</pre>
+
+<p>Falls Sie Homebrew zur Installation des SDKs verwenden, werden die Umgebungsvariablen bereits permanent für Sie gesetzt.</p>
+
+<h2 id="activate">activate</h2>
+
+<p>Der activate Befehl setzt Umgebungsvariablen, die zur Nutzung der SDK nötig sind. Er setzt die Variablen nur für die aktuelle Kommandozeile. Das heisst, wenn Sie eine neue Kommandozeile öffnen, müssen Sie den Befehl erneut ausführen, bevor Sie die SDK wieder benutzen können.</p>
+
+<p>Das bedeutet, dass Sie mehrere Kopien der SDK an verschiedenen Orten ihrer Festplatte haben können und zwischen diesen wechseln können, oder sogar gleichzeitig in verschiedenen Eingabeaufforderungen aktiviert haben können.</p>
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html b/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html
new file mode 100644
index 0000000000..9d33162519
--- /dev/null
+++ b/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html
@@ -0,0 +1,476 @@
+---
+title: Developing for Firefox Mobile
+slug: Mozilla/Add-ons/SDK/Tutorials/Mobile_development
+translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Mobile_development
+---
+<div class="warning">
+ <p>Developing add-ons for Firefox Mobile is still an experimental feature of the SDK. Although the SDK modules used are stable, the setup instructions and cfx commands are likely to change.</p>
+</div>
+<div class="note">
+ <p><span>To follow this tutorial you'll need to have <a href="/en-US/Add-ons/SDK/Tutorials/Installation">installed the SDK</a> and learned the <a href="/en-US/Add-ons/SDK/Tutorials/Getting_Started_With_cfx">basics of <code>cfx</code></a>. </span></p>
+</div>
+<p>Firefox for Android implements its UI using native Android widgets instead of XUL. With the add-on SDK you can develop add-ons that run on this new version of Firefox Mobile as well as on the desktop version of Firefox.</p>
+<p>You can use the same code to target both desktop Firefox and Firefox Mobile, and just specify some extra options to <code>cfx run</code>, <code>cfx test</code>, and <code>cfx xpi</code> when targeting Firefox Mobile.</p>
+<p>Right now not all modules are fully functional, but we're working on adding support for more modules. The <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development#Module_Compatibility">tables at the end of this guide</a> list the modules that are currently supported on Firefox Mobile.</p>
+<p>This tutorial explains how to run SDK add-ons on an Android device connected via USB to your development machine. We'll use the <a href="http://developer.android.com/guide/developing/tools/adb.html">Android Debug Bridge</a> (adb) to communicate between the Add-on SDK and the device.</p>
+<p><img src="https://mdn.mozillademos.org/files/6555/mobile-setup-adb.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+<p>It's possible to use the <a href="http://developer.android.com/guide/developing/tools/emulator.html">Android emulator</a> to develop add-ons for Android without access to a device, but it's slow, so for the time being it's much easier to use the technique described below.</p>
+<h2 id="Setting_up_the_Environment">Setting up the Environment</h2>
+<p>First you'll need an <a href="https://wiki.mozilla.org/Mobile/Platforms/Android#System_Requirements">Android device capable of running the native version of Firefox Mobile</a>. Then:</p>
+<ul>
+ <li>install the <a href="https://wiki.mozilla.org/Mobile/Platforms/Android#Download_Nightly">Nightly build of the native version of Firefox Mobile</a> on the device.</li>
+ <li><a href="http://developer.android.com/guide/developing/device.html#setting-up">enable USB debugging on the device (step 3 of this link only)</a></li>
+</ul>
+<p>On the development machine:</p>
+<ul>
+ <li>install version 1.5 or higher of the Add-on SDK</li>
+ <li>install the correct version of the <a href="http://developer.android.com/sdk/index.html">Android SDK</a> for your device</li>
+ <li>using the Android SDK, install the <a href="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a></li>
+</ul>
+<p>Next, attach the device to the development machine via USB.</p>
+<p>Now open up a command shell. Android Platform Tools will have installed <code>adb</code> in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path. Then type:</p>
+<pre>adb devices
+</pre>
+<p>You should see some output like:</p>
+<pre>List of devices attached
+51800F220F01564 device
+</pre>
+<p>(The long hex string will be different.)</p>
+<p>If you do, then <code>adb</code> has found your device and you can get started.</p>
+<h2 id="Running_Add-ons_on_Android">Running Add-ons on Android</h2>
+<p>You can develop your add-on as normal, as long as you restrict yourself to the supported modules.</p>
+<p>When you need to run the add-on, first ensure that Firefox is not running on the device. Then execute <code>cfx run</code> with some extra options:</p>
+<pre>cfx run -a fennec-on-device -b /path/to/adb --mobile-app fennec --force-mobile
+</pre>
+<p>See <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development#cfx_Options_for_Mobile_Development">"cfx Options for Mobile Development"</a> for the details of this command.</p>
+<p>In the command shell, you should see something like:</p>
+<pre>Launching mobile application with intent name org.mozilla.fennec
+Pushing the addon to your device
+Starting: Intent { act=android.activity.MAIN cmp=org.mozilla.fennec/.App (has extras) }
+--------- beginning of /dev/log/main
+--------- beginning of /dev/log/system
+Could not read chrome manifest 'file:///data/data/org.mozilla.fennec/chrome.manifest'.
+info: starting
+info: starting
+zerdatime 1329258528988 - browser chrome startup finished.
+</pre>
+<p>This will be followed by lots of debug output.</p>
+<p>On the device, you should see Firefox launch with your add-on installed.</p>
+<p><code>console.log()</code> output from your add-on is written to the command shell, just as it is in desktop development. However, because there's a lot of other debug output in the shell, it's not easy to follow. The command <code>adb logcat</code> prints <code>adb</code>'s log, so you can filter the debug output after running the add-on. For example, on Mac OS X or Linux you can use a command like the below to filter only the lines of console output:</p>
+<pre>adb logcat | grep console
+</pre>
+<p>You can experiment with different filter strings on <code>adb logcat</code> to focus in on the lines relevant to you.</p>
+<p>Running <code>cfx test</code> is identical:</p>
+<pre>cfx test -a fennec-on-device -b /path/to/adb --mobile-app fennec --force-mobile
+</pre>
+<h2 id="cfx_Options_for_Mobile_Development"><a name="cfx-options">cfx Options for Mobile Development</a></h2>
+<p>As you see in the quote above, <code>cfx run</code> and <code>cfx test</code> need four options to work on Android devices.</p>
+<table>
+ <colgroup>
+  <col>
+  <col>
+ </colgroup>
+ <tbody>
+  <tr>
+   <td><code>-a fennec-on-device</code></td>
+   <td>This tells the Add-on SDK which application will host the add-on, and should be set to "fennec-on-device" when running an add-on on Firefox Mobile on a device.</td>
+  </tr>
+  <tr>
+   <td><code>-b /path/to/adb</code></td>
+   <td>
+    <p>As we've seen, <code>cfx</code> uses the Android Debug Bridge (adb) to communicate with the Android device. This tells <code>cfx</code> where to find the <code>adb</code> executable.</p>
+    <p>You need to supply the full path to the <code>adb</code> executable.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--mobile-app</code></td>
+   <td>
+    <p>This is the name of the <a href="http://developer.android.com/reference/android/content/Intent.html"> Android intent</a>. Its value depends on the version of Firefox Mobile that you're running on the device:</p>
+    <ul>
+     <li><code>fennec</code>: if you're running Nightly</li>
+     <li><code>fennec_aurora</code>: if you're running Aurora</li>
+     <li><code>firefox_beta</code>: if you're running Beta</li>
+     <li><code>firefox</code>: if you're running Release</li>
+    </ul>
+    <p>If you're not sure, run a command like this (on OS X/Linux, or the equivalent on Windows):</p>
+    <pre>
+adb shell pm list packages | grep mozilla</pre>
+    <p>You should see "package" followed by "org.mozilla." followed by a string. The final string is the name you need to use. For example, if you see:</p>
+    <pre>
+package:org.mozilla.fennec</pre>
+    <p>...then you need to specify:</p>
+    <pre>
+--mobile-app fennec</pre>
+    <p>This option is not required if you have only one Firefox application installed on the device.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>--force-mobile</code></td>
+   <td>
+    <p>This is used to force compatibility with Firefox Mobile, and should always be used when running on Firefox Mobile.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Packaging_Mobile_Add-ons">Packaging Mobile Add-ons</h2>
+<p>To package a mobile add-on as an XPI, use the command:</p>
+<pre>cfx xpi --force-mobile
+</pre>
+<p>Actually installing the XPI on the device is a little tricky. The easiest way is probably to copy the XPI somewhere on the device:</p>
+<pre>adb push my-addon.xpi /mnt/sdcard/
+</pre>
+<p>Then open Firefox Mobile and type this into the address bar:</p>
+<pre>file:///mnt/sdcard/my-addon.xpi
+</pre>
+<p>The browser should open the XPI and ask if you want to install it.</p>
+<p>Afterwards you can delete it using <code>adb</code> as follows:</p>
+<pre>adb shell
+cd /mnt/sdcard
+rm my-addon.xpi
+</pre>
+<p><a name="modules-compatibility"></a></p>
+<h2 id="Module_Compatibility">Module Compatibility</h2>
+<p>Modules not supported in Firefox Mobile are <span>marked</span> in the tables below.</p>
+<h3 id="High-Level_APIs">High-Level APIs</h3>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 200px;">addon-page</td>
+   <td style="background-color: rgb(255, 51, 51); width: 200px;">Not supported</td>
+  </tr>
+  <tr>
+   <td>base64</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc33;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>clipboard</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>context-menu</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>hotkeys</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc33;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>indexed-db</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>l10n</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>notifications</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>page-mod</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>page-worker</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>panel</td>
+   <td style="background-color: rgb(255, 51, 51);"><span style="background-color: #ff3333;">Not supported</span></td>
+  </tr>
+  <tr>
+   <td>passwords</td>
+   <td style="background-color: rgb(102, 204, 51);"><span style="background-color: #66cc66;">Supported</span></td>
+  </tr>
+  <tr>
+   <td>private-browsing</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>querystring</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>request</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>selection</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>self</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>simple-prefs</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>simple-storage</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>tabs</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>timers</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>ui</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>url</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>widget</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>windows</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Low-Level_APIs">Low-Level APIs</h3>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 200px;">loader</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>chrome</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>console/plain-text</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>console/traceback</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>content/content</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>content/loader</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>content/mod</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>content/worker</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>core/heritage</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>core/namespace</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>core/promise</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>event/core</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>event/target</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>frame/hidden-frame</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>frame/utils</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>io/byte-streams</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>io/file</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>io/text-streams</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>lang/functional</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>lang/type</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>loader/cuddlefish</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>loader/sandbox</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>net/url</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>net/xhr</td>
+   <td style="width: 200px; background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>places/bookmarks</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>places/favicon</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>places/history</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>platform/xpcom</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>preferences/service</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>stylesheet/style</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>stylesheet/utils</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/environment</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/events</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/globals</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/runtime</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/unload</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>system/xul-app</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>tabs/utils</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>test/assert</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>test/harness</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>test/httpd</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>test/runner</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>test/utils</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>ui/button/action</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>ui/button/toggle</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>ui/frame</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>ui/id</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>ui/sidebar</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>ui/toolbar</td>
+   <td style="background-color: rgb(255, 51, 51);">Not supported</td>
+  </tr>
+  <tr>
+   <td>util/array</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/collection</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/deprecate</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/list</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/match-pattern</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/object</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>util/uuid</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+  <tr>
+   <td>window/utils</td>
+   <td style="background-color: rgb(102, 204, 51);">Supported</td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
diff --git a/files/de/mozilla/add-ons/security_best_practices_in_extensions/index.html b/files/de/mozilla/add-ons/security_best_practices_in_extensions/index.html
new file mode 100644
index 0000000000..689a9b9679
--- /dev/null
+++ b/files/de/mozilla/add-ons/security_best_practices_in_extensions/index.html
@@ -0,0 +1,80 @@
+---
+title: Sicherheitsleitfaden bei Erweiterungen
+slug: Mozilla/Add-ons/Security_best_practices_in_extensions
+tags:
+  - Add-ons
+  - Anleitung
+  - Erweiterungen
+  - Leitfaden
+  - Sicherheit
+translation_of: Archive/Add-ons/Security_best_practices_in_extensions
+---
+<p>{{ draft() }}</p>
+
+<p>Dieses Dokument ist dazu gedacht, für Entwickler als Leitfaden zu bestmöglichen Vorgensweisen bei der Absicherung ihrer Erweiterung zu dienen. Dein Ziel ist es, deine Nutzer zu schützen. Einige Einträge sind strikte Richtlinien, was Bedeutet, dass wenn Du diesen nicht folgst, dein Add-On im Gegenzug auf Mozilla Add-Ons nicht akzeptiert wird. Andere Einträge sind Empfehlungen. Der Unterschied wird klar gekennzeichnet.</p>
+
+<p>Es ist aus der Perspektive einer Firefox Erweiterung geschrieben, aber die meisten Einträge beziehen sich auf Erweiterungen für andere Mozilla-basierte Applikationen wie Thunderbird oder SeaMonkey.</p>
+
+<h2 id="Handhabung_von_Webinhalten">Handhabung von Webinhalten</h2>
+
+<p>Im Allgemeinen ist der beste Weg sicherzustellen, dass der Browser beim Laden von Inhalten nicht kompromittiert wird, dafür zu sorgen, dass diese keine entsprechenden Rechte haben. Eine detailliertere Erklärung dieses Prozesses findet sich unter <a class="internal" href="https://developer.mozilla.org/en/Displaying_web_content_in_an_extension_without_security_issues" title="En/Displaying web content in an extension without security issues">Webinhalte ohne Sicherheitsprobleme in einer Erweiterung anzeigen</a>.</p>
+
+<p>Die Rechte, die ein Dokument bekommt, hängen auch davon ab, wo es herkommt.  Zum Beispiel: Wenn Du eine chrome URL lädst, bedeutet es, dass der Inhalt in Firefox registriert wurde und vollen Zugriff hat. Inhalt von einer Domain (wie http://example.com) kann nur auf die gleiche Domain zugreifen. Über das File Protocol geladene Dateien können auf solche zugreifen, die auf der Festplatte und anderen lokalen Datenträgern liegen. Es gibt Wege, die content/chrome Sicherheitsbarriere zu umgehen, falls Du zum Beispiel möchtest, dass eine Webseite eine Notifikation an ein Add-On sendet (oder umgekehrt). Ein Weg das zu tun ist es, eigene DOM Events zu nutzen; siehe <a class="internal" href="/en/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="en/Code snippets/Interaction between privileged and non-privileged pages">Interaktionen zwischen priviligierten und nicht-priviligierten Seiten</a>.</p>
+
+<p>Unabhängig davon, wo das Dokument herkommt, kannst du weiter Beschränken, was es kann, indem du Eigenschaften zum Dokumentenhalter - auch bekannt als docshell - zuweist.</p>
+
+<p><code>frame.docShell.allowImages = false;<br>
+ frame.docShell.allowJavascript = false;<br>
+ frame.docShell.allowPlugins = false;</code></p>
+
+<p>Es gibt mehr Beispiele in dem oben gelisteten Dokument. Unter gewissen Umständen möchte man Code in der Erweiterung ausführen, allerdings solltest du ihm eingeschränkte Rechte geben. Einer der besten Wege das zu tun ist <a class="internal" href="/en/Components.utils.evalInSandbox" title="en/Components.utils.evalInSandbox"><code>Components.utils.evalInSandbox()</code></a> zu nutzen. Beachte, dass Objekte, die an die Sandbox weitergegeben werden, eingeschränkt sind, aber solche, die wieder herauskommen es nicht sind. Nimm Bezug auf den Artikel, um herauszufinden, wie du solche Tücken vermeidest. Für weitere Informationen, siehe den Abschnitt evalInSandbox.</p>
+
+<h2 id="Die_Sidebar_Ein_Anwendungsfall">Die Sidebar: Ein Anwendungsfall</h2>
+
+<p>Die Sidebar in Firefox ist dafür gestaltet, sowohl chrome (priviligierte) Inhalte, als auch Web (nichtpriviligierte) Inhalte zu beinhalten - letzteres in Form von Webseiten. Diese Webseiten können von einem Server oder von lokalen HTML Dateien, die mit der Erweiterung gekommen sind, stammen. Für Seiten, die vom Server kommen, musst du Schritte vornehmen, um zu sicherzustellen, dass die Inhalte nicht in den Browser rückrufen und Schadcode ausführen. Hauptsächlich wird dies bewerkstelligt, indem man ein Iframe- oder Browserelement in der Sidebar erstellt und dort die Inhalte lädt. Gebe dem Inhalt ein type="content" Attribut, welches den Code im Wesentlichen sandboxed und alle Rückrufe direkt nach chrome blockiert.</p>
+
+<h2 id="eval()_in_einer_Erweiterung_nutzen">eval() in einer Erweiterung nutzen</h2>
+
+<p>Das Nutzen der eingebauten JavaScript Funktion {{jsxref("eval")}} ist im Kontext von Erweiterungen verpönt. Während es einige Fälle gibt, in denen die Nutzung legitim ist, gibt es meist sicherere Alternativen. <a class="external" href="http://adblockplus.org/blog/five-wrong-reasons-to-use-eval-in-an-extension" title="http://adblockplus.org/blog/five-wrong-reasons-to-use-eval-in-an-extension">Dieser Blogeintrag</a> bietet einige exzellente Beispiele, warum man eval() <strong>nicht </strong>nutzen sollte.</p>
+
+<h2 id="Gesandboxte_HTTP_Verbindungen">Gesandboxte HTTP Verbindungen</h2>
+
+<p>Der Hauptzweck von gesandboxten HTTP Verbindungen ist es, mit einem Webdienst zu kommunizieren, ohne mit im Browser zu der Website/dem Service gesetzten Cookies zu interferieren. Wenn Du zum Beispiel Fotos oder andere Daten von einer photo sharing Seite lädst, kannst du die Verbindungen sandboxen, sodass normales Surfen des Nutzers auf der Webseite nicht beeinflusst wird. Für einen echten Anwendungsfall, siehe <a class="external" href="http://weblogs.mozillazine.org/doron/archives/2006/06/creating_sandboxed_http_connec.html" title="http://weblogs.mozillazine.org/doron/archives/2006/06/creating_sandboxed_http_connec.html">diesen Blogeintrag</a>.</p>
+
+<h2 id="Umgang_mit_Logins_und_Passwörtern">Umgang mit Logins und Passwörtern</h2>
+
+<p>Es gibt viele Möglichkeiten, Daten in Firefox zu speichern, aber für Logins und Passwörter, solltest Du den <a class="internal" href="/en/XPCOM_Interface_Reference/Using_nsILoginManager" title="en/Using nsILoginManager">Login Manager</a> nutzen. Das ist der gleiche Speicher, welcher Logins von Webseiten beinhaltet und Passwörter können nur abgerufen werden, indem die Kombination von Seite/Username dem Author bekannt sind. Die Gepflogenheit für Erweiterungen ist es, eine chrome URL als den Seitenidentifikator zu nutzen, um Konflikte mit Logins für Seiten zu verhindern. Es könnte der Fall sein, dass deine Erweiterung ein anderes Werkzeug oder andere Werkzeuge für Dienste auf deiner Seite anbietet.</p>
+
+<p>Diese Herangehensweise ist vorzuziehen, da es den Nutzern eine gewohnte Oberfläche für die Interaktion mit Logins über den <a class="external" href="https://support.mozilla.org/de/kb/passworter-verwalten-speichern-loeschen-aendern" title="http://support.mozilla.com/en-US/kb/Remembering+passwords">Firefox Passwort Manager</a> bietet. Wenn Nutzer Logins über die "Neueste Chronik löschen" Option säubern, wird das die Daten deiner Erweiterung miteinbeziehen.</p>
+
+<h2 id="APIs_und_Umgang_mit_anderen_Daten">APIs und Umgang mit anderen Daten</h2>
+
+<p>Web Inhalte sind mehr als nur Seiten, und mehr und mehr Add-Ons interagieren über das Application Programming Interfae (API) mit Webdiensten.</p>
+
+<ul>
+ <li>API Provider sollten das HTTPS Protokoll nutzen, welches besseren Schutz für Daten über das Netzwerk bietet.</li>
+ <li>JSON ist ein beliebtes Datenformat für Antwortenformate von Webdienste geworden. Gehe sicher, <a class="internal" href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="En/Using native JSON">Natives JSON nutzen</a> zu lesen, um den richten Umgang damit herauszufinden.</li>
+ <li>APIs können nicht mit selbst-signierten Zertifikaten genutzt werden.</li>
+</ul>
+
+<h2 id="Remote_Javascript_und_-Inhalte">Remote Javascript und -Inhalte</h2>
+
+<p>Es gibt eine Zahl von Arten, wie Remotescripte in Erweiterungen genutzt werden können. Sie können in Inhalten eingebettet oder in Intervallen heruntergeladen werden.</p>
+
+<p>Nicht-chrome URLs in chrome XUL oder HTML, so wie im folgenden Beispiel sind <strong>nicht</strong> erlaubt:</p>
+
+<p><code>&lt;script type="text/javascript" src="<span class="nowiki">http://mysite.greatsite.com/js/wow-content.js</span>" /&gt;</code></p>
+
+<p>Im Allgemeinen sind Skripte von Remotequellen, die im Kontext von chrome laufen, nicht akzeptabel, da die Quelle der Skripte nie zu 100% garantiert werden kann und sie für Man-In-The-Middle Attacken empfindlich sind. Die einzig legitime Umgebung für Remoteskripte ist es, in einer Sandbox zu laufen. Für mehr Informationen, siehe die Sektion <a class="internal" href="#evalInSandbox" title="en/Security best practices in extensions#evalInSandbox"><code>evalInSandbox()</code></a>.</p>
+
+<h2 id="evalInSandbox">evalInSandbox</h2>
+
+<p>Das <a class="internal" href="/en/Components.utils.evalInSandbox" title="en/Components.utils.evalInSandbox">evalInSandbox Dokument</a> erklärt die Funktion ziemlich gut, also wird es hier keine Wiederholung geben. Die Nützlichkeit und Kraft der Funktionsweise wird von der beliebten Erweiterung <a class="link-https" href="https://addons.mozilla.org/de/firefox/addon/748" title="https://addons.mozilla.org/de/firefox/addon/748">Greasemonkey</a> veranschaulich, welche unter der Prämisse arbeitet, dass Skripte heruntergeladen und gespeichert werden, um im Kontext von Webinhalten via der Sandbox injiziert zu werden. Viele Erweiterungen nutzen den <a class="external external-icon" href="http://arantius.com/misc/greasemonkey/script-compiler" title="http://arantius.com/misc/greasemonkey/script-compiler">Greasemonkey compiler</a>, um die Funktion aus Bequemlichkeit in ihrer Erweiterung zu bündeln. Wenn Du dich entscheidest das zu tun, sei vorsichtig beim Editieren von gebündelten Dateien, insofern als, gut durchdachte Sicherheitsarchitekturen nicht zu verletzen.</p>
+
+<h2 id="Drittanbieter_JavaScript">Drittanbieter JavaScript</h2>
+
+<p>Im Kontext von Webseiten, ist das Nutzen von JavaScripten, welche von anderen geschrieben wurden sehr geläufig. Auch in Add-Ons ist es nicht unbekannt und kann einen nützlichen Weg darstellen, um Codewiederholungen zu vermeiden und die Entwicklung zu beschleunigen. <a class="external" href="http://adblockplus.org/blog/third-party-javascript-yes-it-is-a-security-risk">Dieser Artikel</a> ist über Webseiten, aber liefert einige Einsichten in generelle Risiken. Wenn Du andere Skripte einbettest, gibt es eine Reihe von Dingen, die du tun kannst, um ihre Integrität und Sicherheit für Nutzer zu gewährleisten. Als erstes, es immer von einer glaubwürdigen Quelle zu beziehen. Eine andere Sache, die du tun solltest, ist das Namespacen, nur für den Fall, dass andere Add-Ons es inkludieren. Zum Beispiel, wenn Du jQuery nutzt, gibt es da <a class="external external-icon" href="http://docs.jquery.com/Using_jQuery_with_Other_Libraries" title="http://docs.jquery.com/Using_jQuery_with_Other_Libraries"><code>jQuery.noConflict()</code></a>.</p>
+
+<h2 id="Fazit">Fazit</h2>
+
+<p>Sicherheit kann nicht als selbstverständlich angesehen werden und jede Veröffentlichung deines Add-Ons, sollte es eine neue Sicherheitsprüfung geben. Ein guter Ort, um mit Mozillas Sicherheitsmeldungen und Sicherheitsdiskussionen mitzuhalten, ist im  <a class="external external-icon" href="http://blog.mozilla.com/security/" title="http://blog.mozilla.com/security/">Mozilla Security Blog</a>.</p>
diff --git a/files/de/mozilla/add-ons/themes/obsolete/index.html b/files/de/mozilla/add-ons/themes/obsolete/index.html
new file mode 100644
index 0000000000..d420b6ebf0
--- /dev/null
+++ b/files/de/mozilla/add-ons/themes/obsolete/index.html
@@ -0,0 +1,10 @@
+---
+title: Obsolete
+slug: Mozilla/Add-ons/Themes/Obsolete
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Mozilla/Add-ons/Themes/Obsolete
+---
+<p>This page collects theme docs that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.</p>
+<p>{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}</p>
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>
diff --git a/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html b/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html
new file mode 100644
index 0000000000..184dccf3d6
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html
@@ -0,0 +1,135 @@
+---
+title: browserAction
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction
+tags:
+  - API
+  - Add-ons
+  - Extensions
+  - Interface
+  - NeedsTranslation
+  - Non-standard
+  - Reference
+  - TopicStub
+  - WebExtensions
+  - browserAction
+translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Adds a button to the browser's toolbar.</p>
+
+<p>A <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> is a button in the browser's toolbar.</p>
+
+<p>You can associate a popup with the button. The popup is specified using HTML, CSS and JavaScript, just like a normal web page. JavaScript running in the popup gets access to all the same WebExtension APIs as your background scripts, but its global context is the popup, not the current page displayed in the browser. To affect web pages you need to communicate with them via <a href="/en-US/Add-ons/WebExtensions/Modify_a_web_page#Messaging">messages</a>.</p>
+
+<p>If you specify a popup, it will be shown — and the content will be loaded — when the user clicks the icon. If you do not specify a popup, then when the user clicks the icon an event is dispatched to your extension.</p>
+
+<p>You can define most of a browser action's properties declaratively using the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> key in the manifest.json.</p>
+
+<p>With the <code>browserAction</code> API, you can:</p>
+
+<ul>
+ <li>use {{WebExtAPIRef("browserAction.onClicked")}} to listen for clicks on the icon.</li>
+ <li>get and set the icon's properties — icon, title, popup, and so on. You can get and set these globally across all tabs, or for a specific tab by passing the tab ID as an additional argument.</li>
+</ul>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browserAction.ColorArray")}}</dt>
+ <dd>An array of four integers in the range 0-255 defining an RGBA color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.ImageDataType")}}</dt>
+ <dd>Pixel data for an image. Must be an <code><a href="/en-US/docs/Web/API/ImageData">ImageData</a></code> object (for example, from a {{htmlelement("canvas")}} element).</dd>
+</dl>
+
+<h2 id="Functions">Functions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browserAction.setTitle()")}}</dt>
+ <dd>Sets the browser action's title. This will be displayed in a tooltip.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getTitle()")}}</dt>
+ <dd>Gets the browser action's title.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setIcon()")}}</dt>
+ <dd>Sets the browser action's icon.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setPopup()")}}</dt>
+ <dd>Sets the HTML document to be opened as a popup when the user clicks on the browser action's icon.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getPopup()")}}</dt>
+ <dd>Gets the HTML document set as the browser action's popup.</dd>
+ <dt>{{WebExtAPIRef("browserAction.openPopup()")}}</dt>
+ <dd>Open the browser action's popup.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setBadgeText()")}}</dt>
+ <dd>Sets the browser action's badge text. The badge is displayed on top of the icon.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getBadgeText()")}}</dt>
+ <dd>Gets the browser action's badge text.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setBadgeBackgroundColor()")}}</dt>
+ <dd>Sets the badge's background color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getBadgeBackgroundColor()")}}</dt>
+ <dd>Gets the badge's background color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.setBadgeTextColor()")}}</dt>
+ <dd>Sets the badge's text color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.getBadgeTextColor()")}}</dt>
+ <dd>Gets the badge's text color.</dd>
+ <dt>{{WebExtAPIRef("browserAction.enable()")}}</dt>
+ <dd>Enables the browser action for a tab. By default, browser actions are enabled for all tabs.</dd>
+ <dt>{{WebExtAPIRef("browserAction.disable()")}}</dt>
+ <dd>Disables the browser action for a tab, meaning that it cannot be clicked when that tab is active.</dd>
+ <dt>{{WebExtAPIRef("browserAction.isEnabled()")}}</dt>
+ <dd>Checks whether the browser action is enabled or not.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("browserAction.onClicked")}}</dt>
+ <dd>Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.browserAction")}}</p>
+
+<div class="hidden note">
+<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p>
+
+<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p>
+</div>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browserAction"><code>chrome.browserAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json"><code>browser_action.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html b/files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html
new file mode 100644
index 0000000000..2a4a40e794
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html
@@ -0,0 +1,136 @@
+---
+title: browserAction.setPopup()
+slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup
+translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>Sets the HTML document that will be opened as a popup when the user clicks on the browser action's icon. Tabs without a specific popup will inherit the global popup, which defaults to the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action"><code>default_popup</code></a> specified in the manifest.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox brush:js">browser.browserAction.setPopup(
+  details // object
+)
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>details</code></dt>
+ <dd><code>object</code>.</dd>
+ <dd>
+ <dl class="reference-values">
+  <dt><code>tabId</code>{{optional_inline}}</dt>
+  <dd><code>integer</code>. Sets the popup only for a specific tab. The popup is reset when the user navigates this tab to a new page.</dd>
+  <dt><code>windowId</code>{{optional_inline}}</dt>
+  <dd><code>integer</code>. Sets the popup only for the specified window.</dd>
+ </dl>
+
+ <dl class="reference-values">
+  <dt><code>popup</code></dt>
+  <dd>
+  <p><code>string</code> or <code>null</code>. The HTML file to show in a popup, specified as a URL.</p>
+
+  <p>This can point to a file packaged within the extension (for example, created using {{WebExtAPIRef("extension.getURL")}}), or a remote document (e.g. <code>https://example.org/</code>).</p>
+
+  <p>If an empty string (<code>""</code>) is passed here, the popup is disabled, and the extension will receive {{WebExtAPIRef("browserAction.onClicked")}} events.</p>
+
+  <p>If <code>popup</code> is <code>null</code>:</p>
+
+  <p>If <code>tabId</code> is specified, removes the tab-specific popup so that the tab inherits the global popup.</p>
+
+  <p>If <code>windowId</code> is specified, removes the window-specific popup so that the window inherits the global popup.</p>
+
+  <p>Otherwise it reverts the global popup to the default value.</p>
+  </dd>
+ </dl>
+ </dd>
+</dl>
+
+<ul>
+ <li>If <code>windowId</code> and <code>tabId</code> are both supplied, the function fails and the popup is not set.</li>
+ <li>If <code>windowId</code> and <code>tabId</code> are both omitted, the global popup is set.</li>
+</ul>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.browserAction.setPopup",2)}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This code adds a pair of context menu items that you can use to switch between two popups. Note that you'll need the "contextMenus" <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> set in the extension's manifest to create context menu items.</p>
+
+<pre class="brush: js">function onCreated() {
+  if (browser.runtime.lastError) {
+    console.log("error creating item:" + browser.runtime.lastError);
+  } else {
+    console.log("item created successfully");
+  }
+}
+
+browser.contextMenus.create({
+  id: "popup-1",
+  type: "radio",
+  title: "Popup 1",
+  contexts: ["all"],
+  checked: true
+}, onCreated);
+
+browser.contextMenus.create({
+  id: "popup-2",
+  type: "radio",
+  title: "Popup 2",
+  contexts: ["all"],
+  checked: false
+}, onCreated);
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "popup-1") {
+    browser.browserAction.setPopup({popup: "/popup/popup1.html"})
+  } else if (info.menuItemId == "popup-2") {
+    browser.browserAction.setPopup({popup: "/popup/popup2.html"})
+  }
+});</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browserAction#method-setPopup"><code>chrome.browserAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json"><code>browser_action.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/api/commands/index.html b/files/de/mozilla/add-ons/webextensions/api/commands/index.html
new file mode 100644
index 0000000000..af45cea002
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/commands/index.html
@@ -0,0 +1,83 @@
+---
+title: commands
+slug: Mozilla/Add-ons/WebExtensions/API/commands
+translation_of: Mozilla/Add-ons/WebExtensions/API/commands
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Verwenden Sie die Ausführungsbefehle der Benutzer, die Sie mit Hilfe des <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/commands"><code>Schlüssels commands</code> der manifest.json</a> registriert haben.</p>
+
+<h2 id="Typen">Typen</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("commands.Command")}}</dt>
+ <dd>Objekt, das einen Befehl repräsentiert. Es enthält die für den Befehl im <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/commands"><code>Schlüssel commands der </code>manifest.json</a> festgelegten Informationen.</dd>
+</dl>
+
+<h2 id="Funktionen">Funktionen</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("commands.getAll")}}</dt>
+ <dd>
+ <p>Stellt alle registrierten Befehle für diese Erweiterung zur Verfügung.</p>
+ </dd>
+ <dt>{{WebExtAPIRef("commands.reset")}}</dt>
+ <dd>
+ <p>Angegebene Befehlsbeschreibung und das Tastaturkürzel auf die im Manifest-Schlüssel angegebenen Werte zurücksetzen.</p>
+ </dd>
+ <dt>{{WebExtAPIRef("commands.update")}}</dt>
+ <dd>
+ <p>Beschreibung oder Tastenkürzel des angegebenen Befehls ändern.</p>
+ </dd>
+</dl>
+
+<h2 id="Ereignisse">Ereignisse</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("commands.onCommand")}}</dt>
+ <dd>
+ <div>Wird ausgelöst, wenn ein Befehl mit Hilfe seines zugewiesenen Tastenkürzels ausgeführt wird.</div>
+ </dd>
+</dl>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p>{{Compat("webextensions.api.commands")}} {{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Danksagungen</strong>
+
+<p>Diese API basiert auf der API <a href="https://developer.chrome.com/extensions/commands"><code>chrome.commands</code></a> von Chromium.</p>
+
+<p>Die Kompatibilitätsdaten von Microsoft Edge werden von der Microsoft Corporation bereitgestellt und stehen hier unter der Lizenz Creative Commons Attribution 3.0 United States.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/api/downloads/index.html b/files/de/mozilla/add-ons/webextensions/api/downloads/index.html
new file mode 100644
index 0000000000..7363cde811
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/downloads/index.html
@@ -0,0 +1,123 @@
+---
+title: downloads
+slug: Mozilla/Add-ons/WebExtensions/API/downloads
+translation_of: Mozilla/Add-ons/WebExtensions/API/downloads
+---
+<div>0ü</div>
+
+<p>Enables extensions to interact with the browser's download manager. You can use this API module to download files, cancel, pause, resume downloads, and show downloaded files in the file manager.</p>
+
+<p>To use this API you need to have the "downloads" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a> specified in your <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file.</p>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("downloads.FilenameConflictAction")}}</dt>
+ <dd>Defines options for what to do if the name of a downloaded file conflicts with an existing file.</dd>
+ <dt>{{WebExtAPIRef("downloads.InterruptReason")}}</dt>
+ <dd>Defines a set of possible reasons why a download was interrupted.</dd>
+ <dt>{{WebExtAPIRef("downloads.DangerType")}}</dt>
+ <dd>Defines a set of common warnings of possible dangers associated with downloadable files.</dd>
+ <dt>{{WebExtAPIRef("downloads.State")}}</dt>
+ <dd>Defines different states that a current download can be in.</dd>
+ <dt>{{WebExtAPIRef("downloads.DownloadItem")}}</dt>
+ <dd>Represents a downloaded file.</dd>
+ <dt>{{WebExtAPIRef("downloads.StringDelta")}}</dt>
+ <dd>Represents the difference between two strings.</dd>
+ <dt>{{WebExtAPIRef("downloads.DoubleDelta")}}</dt>
+ <dd>Represents the difference between two doubles.</dd>
+ <dt>{{WebExtAPIRef("downloads.BooleanDelta")}}</dt>
+ <dd>Represents the difference between two booleans.</dd>
+ <dt>{{WebExtAPIRef("downloads.DownloadTime")}}</dt>
+ <dd>Represents the time a download took to complete.</dd>
+ <dt>{{WebExtAPIRef("downloads.DownloadQuery")}}</dt>
+ <dd>Defines a set of parameters that can be used to search the downloads manager for a specific set of downloads.</dd>
+</dl>
+
+<h2 id="Functions">Functions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("downloads.download()")}}</dt>
+ <dd>Downloads a file, given its URL and other optional preferences.</dd>
+ <dt>{{WebExtAPIRef("downloads.search()")}}</dt>
+ <dd>Queries the {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} available in the browser's downloads manager, and returns those that match the specified search criteria.</dd>
+ <dt>{{WebExtAPIRef("downloads.pause()")}}</dt>
+ <dd>Pauses a download.</dd>
+ <dt>{{WebExtAPIRef("downloads.resume()")}}</dt>
+ <dd>Resumes a paused download.</dd>
+ <dt>{{WebExtAPIRef("downloads.cancel()")}}</dt>
+ <dd>Cancels a download.</dd>
+ <dt>{{WebExtAPIRef("downloads.getFileIcon()")}}</dt>
+ <dd>Retrieves an icon for the specified download.</dd>
+ <dt>{{WebExtAPIRef("downloads.open()")}}</dt>
+ <dd>Opens the downloaded file with its associated application.</dd>
+ <dt>{{WebExtAPIRef("downloads.show()")}}</dt>
+ <dd>Opens the platform's file manager application to show the downloaded file in its containing folder.</dd>
+ <dt>{{WebExtAPIRef("downloads.showDefaultFolder()")}}</dt>
+ <dd>Opens the platform's file manager application to show the default downloads folder.</dd>
+ <dt>{{WebExtAPIRef("downloads.erase()")}}</dt>
+ <dd>Erases matching {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} from the browser's download history, without deleting the downloaded files from disk.</dd>
+ <dt>{{WebExtAPIRef("downloads.removeFile()")}}</dt>
+ <dd>Removes a downloaded file from disk, but not from the browser's download history.</dd>
+ <dt>{{WebExtAPIRef("downloads.acceptDanger()")}}</dt>
+ <dd>Prompts the user to accept or cancel a dangerous download.</dd>
+ <dt>{{WebExtAPIRef("downloads.drag()")}}</dt>
+ <dd>Initiates dragging the downloaded file to another application.</dd>
+ <dt>{{WebExtAPIRef("downloads.setShelfEnabled()")}}</dt>
+ <dd>Enables or disables the gray shelf at the bottom of every window associated with the current browser profile. The shelf will be disabled as long as at least one extension has disabled it.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("downloads.onCreated")}}</dt>
+ <dd>Fires with the {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} object when a download begins.</dd>
+ <dt>{{WebExtAPIRef("downloads.onErased")}}</dt>
+ <dd>Fires with the <code>downloadId</code> when a download is erased from history.</dd>
+ <dt>{{WebExtAPIRef("downloads.onChanged")}}</dt>
+ <dd>When any of a {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}}'s properties except <code>bytesReceived</code> changes, this event fires with the <code>downloadId</code> and an object containing the properties that changed.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.downloads")}}</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/downloads"><code>chrome.downloads</code></a> API.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/api/index.html b/files/de/mozilla/add-ons/webextensions/api/index.html
new file mode 100644
index 0000000000..1a500cdc0c
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/index.html
@@ -0,0 +1,51 @@
+---
+title: JavaScript APIs
+slug: Mozilla/Add-ons/WebExtensions/API
+tags:
+  - NeedsTranslation
+  - TopicStub
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/API
+---
+<div>{{AddonSidebar}}</div>
+
+<div>
+<p>JavaScript APIs for WebExtensions can be used inside the extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a> and in any other documents bundled with the extension, including <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">browser action</a> or <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">page action</a> popups, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">sidebars</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">options pages</a>, or <a href="/en-US/Add-ons/WebExtensions/manifest.json/chrome_url_overrides">new tab pages</a>. A few of these APIs can also be accessed by an extension's <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts">content scripts</a> (see the <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs">list in the content script guide</a>).</p>
+
+<p>To use the more powerful APIs you need to <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions">request permission</a> in your extension's manifest.json.</p>
+
+<p>You can access the APIs using the <code>browser</code> namespace:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logTabs</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="keyword token">true</span><span class="punctuation token">}</span><span class="punctuation token">,</span> logTabs<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Many of the APIs are asynchronous, returning a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>:</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">logCookie</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>c<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">function</span> <span class="function token">logError</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+<span class="keyword token">var</span> setCookie <span class="operator token">=</span> browser<span class="punctuation token">.</span>cookies<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">(</span>
+  <span class="punctuation token">{</span>url<span class="punctuation token">:</span> <span class="string token">"https://developer.mozilla.org/"</span><span class="punctuation token">}</span>
+<span class="punctuation token">)</span><span class="punctuation token">;</span>
+setCookie<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>logCookie<span class="punctuation token">,</span> logError<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+</div>
+
+<div>
+<p>Note that this is different from Google Chrome's extension system, which uses the <code>chrome</code> namespace instead of <code>browser</code>, and which uses callbacks instead of promises for asynchronous functions. As a porting aid, the Firefox implementation of WebExtensions APIs supports <code>chrome</code> and callbacks as well as <code>browser</code> and promises. Mozilla has also written a polyfill which enables code that uses <code>browser</code> and promises to work unchanged in Chrome: <a class="external external-icon" href="https://github.com/mozilla/webextension-polyfill">https://github.com/mozilla/webextension-polyfill</a>.</p>
+
+<p>Microsoft Edge uses the <code>browser</code> namespace, but doesn't yet support promise-based asynchronous APIs. In Edge, for the time being, asynchronous APIs must use callbacks.</p>
+
+<p>Not all browsers support all the APIs: for the details, see <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Browser support for JavaScript APIs</a>.</p>
+</div>
+
+<div>{{SubpagesWithSummaries}}</div>
diff --git a/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html b/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html
new file mode 100644
index 0000000000..7c43bda2af
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html
@@ -0,0 +1,121 @@
+---
+title: Lesezeichen
+slug: Mozilla/Add-ons/WebExtensions/API/Lesezeich.
+translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Die <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> {{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.</p>
+
+<p>Um diese API zu verwenden, muss die Erweiterung die <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">Berechtigung</a> "Lesezeichen" in der <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a></code> Datei besitzen.</p>
+
+<h2 id="Types">Types</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("bookmarks.BookmarkTreeNodeUnmodifiable")}}</dt>
+ <dd>Ein {{jsxref("String")}} enum, das angibt, warum ein Lesezeichen oder ein Ordner unmodifizierbar ist.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.BookmarkTreeNode")}}</dt>
+ <dd>Stellt ein Lesezeichen oder einen Ordner im Lesezeichenbaum dar.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.CreateDetails")}}</dt>
+ <dd>Enthält Informationen, die bei der Erstellung eines neuen Lesezeichens an die {{WebExtAPIRef("bookmarks.create()")}} Funktion übergeben werden.</dd>
+</dl>
+
+<h2 id="Functions">Functions</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("bookmarks.create()")}}</dt>
+ <dd>Erstellt ein Lesezeichen oder Ordner.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.get()")}}</dt>
+ <dd>Ruft eine oder mehrere {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ab und übergibt eine Lesezeichen-ID oder ein Array von Lesezeichen ID.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.getChildren()")}}</dt>
+ <dd>Ruft die Kinder des angegebenen {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} ab.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.getRecent()")}}</dt>
+ <dd>Ruft eine angeforderte Anzahl von zuletzt hinzugefügten Lesezeichen ab.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.getSubTree()")}}</dt>
+ <dd>Ruft einen Teil des Lesezeichenbaums ab und beginnt am angegebenen Knoten.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.getTree()")}}</dt>
+ <dd>Ruft den gesamten Lesezeichenbaum in ein Array von {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} Objekte auf.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.move()")}}</dt>
+ <dd>Moves the specified {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} to a new location in the bookmark tree.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.remove()")}}</dt>
+ <dd>Removes a bookmark or an empty bookmark folder, given the node's ID.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.removeTree()")}}</dt>
+ <dd>Recursively removes a bookmark folder; that is, given the ID of a folder node, removes that node and all its descendants.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.search()")}}</dt>
+ <dd>Searches for {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}s matching a specified set of criteria.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.update()")}}</dt>
+ <dd>Updates the title and/or URL of a bookmark, or the name of a bookmark folder, given the bookmark's ID.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<dl>
+ <dt>{{WebExtAPIRef("bookmarks.onCreated")}}</dt>
+ <dd>Fired when a bookmark or folder is created.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onRemoved")}}</dt>
+ <dd>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.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onChanged")}}</dt>
+ <dd>Fired when a bookmark or folder changes. Currently, only <code>title</code> and <code>url</code> changes trigger this.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onMoved")}}</dt>
+ <dd>Fired when a bookmark or folder is moved to a different parent folder or to a new offset within its folder.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onChildrenReordered")}}</dt>
+ <dd>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()")}}.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onImportBegan")}}</dt>
+ <dd>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.</dd>
+ <dt>{{WebExtAPIRef("bookmarks.onImportEnded")}}</dt>
+ <dd>Fired when a bookmark import session has finished.</dd>
+</dl>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("webextensions.api.bookmarks")}}</p>
+
+<div class="hidden note">
+<p>The "Chrome incompatibilities" section is included from <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities"> https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a> using the <a href="/en-US/docs/Template:WebExtChromeCompat">WebExtChromeCompat</a> macro.</p>
+
+<p>If you need to update this content, edit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities">https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities</a>, then shift-refresh this page to see your changes.</p>
+</div>
+
+<h3 id="Edge_incompatibilities">Edge incompatibilities</h3>
+
+<p>Promises are not supported in Edge. Use callbacks instead.</p>
+
+<p>{{WebExtExamples("h2")}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/bookmarks"><code>chrome.bookmarks</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json"><code>bookmarks.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>
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
new file mode 100644
index 0000000000..39498fa606
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_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
+---
+<p>{{AddonSidebar}}</p>
+
+<p>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.</p>
+
+<p>In diesem "how-to"-Artikel schauen wir uns an:</p>
+
+<ul>
+ <li>Berechtigungen, die für die Verwendung der Tabs API benötigt werden.</li>
+ <li>Mehr über Tabs und ihre Eigenschaften erfahren Sie mit {{WebExtAPIRef("tabs.query")}}.</li>
+ <li>Tabs erstellen, duplizieren, verschieben, aktualisieren, neu laden und entfernen.</li>
+ <li>Manipulationen des Zoomniveaus eines Tab.</li>
+ <li>Manipulationen eines Tabs CSS.</li>
+</ul>
+
+<p>Wir schließen dann mit Blick auf einige andere, andere Funktionen, die von der API angeboten werden.</p>
+
+<div class="blockIndicator note">
+<p><strong>Hinweis:</strong> 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 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">Artikelinhaltskripte</a> Concepts und die Anleitung ändern Sie<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">eine Webseite</a>.</p>
+</div>
+
+<p><strong>Berechtigungen und die Tabs API</strong></p>
+
+<p>Für die meisten Tabs API-Funktionen benötigen Sie keine Berechtigungen; Es gibt jedoch einige Ausnahmen:</p>
+
+<ul>
+ <li>Für den Zugriff auf die Eigenschaften <code>Tab.url</code>, <code>Tab.title </code>und <code>Tab.favIconUrl</code> des Tab-Objekts ist die Erlaubnis "Tabs" erforderlich. In Firefox benötigen Sie auch "Tabs", um eine <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">Abfrage</a> per URL durchzuführen.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">Die Host-Berechtigung</a> ist für die {{WebExtAPIRef("tabs.executeScript")}} oder  {{WebExtAPIRef("tabs.insertCSS")}}. erforderlich.</li>
+</ul>
+
+<p>Im Folgenden können Sie in der manifest.json-Datei Ihrer Erweiterung die Erlaubnis "Tabs " beantragen :</p>
+
+<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="property token">"permissions"</span><span class="operator token">:</span> <span class="punctuation token">[</span>
+  <span class="string token">"&lt;all_urls&gt;"</span><span class="punctuation token">,</span>
+  <span class="string token">"tabs"</span>
+<span class="punctuation token">]</span><span class="punctuation token">,</span></code></pre>
+
+<p>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 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">"activeTab"</a>. Diese Erlaubnis bietet die gleichen Rechte wie "Tabs" mit&lt; all _ urls &gt;,aber mit zwei Einschränkungen:</p>
+
+<ul>
+ <li>Der Benutzer muss mit der Erweiterung über seine Browser-oder Seiten-Aktion, Kontextmenü oder Tastenkombination interagieren.</li>
+ <li>Es erteilt nur die Erlaubnis innerhalb der aktiven Registerkarte.</li>
+</ul>
+
+<p>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 &lt; all _ urls &gt; Erlaubnis einer Erweiterung die Möglichkeit gibt, Skripte in jedem Tab auszuführen, zu jeder Zeit, die sie mag, während <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">"activeTab"</a> darauf beschränkt ist, der Erweiterung zu erlauben, eine vom Benutzer angeforderte Aktion in der Aktuelle Registerkarte.</p>
+
+<p><strong>Mehr über Tabs und ihre Eigenschaften entdecken</strong></p>
+
+<p>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.</p>
+
+<p>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.</p>
+
+<p>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")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>notiz:</strong></p>
+
+<ul>
+ <li><strong>In Chrome</strong> kann der Benutzer mehrere Tabs in einem Fenster auswählen, und die Tabs API sieht diese als hervorgehobene Tabs.</li>
+ <li><strong>In Firefox</strong> kann der Benutzer mehrere Tabs nicht auswählen, daher sind "hervorgehoben" und "aktiv" synonym.</li>
+</ul>
+</div>
+
+<h3 id="Wie_man_mit_dem_Beispiel_geht">Wie man mit dem Beispiel geht</h3>
+
+<p>Um zu sehen, wie  {{WebExtAPIRef("tabs.query")}} und  {{WebExtAPIRef("tabs.Tab")}} werden verwendet, lassen Sie uns durch, wie  das <a href="https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs">Tabs-Tabs-Tabs </a>Beispiel fügt die Liste von" Schalter auf Tabs "zu seiner Toolbar-Taste Popup.</p>
+
+<p><a href="https://mdn.mozillademos.org/files/15723/Switch_to_tab.png"><img alt="" src="https://mdn.mozillademos.org/files/15723/Switch_to_tab.png" style="height: 645px; width: 369px;"></a></p>
+
+<h3 id="manifest.json"><strong>manifest.json</strong></h3>
+
+<p>Hier ist das <a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/manifest.json">manifest.json</a>:</p>
+
+<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="punctuation token">{</span>
+  <span class="property token">"browser_action"</span><span class="operator token">:</span> <span class="punctuation token">{</span>
+    <span class="property token">"browser_style"</span><span class="operator token">:</span> <span class="boolean token">true</span><span class="punctuation token">,</span>
+    <span class="property token">"default_title"</span><span class="operator token">:</span> <span class="string token">"Tabs, tabs, tabs"</span><span class="punctuation token">,</span>
+    <span class="property token">"default_popup"</span><span class="operator token">:</span> <span class="string token">"tabs.html"</span>
+  <span class="punctuation token">}</span><span class="punctuation token">,</span>
+  <span class="property token">"description"</span><span class="operator token">:</span> <span class="string token">"A list of methods you can perform on a tab."</span><span class="punctuation token">,</span>
+  <span class="property token">"homepage_url"</span><span class="operator token">:</span> <span class="string token">"https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs"</span><span class="punctuation token">,</span>
+  <span class="property token">"manifest_version"</span><span class="operator token">:</span> <span class="number token">2</span><span class="punctuation token">,</span>
+  <span class="property token">"name"</span><span class="operator token">:</span> <span class="string token">"Tabs, tabs, tabs"</span><span class="punctuation token">,</span>
+  <span class="property token">"permissions"</span><span class="operator token">:</span> <span class="punctuation token">[</span>
+    <span class="string token">"tabs"</span>
+  <span class="punctuation token">]</span><span class="punctuation token">,</span>
+  <span class="property token">"version"</span><span class="operator token">:</span> <span class="string token">"1.0"</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p>Hinweis:</p>
+
+<ul>
+ <li><strong>Tabs.html wird als Standard </strong><strong>_ Popup in</strong> browser<strong> _ </strong><strong>action</strong><strong>definiert.</strong>Es wird angezeigt, wenn der Benutzer auf das Symbollei-Symbol der Erweiterung klickt.</li>
+ <li><strong>Die Berechtigungen beinhalten Registerkarten. </strong>Dies ist notwendig, um die Tabelliste zu unterstützen, da die Erweiterung den Titel der Registerkarten für die Anzeige im Popup liest.</li>
+</ul>
+</div>
+
+<h3 id="Tabs.html">Tabs.html</h3>
+
+<p>Tabs.html definiert den Inhalt des Popups der Erweiterung:</p>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="doctype token">&lt;!DOCTYPE html&gt;</span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>link</span> <span class="attr-name token">rel</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>stylesheet<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs.css<span class="punctuation token">"</span></span><span class="punctuation token">/&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel-section panel-section-header<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text-section-header<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Tabs-tabs-tabs<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-move-beginning<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Move active tab to the beginning of the window<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+
+
+…
+
+Define the other menu items
+…
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>switch-tabs<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
+
+     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>Switch to tab<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
+
+     <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-list<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+ <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs.js<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p>Hier ist eine Zusammenfassung der oben genannten tut:</p>
+
+<ol>
+ <li>Die Menüpunkte werden deklariert.</li>
+ <li>Ein leerer <code>Div </code>mit der ID-<code>Tabs-Liste</code> wird deklariert, um die Liste der Tabs zu enthalten.</li>
+ <li>Tabs.js heißt.</li>
+</ol>
+
+<h3 id="Tabs.js">Tabs.js</h3>
+
+<p>In <a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js">tabs.js</a>werdenwir sehen, wie die Liste der Tabs aufgebaut und zum Popup hinzugefügt wird.  </p>
+
+<p><strong>Das Popup schaffen</strong></p>
+
+<p>Zunächst wird ein Event-Handler hinzugefügt, um ListTabs () auszuführen , wenn tabs.html geladen wird:</p>
+
+<pre>document.addEventListener ("DOMContentLoaded", hört Tabs);</pre>
+
+<p>Das erste, was <code>listTabs ()</code> tut, ist <code>getCurrentWindowTabs ()</code>zu nennen. Hier wird ein {{WebExtAPIRef("tabs.query")}} verwendet, um eine  {{WebExtAPIRef("tabs.Tab")}} zu erhalten. Objekt für die Tabs im aktuellen Fenster:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">return</span> browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span>currentWindow<span class="punctuation token">:</span> <span class="boolean token">true</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Jetzt ist <code>listTabs()</code> bereit , den Inhalt für das Popup zu erstellen.</p>
+
+<p>Zunächst:</p>
+
+<ol>
+ <li>Schnappen Sie sich die <code>tabs-list div</code>.</li>
+ <li>Erstellen Sie ein Dokumentenfragment (in das die Liste eingebaut wird).</li>
+ <li>Setzen Sie Zähler.</li>
+ <li>Klären Sie den Inhalt der <code>Tabs-Liste div</code>.</li>
+</ol>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">listTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token"> getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+    <span class="keyword token">let</span> tabsList <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'tabs-list'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> currentTabs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createDocumentFragment</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> limit <span class="operator token">=</span> <span class="number token">5</span><span class="punctuation token">;</span>
+    <span class="keyword token">let</span> counter <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+
+    tabsList<span class="punctuation token">.</span>textContent <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span></code></pre>
+
+<p>Als nächstes werden wir die Links für jeden Tab erstellen:</p>
+
+<ol>
+ <li>Schleifen Sie sich durch die ersten 5 Elemente aus der   {{WebExtAPIRef("tabs.Tab")}} Objekt.</li>
+ <li>Fügen Sie für jeden Artikel einen Hyperlink zum Dokumentenfragment hinzu.
+  <ul>
+   <li>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).</li>
+   <li>Die Adresse des Links wird mit der Personalausweis des Tabs gesetzt.</li>
+  </ul>
+ </li>
+</ol>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> tab <span class="keyword token">of</span> tabs<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>tab<span class="punctuation token">.</span>active <span class="operator token">&amp;&amp;</span> counter <span class="operator token">&lt;=</span> limit<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+        <span class="keyword token">let</span> tabLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+        tabLink<span class="punctuation token">.</span>textContent <span class="operator token">=</span> tab<span class="punctuation token">.</span>title <span class="operator token">||</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">;</span>
+
+       tabLink<span class="punctuation token">.</span><span class="function token">setAttribute</span><span class="punctuation token">(</span><span class="string token">'href'</span><span class="punctuation token">,</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span>
+        tabLink<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">'switch-tabs'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+        currentTabs<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>tabLink<span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="punctuation token">}</span>
+
+     counter <span class="operator token">+=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+
+    <span class="punctuation token">}</span></code></pre>
+
+<p>Schließlich wird das Dokumentenfragment auf die Tabs-Liste div geschrieben:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">  tabsList<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>currentTabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><strong>Arbeiten mit dem aktiven Reiter</strong></p>
+
+<p>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:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>id <span class="operator token">===</span> <span class="string token">"tabs-alertinfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   callOnActiveTab</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">let</span> props <span class="operator token">=</span> <span class="string token">""</span><span class="punctuation token">;</span>
+     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">let</span> item <span class="keyword token">in</span> tab</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       props <span class="operator token">+=</span> <span class="template-string token"><span class="string token">`</span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span> item <span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> = </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span> tab<span class="punctuation token">[</span>item<span class="punctuation token">]</span> <span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> \n`</span></span><span class="punctuation token">;</span>
+     <span class="punctuation token">}</span>
+<span class="function token">     alert</span><span class="punctuation token">(</span>props<span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span></code></pre>
+
+<p>Wobei <code>callOnActiveTab() </code>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:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">function</span> <span class="function token">callOnActiveTab</span><span class="punctuation token">(</span><span class="parameter token">callback</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">.</span>active</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">         callback</span><span class="punctuation token">(</span>tab<span class="punctuation token">,</span> tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p><strong>Tabs erstellen, duplizieren, verschieben, aktualisieren, neu laden und entfernen</strong></p>
+
+<p>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.</p>
+
+<p>Folgende Funktionen stehen zur Verfügung:</p>
+
+<ul>
+ <li>Erstellen Sie eine neue Registerkarte ({{WebExtAPIRef("tabs.create")}}).</li>
+ <li>Duplizieren sie eine neue Registerkarte ({{WebExtAPIRef("tabs.duplicate")}}).</li>
+ <li>Entfernen Sie eine Registerkarte ({{WebExtAPIRef("tabs.remove")}}).</li>
+ <li>Verschieben Sie eine Registerkarte ({{WebExtAPIRef("tabs.move")}}).</li>
+ <li>Aktualisieren Sie die URL der Registerkarte, um — effektiv auf eine neue Seite — ({{WebExtAPIRef("tabs.update")}}).</li>
+ <li>Die Seite der Registerkarte neu Laden ({{WebExtAPIRef("tabs.reload")}}).</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>notiz:</strong></p>
+
+<p>Diese Funktionen erfordern alle die ID (oder IDs) der Registerkarte, die sie manipulieren:</p>
+
+<ul>
+ <li>{{WebExtAPIRef ("tabs.duplicate")}}</li>
+ <li>{{WebExtAPIRef("tabs.remove")}})</li>
+ <li>{{WebExtAPIRef ("tabs.move")}}</li>
+</ul>
+
+<p>Während die folgenden Funktionen auf dem aktiven Tab (sofern keine Tab-ID zur Verfügung gestellt wird) wirken:</p>
+
+<ul>
+ <li>{{WebExtAPIRef("tabs.update")}}</li>
+ <li>{{WebExtAPIRef("tabs.reload")}}</li>
+</ul>
+</div>
+
+<p><strong>Wie man mit dem Beispiel geht</strong></p>
+
+<p>Das Beispiel <a href="https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs">Tabs-Tabs</a> ü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.</p>
+
+<p>Aber zunächst ist hier eine Demonstration des Features in Aktion:</p>
+
+<p>{{EmbedYouTube("-lJRzTIvhxo")}}</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/manifest.json"><strong>manifest.json</strong></a></p>
+
+<p>Keine der Funktionen benötigt eine Betriebsgenehmigung, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.html"><strong>Tabs.html</strong></a></p>
+
+<p>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<code> &lt;a&gt; </code>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.</p>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html">  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-move-beginning<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Move active tab to the beginning of the window<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-move-end<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Move active tab to the end of the window<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>panel-section-separator<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-duplicate<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Duplicate active tab<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-reload<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Reload active tab<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span>
+    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>#<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>tabs-alertinfo<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Alert active tab info<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>br</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js"><strong>Tabs.js</strong></a></p>
+
+<p>Um das in tabs.html definierte "Menü" zu implementieren, enthält tabs.js einen Hörer für Klicks in tabs.html:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="parameter token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">function</span> <span class="function token">callOnActiveTab</span><span class="punctuation token">(</span><span class="parameter token">callback</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+<span class="function token">   getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">.</span>active</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">         callback</span><span class="punctuation token">(</span>tab<span class="punctuation token">,</span> tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Eine Reihe von <code>if</code>Anweisungen dann schauen, um die ID des Artikels geklickt.</p>
+
+<p>Dieser Code-Snippet ist für die Option "Aktive Registerkarte zum Anfang der Fensterliste verschieben":</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>id <span class="operator token">===</span> <span class="string token">"tabs-move-beginning"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   callOnActiveTab</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">,</span> tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">var</span> index <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+     <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token"><span class="operator token">!</span>tab<span class="punctuation token">.</span>pinned</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       index <span class="operator token">=</span> <span class="function token">firstUnpinnedTab</span><span class="punctuation token">(</span>tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+     <span class="punctuation token">}</span>
+     console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="template-string token"><span class="string token">`moving </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>tab<span class="punctuation token">.</span>id<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> to </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>index<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">)</span>
+     browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">move</span><span class="punctuation token">(</span><span class="punctuation token">[</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">]</span><span class="punctuation token">,</span> <span class="punctuation token">{</span>index<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span></code></pre>
+
+<p>Es ist erwähnenswert, die Verwendung von <code>console.log ()</code>. Auf diese Weise können Sie Informationen an die <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Debugging">Debugger-Konsole</a> ausgeben , was bei der Lösung von Problemen, die während der Entwicklung gefunden wurden, nützlich sein kann.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15722/console.png"></p>
+
+<p>Der Bewegungscode ruft zunächst <code>callOnActiveTab ()</code> an , der wiederum <code>getCurrentWindowTabs ()</code> 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:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">callOnActiveTab</span><span class="punctuation token">(</span><span class="parameter token">callback</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   getCurrentWindowTabs</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">tab<span class="punctuation token">.</span>active</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">         callback</span><span class="punctuation token">(</span>tab<span class="punctuation token">,</span> tabs<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span></code></pre>
+
+<p><strong>Gepinnte Tabs</strong></p>
+
+<p>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 , <code>firstUnpinnedTab ()</code> wird aufgerufen, um die Position des ersten ungepasten Tab zu finden, indem man durch das <code>Tabs</code>-Objekt Looping:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">firstUnpinnedTab</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">var</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token"><span class="operator token">!</span>tab<span class="punctuation token">.</span>pinned</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     <span class="keyword token">return</span> tab<span class="punctuation token">.</span>index<span class="punctuation token">;</span>
+   <span class="punctuation token">}</span>
+ <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>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:</p>
+
+<pre>browser.tabs.move ([tab.id], {index});</pre>
+
+<p>Die restlichen Funktionen zum Duplizieren, Laden, Erstellen und Entfernen von Tabs werden ähnlich implementiert.</p>
+
+<h4 id="Manipulationen_eines_Tab"><strong>Manipulationen eines Tab</strong></h4>
+
+<p>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.</p>
+
+<p>Der Zoomwert kann zwischen 30% und 300% liegen (dargestellt als Dezimalzahl <code>0,3 bis 3</code>).</p>
+
+<p>In Firefox sind die Standard-Zoom-Einstellungen:</p>
+
+<ul>
+ <li><strong>Standard-Zoom-Level: </strong>100%.</li>
+ <li><strong>Zoommodus:</strong> Automatik (so verwaltet der Browser, wie Zoomstufen gesetzt werden).</li>
+ <li><strong>Umfang der Zoomwechsel</strong> : "pro-origin",was bedeutet, dass, wenn Sie eine Website wieder besuchen, es die Zoomstufe, die in Ihrem letzten Besuch eingestellt wird, benötigt.</li>
+</ul>
+
+<h3 id="Wie_man_mit_dem_Beispiel_geht_2">Wie man mit dem Beispiel geht</h3>
+
+<p>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:</p>
+
+<p>{{EmbedYouTube("RFr3oYBCg28")}}</p>
+
+<p>Schauen wir uns an, wie der Zoom-In umgesetzt wird.</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/manifest.json"><strong>manifest.json</strong></a></p>
+
+<p>Keine der Zoom-Funktionen benötigt Berechtigungen, so dass es keine Funktionen in der manifest.json-Datei gibt, die hervorgehoben werden müssen.</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.html"><strong>Tabs.html</strong></a></p>
+
+<p>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.</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/tabs-tabs-tabs/tabs.js"><strong>Tabs.js</strong></a></p>
+
+<p>Tabs.js beginnt mit der Definition mehrerer Konstanten, die im Zoom-Code verwendet werden:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> <span class="constant token">ZOOM_INCREMENT</span> <span class="operator token">=</span> <span class="number token">0.2</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">MAX_ZOOM</span> <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">MIN_ZOOM</span> <span class="operator token">=</span> <span class="number token">0.3</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">DEFAULT_ZOOM</span> <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span></code></pre>
+
+<p>Es verwendet dann den gleichen Hörer, den wir zuvor besprochen haben, so dass es auf Klicks in tabs.html wirken kann.</p>
+
+<p>Für den Zoom in der Funktion läuft das:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>target<span class="punctuation token">.</span>id <span class="operator token">===</span> <span class="string token">"tabs-add-zoom"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   callOnActiveTab</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+     <span class="keyword token">var</span> gettingZoom <span class="operator token">=</span> browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">getZoom</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span>
+     gettingZoom<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">zoomFactor</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+       <span class="comment token">//the maximum zoomFactor is 3, it can't go higher</span>
+       <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token">zoomFactor <span class="operator token">&gt;=</span> <span class="constant token">MAX_ZOOM</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">         alert</span><span class="punctuation token">(</span><span class="string token">"Tab zoom factor is already at max!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+         <span class="keyword token">var</span> newZoomFactor <span class="operator token">=</span> zoomFactor <span class="operator token">+</span> <span class="constant token">ZOOM_INCREMENT</span><span class="punctuation token">;</span>
+         <span class="comment token">//if the newZoomFactor is set to higher than the max accepted</span>
+         <span class="comment token">//it won't change, and will never alert that it's at maximum</span>
+         newZoomFactor <span class="operator token">=</span> newZoomFactor <span class="operator token">&gt;</span> <span class="constant token">MAX_ZOOM</span> <span class="operator token">?</span> <span class="constant token">MAX_ZOOM</span> <span class="punctuation token">:</span> newZoomFactor<span class="punctuation token">;</span>
+         browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">setZoom</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> newZoomFactor<span class="punctuation token">)</span><span class="punctuation token">;</span>
+       <span class="punctuation token">}</span>
+     <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span></code></pre>
+
+<p>Dieser Code verwendet <code>callOnActiveTab ()</code> , 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 .</p>
+
+<h4 id="Manipulationen_eines_Tabs_CSS"><strong>Manipulationen eines Tabs CSS</strong></h4>
+
+<p>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 ")).</p>
+
+<p>Dies kann zum Beispiel nützlich sein, wenn Sie bestimmte Seitenelemente markieren oder das Standardlayout der Seite ändern wollen.</p>
+
+<h3 id="Wie_man_mit_dem_Beispiel_geht_3">Wie man mit dem Beispiel geht</h3>
+
+<p>Das <a href="https://github.com/mdn/webextensions-examples/tree/master/apply-css">Apply-css-Beispiel</a> nutzt diese Funktionen, um der Webseite im aktiven Tab einen roten Rand hinzuzufügen. Hier ist das Feature in Aktion:</p>
+
+<p>{{EmbedYouTube ("bcK-GT2Dyhs")}</p>
+
+<p>Gehen wir durch, wie es aufgebaut ist.</p>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/apply-css/manifest.json"><strong>manifest.json</strong></a></p>
+
+<p>Um die CSS-Funktionen nutzen zu können, benötigen Sie entweder:</p>
+
+<ul>
+ <li><code>"Tabs "</code> -Erlaubnis und <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">Host-Erlaubnis</a> oder</li>
+ <li><code>"activeTab"</code>-Erlaubnis .</li>
+</ul>
+
+<p>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.</p>
+
+<pre class="brush: json line-numbers language-json"><code class="language-json"><span class="punctuation token">{</span>
+  <span class="property token">"description"</span><span class="operator token">:</span> <span class="string token">"Adds a page action to toggle applying CSS to pages."</span><span class="punctuation token">,</span>
+
+ <span class="property token">"manifest_version"</span><span class="operator token">:</span> <span class="number token">2</span><span class="punctuation token">,</span>
+ <span class="property token">"name"</span><span class="operator token">:</span> <span class="string token">"apply-css"</span><span class="punctuation token">,</span>
+ <span class="property token">"version"</span><span class="operator token">:</span> <span class="string token">"1.0"</span><span class="punctuation token">,</span>
+ <span class="property token">"homepage_url"</span><span class="operator token">:</span> <span class="string token">"https://github.com/mdn/webextensions-examples/tree/master/apply-css"</span><span class="punctuation token">,</span>
+
+ <span class="property token">"background"</span><span class="operator token">:</span> <span class="punctuation token">{</span>
+
+    <span class="property token">"scripts"</span><span class="operator token">:</span> <span class="punctuation token">[</span><span class="string token">"background.js"</span><span class="punctuation token">]</span>
+ <span class="punctuation token">}</span><span class="punctuation token">,</span>
+
+ <span class="property token">"page_action"</span><span class="operator token">:</span> <span class="punctuation token">{</span>
+
+    <span class="property token">"default_icon"</span><span class="operator token">:</span> <span class="string token">"icons/off.svg"</span><span class="punctuation token">,</span>
+    <span class="property token">"browser_style"</span><span class="operator token">:</span> <span class="boolean token">true</span>
+ <span class="punctuation token">}</span><span class="punctuation token">,</span>
+
+ <span class="property token">"permissions"</span><span class="operator token">:</span> <span class="punctuation token">[</span>
+    <span class="string token">"activeTab"</span><span class="punctuation token">,</span>
+    <span class="string token">"tabs"</span>
+ <span class="punctuation token">]</span>
+
+<span class="punctuation token">}</span></code></pre>
+
+<p>Sie werden darauf hinweisen, dass zusätzlich zu "<code>activeTab</code>" 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.</p>
+
+<p>Die anderen Hauptmerkmale in der manifest.json-Datei sind die Definition von:</p>
+
+<ul>
+ <li><strong>Ein Hintergrundskript</strong>, das gestartet wird, sobald die Erweiterung geladen wird.</li>
+ <li><strong>Eine "Seitenaktion</strong>", die ein Symbol definiert, das in die Adressleiste des Browsers aufgenommen werden soll.</li>
+</ul>
+
+<p><a href="https://github.com/mdn/webextensions-examples/blob/master/apply-css/background.js"><strong>Background.js</strong></a></p>
+
+<p>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:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> <span class="constant token">CSS</span> <span class="operator token">=</span> <span class="string token">"body { border: 20px solid red; }"</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">TITLE_APPLY</span> <span class="operator token">=</span> <span class="string token">"Apply CSS"</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">TITLE_REMOVE</span> <span class="operator token">=</span> <span class="string token">"Remove CSS"</span><span class="punctuation token">;</span>
+<span class="keyword token">const</span> <span class="constant token">APPLICABLE_PROTOCOLS</span> <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">"http:"</span><span class="punctuation token">,</span> <span class="string token">"https:"</span><span class="punctuation token">]</span><span class="punctuation token">;</span></code></pre>
+
+<p>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 <code>InitializePageAction()</code>rufen.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> gettingAllTabs <span class="operator token">=</span> browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">query</span><span class="punctuation token">(</span><span class="punctuation token">{</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+gettingAllTabs<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">tabs</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+ <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="parameter token"><span class="keyword token">let</span> tab <span class="keyword token">of</span> tabs</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+<span class="function token">   initializePageAction</span><span class="punctuation token">(</span>tab<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<p><code>InitializePageAction</code> verwendet protokolIsApplicable () , um festzustellen, ob die URL der aktiven Registerkarte eine ist, auf die die CSS angewendet werden kann:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">protocolIsApplicable</span><span class="punctuation token">(</span><span class="parameter token">url</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+ <span class="keyword token">var</span> anchor <span class="operator token">=</span>  document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'a'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+ anchor<span class="punctuation token">.</span>href <span class="operator token">=</span> url<span class="punctuation token">;</span>
+ <span class="keyword token">return</span> <span class="constant token">APPLICABLE_PROTOCOLS</span><span class="punctuation token">.</span><span class="function token">includes</span><span class="punctuation token">(</span>anchor<span class="punctuation token">.</span>protocol<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Wenn das Beispiel dann auf der Registerkarte wirken kann, setzt <code>initializePageAction ()</code> das <code>PageAction</code>-Symbol und den Titel des Tab, um die "Off"-Versionen zu verwenden, bevor die <code>PageAction</code>-Version sichtbar gemacht wird:</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">initializePageAction</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+ <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="parameter token"><span class="function token">protocolIsApplicable</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>url<span class="punctuation token">)</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+   browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setIcon</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> path<span class="punctuation token">:</span> <span class="string token">"icons/off.svg"</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="constant token">TITLE_APPLY</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+   browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">show</span><span class="punctuation token">(</span>tab<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span>
+ <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>Als Nächstes wartet ein Zuhörer auf der <code>pageAction.onClicked</code> darauf, dass das <code>PageAction</code>-Symbol angeklickt wird  , und ruft toggleCSS an , wenn es ist.</p>
+
+<pre>browser.pageAction.onClicked.addListener (toggleCSS);</pre>
+
+<p><code>ToggleCSS ()</code> erhält den Titel der <code>PageAction</code> und nimmt dann die beschriebene Aktion auf:</p>
+
+<ul>
+ <li><strong>Für "Apply CSS":</strong>
+
+  <ul>
+   <li>Das <code>PageAction</code>-Symbol und den Titel in die "Entfernen"-Versionen.</li>
+   <li>Es ist eine sehr gut. {{WebExtAPIRef("tabs.insertCSS")}}.</li>
+  </ul>
+ </li>
+ <li><strong>Für "Remove CSS":</strong>
+  <ul>
+   <li>Das <code>PageAction</code>-Symbol und den Titel in die "Anwendung"-Versionen.</li>
+   <li>Entfernt die CSS mit {{WebExtAPIRef("tabs.removeCSS")}}.</li>
+  </ul>
+ </li>
+</ul>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">toggleCSS</span><span class="punctuation token">(</span><span class="parameter token">tab</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+
+ <span class="keyword token">function</span> <span class="function token">gotTitle</span><span class="punctuation token">(</span><span class="parameter token">title</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+
+    <span class="keyword token">if</span> <span class="punctuation token">(</span>title <span class="operator token">===</span> <span class="constant token">TITLE_APPLY</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setIcon</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> path<span class="punctuation token">:</span> <span class="string token">"icons/on.svg"</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="constant token">TITLE_REMOVE</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">insertCSS</span><span class="punctuation token">(</span><span class="punctuation token">{</span>code<span class="punctuation token">:</span> <span class="constant token">CSS</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
+     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setIcon</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> path<span class="punctuation token">:</span> <span class="string token">"icons/off.svg"</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">setTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">,</span> title<span class="punctuation token">:</span> <span class="constant token">TITLE_APPLY</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+     browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span><span class="function token">removeCSS</span><span class="punctuation token">(</span><span class="punctuation token">{</span>code<span class="punctuation token">:</span> <span class="constant token">CSS</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+    <span class="punctuation token">}</span>
+ <span class="punctuation token">}</span>
+
+ <span class="keyword token">var</span> gettingTitle <span class="operator token">=</span> browser<span class="punctuation token">.</span>pageAction<span class="punctuation token">.</span><span class="function token">getTitle</span><span class="punctuation token">(</span><span class="punctuation token">{</span>tabId<span class="punctuation token">:</span> tab<span class="punctuation token">.</span>id<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+ gettingTitle<span class="punctuation token">.</span><span class="function token">then</span><span class="punctuation token">(</span>gotTitle<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<p>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.</p>
+
+<pre class="brush: js line-numbers language-js"><code class="language-js">browser<span class="punctuation token">.</span>tabs<span class="punctuation token">.</span>onUpdated<span class="punctuation token">.</span><span class="function token">addListener</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="parameter token">id<span class="punctuation token">,</span> changeInfo<span class="punctuation token">,</span> tab</span><span class="punctuation token">)</span> <span class="operator token">=&gt;</span> <span class="punctuation token">{</span>
+<span class="function token"> initializePageAction</span><span class="punctuation token">(</span>tab<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+
+<h4 id="Einige_weitere_interessante_Fähigkeiten"><strong>Einige weitere interessante Fähigkeiten</strong></h4>
+
+<p>Es gibt noch ein paar andere Tabs API-Funktionen, die nicht in einen der früheren Abschnitte passen:</p>
+
+<ul>
+ <li>Erfassen Sie den sichtbaren Tab-Inhalt mit {{WebExtAPIRef("tabs.captureVisibleTab")}}.</li>
+ <li>Erkennen Sie die Hauptsprache des Inhalts in einem Tab mit {{WebExtAPIRef("tabs.detectLanguage")}} . Dies könnte zum Beispiel verwendet werden, um die Sprache in Ihrem UI mit der Seite, in der sie läuft, zu vergleichen.</li>
+</ul>
+
+<p><strong>Weitere Informationen</strong></p>
+
+<p>Wenn Sie mehr über die Tabs API erfahren möchten, schauen Sie sich an:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs">Tabs API-Referenz</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples">Beispielerweiterungen</a> (von denen viele die Tabs API verwenden)<a name="_GoBack"></a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/mozilla/add-ons/webextensions/beispiele/index.html b/files/de/mozilla/add-ons/webextensions/beispiele/index.html
new file mode 100644
index 0000000000..627dbe559d
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/beispiele/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
+---
+<div>{{AddonSidebar}}</div>
+
+<p><span id="result_box" lang="de"><span>Um zu veranschaulichen, wie Erweiterungen entwickelt werden, gibt es von uns ein Repository mit einfachen Beispielerweiterungen unter https://github.com/mdn/webextensions-examples.</span></span> <span id="result_box" lang="de"><span>Dieser Artikel beschreibt die WebExtension-APIs, die in diesem Repository verwendet werden.</span></span></p>
+
+<p><span lang="de"><span>Diese Beispiele funktionieren in Firefox Nightly: Die meisten funktionieren in früheren Versionen von Firefox, aber überprüfen Sie zur Sicherheit den Schlüssel <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/applications">strict_min_version</a> in der Datei manifest.json der Erweiterung.</span><br>
+ <br>
+ <span>Wenn Sie diese Beispiele ausprobieren möchten, haben Sie drei Möglichkeiten:</span><br>
+ <br>
+ 1.  <span>Klonen Sie das Repository, und laden Sie die Erweiterung direkt aus dem Quellverzeichnis mit der Funktion <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">"Load Temporary Add-on"</a>.</span> <span>Die Erweiterung bleibt solange geladen, bis Sie Firefox neu starten.</span></span><br>
+ <span lang="de"><span>2. Klonen Sie das Repository und verwenden Sie dann das <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> Befehlszeilentool, um Firefox mit der installierten Erweiterung auszuführen.</span><br>
+ 3. <span>Klonen Sie das Repository und gehen Sie dann zum <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Build</a>-Verzeichnis.</span> <span>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 <a href="https://addons.mozilla.org/">addons.mozilla.org</a> installieren würden.</span><br>
+ <br>
+ <span>Wenn Sie einen Beitrag zum Repository leisten möchten, senden Sie uns ein <a href="https://github.com/mdn/webextensions-examples/blob/master/CONTRIBUTING.md">Pull-Request</a>!</span></span></p>
+
+<p>{{WebExtAllExamples}}</p>
diff --git a/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html
new file mode 100644
index 0000000000..1dffe19399
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html
@@ -0,0 +1,15 @@
+---
+title: Browser support for JavaScript APIs
+slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
+translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
+---
+<div>{{AddonSidebar}}</div>
+
+<div>{{WebExtAllCompatTables}}</div>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
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
new file mode 100644
index 0000000000..b48b805b98
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/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
+---
+<div>{{AddonSidebar}}</div>
+
+<p>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.</p>
+
+<p>Der Quellcode für dieses Beispiel ist auf GitHub auffindbar: <a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">https://github.com/mdn/webextensions-examples/tree/master/borderify</a>.</p>
+
+<p>Als Erstes benötigst du Firefox Version 45 oder neuer.</p>
+
+<h2 id="Schreiben_der_Erweiterung">Schreiben der Erweiterung</h2>
+
+<p>Erstelle ein neues Verzeichnis und navigiere zu diesem:</p>
+
+<pre class="brush: bash">mkdir borderify
+cd borderify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>Jetzt erstelle eine Datei namens "manifest.json" direkt in dem "borderify" -Verzeichnis mit dem folgenden Inhalt:</p>
+
+<pre class="brush: json">{
+
+  "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"]
+    }
+  ]
+
+}</pre>
+
+<ul>
+ <li>Die ersten drei <em>Keys</em>: <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/name">name</a></code> und <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/version">version</a></code> sind verpflichtend und beinhalten grundlegende Metadaten für die Erweiterung.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/description">description</a></code> ist optional, aber empfehlenswert: diese wird dann im Add-ons Manager angezeigt.</li>
+ <li><code><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> ist optional, aber empfehlenswert: es erlaubt es dir ein Icon für deine Erweiterung festzulegen, welches ebenfalls im Add-ons Manager angezeigt wird.</li>
+</ul>
+
+<p>Der interessanteste <em>Key</em> hier ist  <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, 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.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Lerne mehr über content scripts.</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Lerne mehr über übereinstimmende Muster</a>.</li>
+</ul>
+
+<div class="warning">
+<p><a href="/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_Add-on_ID">In manchen Situation musst eine ID für deine Erweiterung festlegen</a>. Wenn du eine Add-on ID festlegen musst, schreibe den  <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/applications">applications</a></code> key in <code>manifest.json</code> und setze die <code>gecko.id</code>-Eigenschaft:</p>
+
+<pre class="brush: json">"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}</pre>
+</div>
+
+<h3 id="iconsborder-48.png">icons/border-48.png</h3>
+
+<p>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.</p>
+
+<p>Erstelle das "icons" Verzeichnis direkt in dem "borderify" Verzeichnis. Speichere dort ein Icon namens "border-48.png".  Du kannst dazu das <a href="https://github.com/mdn/webextensions-examples/blob/master/borderify/icons/border-48.png">von unserem Beispiel benutzen</a>, welches von der Google Material Design Iconsammlung stammt und unter den Richtlinien der <a href="https://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike</a> Lizenz steht.</p>
+
+<p>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 <code>96</code> Property des <code>icons</code>-Objekts in der manifest.json festgelegt wird:</p>
+
+<pre class="brush: json">"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}</pre>
+
+<p>Alternativ kannst du auch eine SVG-Datei übergeben, welche dann automatisch korrekt skaliert wird.<br>
+ (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.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/manifest.json/icons">Lerne mehr über das festlegen von Icons.</a></li>
+</ul>
+
+<h3 id="borderify.js">borderify.js</h3>
+
+<p>Schließlich erstelle eine Datei namens "borderify.js" direkt in dem "borderify"-Verzeichnis mit diesem Inhalt:</p>
+
+<pre class="brush: js">document.body.style.border = "5px solid red";</pre>
+
+<p>Dieses Skript wird in Seiten geladen, welche mit dem Muster des  <code>content_scripts</code>-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.</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Lerne mehr über content scripts.</a></li>
+</ul>
+
+<h2 id="Probiere_es_aus">Probiere es aus:</h2>
+
+<p>Als Erstes stelle sicher, dass du die richtigen Dateien an den richtigen Orten hast:</p>
+
+<pre>borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json</pre>
+
+<h3 id="Installiere_nun_das_Plugin">Installiere nun das Plugin</h3>
+
+<p>Öffne "about:debugging" in Firefox, klicke "Add-on temporär laden" und wähle eine beliebige Datei aus deinem Erweiterungsverzeichnis:</p>
+
+<p>{{EmbedYouTube("cer9EUKegG4")}}</p>
+
+<p>Die Erweiterung wird nun ausgeführt und ist solange aktiv, bis du Firefox neustartest.</p>
+
+<p>Alternativ kannst du Erweiterung auch von der Kommandozeile mit dem <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> Tool ausführen.</p>
+
+<h3 id="Teste_es_nun_aus">Teste es nun aus</h3>
+
+<p>Nun besuche eine Seite von "mozilla.org". Du solltest jetzt einen roten Rand um die Seite erkennen:</p>
+
+<p>{{EmbedYouTube("rxBQl2Z9IBQ")}}</p>
+
+<div class="note">
+<p>Versuche es allerdings nicht auf addons.mozilla.org! Content Scripts werden zurzeit auf dieser Domain geblockt.</p>
+</div>
+
+<p>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:</p>
+
+<p>{{EmbedYouTube("NuajE60jfGY")}}</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Lerne mehr über das Laden von Erweiterungen</a></li>
+</ul>
+
+<h2 id="Verpacken_und_Veröffentlichen">Verpacken und Veröffentlichen</h2>
+
+<p>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  <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">"Deine Erweiterung veröffentlichen"</a>.</p>
+
+<h2 id="Was_nun">Was nun?</h2>
+
+<p>Jetzt hast du eine Vorstellung vom Prozess der WebExtension-Entwicklung für Firefox erhalten. Versuche:</p>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">mehr über die Anatomie von Erweiterungen zu lesen</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">eine komplexere Erweiterung zu schreiben</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/API">über die verfügbaren JavaScript APIs für Erweiterungen zu lesen.</a></li>
+</ul>
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
new file mode 100644
index 0000000000..cc002d0b24
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/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
+---
+<p>{{AddonSidebar}}</p>
+
+<p>Wenn du den Artikel "<a href="https://developer.mozilla.org/de/Add-ons/WebExtensions/Deine_erste_WebErweiterung">Deine erste Erweiterung</a>" 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.</p>
+
+<p>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.</p>
+
+<p>Um das zu implementieren werden wir:</p>
+
+<ul>
+ <li><strong>eine <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface/Browser_action">Browser-Aktion</a> definieren, die zur Firefox-Toolbar hinzugefügt werden wird.</strong><br>
+  Für die Schaltfläche benötigen wir:
+  <ul>
+   <li>ein Icon namens "beasts-32.png"</li>
+   <li>Ein Popup welches sich öffnet, sobald der Nutzer auf die Schaltfläche klickt. Das Popup wird <a href="https://developer.mozilla.org/de/docs/Glossary/HTML">HTML</a>, <a href="https://developer.mozilla.org/de/docs/Glossary/CSS">CSS</a>, und <a href="https://developer.mozilla.org/de/docs/Glossary/JavaScript">JavaScript</a> beinhalten.</li>
+  </ul>
+ </li>
+ <li><strong>ein Icon festlegen</strong>, genannt "beasts-48.png". Dieses wird im Addon-Manager angezeigt werden.</li>
+ <li><strong>Ein content-script "beastify.js" schreiben, welches auf Webseiten angezeigt werden wird.</strong><br>
+  Das ist der Code, der letztendlich die Webseite verändert.</li>
+ <li><strong>Einige Tier-Bilder einfügen, um die Bilder auf der Webseite zu ersetzen</strong><br>
+  Die Bilder werden "web-abrufbare Ressourcen" werden, sodass die Webseite sie abrufen kann.</li>
+</ul>
+
+<p>Man kann die Struktur der Erweiterung wie folgt darstellen:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13671/Untitled-1.png" style="display: block; height: 1200px; margin-left: auto; margin-right: auto; width: 860px;"></p>
+
+<p>Es ist eine einfache Erweiterung, aber es zeigt viele der Grundkonzepte der WebExtensions API:</p>
+
+<ul>
+ <li>Hinzufügen einer Schaltfläche zur Toolbar</li>
+ <li>Erstellen eines Popup-Menüs mit HTML, CSS, und JavaScript</li>
+ <li>Verändern des Webseiteninhalts</li>
+ <li>Kommunikation zwischen dem content-script und dem Rest der Erweiterung</li>
+ <li>Verpacken von Ressourcen, die später auf der Webseite genutzt werden können.</li>
+</ul>
+
+<p>Der <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">komplette Quellcode der Erweiterung</a> ist auf GitHub zu finden.</p>
+
+<p>Um die Erweiterung zu erstellen, brauchst du mindestens Firefox 45.</p>
+
+<h2 id="Die_Erweiterung_schreiben">Die Erweiterung schreiben</h2>
+
+<p>Erstelle einen neuen Ordner und öffne ihn:</p>
+
+<pre class="brush: bash">mkdir beastify
+cd beastify</pre>
+
+<h3 id="manifest.json">manifest.json</h3>
+
+<p>Erstelle jetzt eine Datei namens "manifest.json" und füge den folgenden Inhalt ein:</p>
+
+<pre class="brush: json">{
+
+  "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"
+  ]
+
+}
+</pre>
+
+<ul>
+ <li>Die ersten drei Eigenschaften <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version">manifest_version</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name">name</a></code>, und <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version">version</a></code> sind erforderlich und enthalten Basismetadaten.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description">description</a></code> und <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url">homepage_url</a></code> sind optional aber empfohlen, sie erhalten nützliche Informationen.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons">icons</a></code> ist optional aber empfohlen, hier kannst du ein Icon festlegen, welches im Addon-Manager angezeigt werden wird.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code> listet die Berechtigungen auf, die die Erweiterung benötigt. Hier brauchen wir nur die <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">activeTab Berechtigung</a>.</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> spezifiziert die Schaltfläche. Hier übergeben wir drei Informationen:
+  <ul>
+   <li><code>default_icon</code> ist notwendig, und gibt das Icon der Schaltfläche an</li>
+   <li><code>default_title</code> ist optional und wird unter dem Icon angezeigt</li>
+   <li><code>default_popup</code> wird verwendet, wenn ein Popup angezeigt werden soll, sobald der Nutzer auf die Schaltfläche klickt. Das soll so sein, deshalb wird hier die Eigenschaft mit einer HTML-Datei belegt.</li>
+  </ul>
+ </li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources">web_accessible_resources</a></code> listet die Dateien auf, die auf Webseiten verwendet werden solllen. Weil die Erweiterung den Inhalt der Webseite mit den Bilder, die der Erweiterung hinzugefügt wurden, verändern soll, müssen die Bilder hier aufgelistet werden.</li>
+</ul>
+
+<p>Beachte, dass alle Pfade relativ zur manifest.json angegeben werden.</p>
+
+<h3 id="Das_Icon">Das Icon</h3>
+
+<p>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.</p>
+
+<p>Erstelle das "icons"-Verzeichnis and speichere dort das Icon namens "beasts-48.png".  Du kannst das <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-48.png">Icon aus unserem Beispiel</a> verwenden, welches aus dem <a href="https://www.iconfinder.com/iconsets/free-retina-icon-set">Aha-Soft’s Free Retina Icon-Set</a> stammt und gemäß seiner <a href="http://www.aha-soft.com/free-icons/free-retina-icon-set/">Lizenzbestimmungen</a> genutzt wird.</p>
+
+<p>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 <code>96</code> des <code>icons</code> Objekts in manifest.json aufgeführt:</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="key token">"icons":</span> <span class="punctuation token">{</span>
+  <span class="key token">"48":</span> <span class="string token">"icons/beasts-48.png"</span><span class="punctuation token">,</span>
+  <span class="key token">"96":</span> <span class="string token">"icons/beasts-96.png"</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="Die_Toolbar-Schaltfläche">Die Toolbar-Schaltfläche</h3>
+
+<p>Die Toolbar-Schaltfläche benötigt ebenfalls ein Icon, das laut unserer manifest.json unter "icons/beasts-32.png" bereitsteht.</p>
+
+<p>Speichere ein Icon namens "beasts-32.png" im Verzeichnis "icons".Du kannst das <a href="https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-32.png">Icon aus unserem Beispiel</a> verwenden, welches aus dem <a href="http://www.iconbeast.com/free">IconBeast Lite Icon-Set</a> stammt und gemäß seiner <a href="http://www.iconbeast.com/faq/">Lizenzbestimmungen</a> genutzt wird.</p>
+
+<p>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.</p>
+
+<h3 id="Das_Popup">Das Popup</h3>
+
+<p>Mithilfe des Popups soll der Benutzer eines von drei Tieren auswählen können.</p>
+
+<p>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:</p>
+
+<ul>
+ <li><strong><code>choose_beast.html</code></strong> legt den Inhalt des Fensters fest</li>
+ <li><strong><code>choose_beast.css</code></strong> legt das Styling des Fensters fest</li>
+ <li><strong><code>choose_beast.js</code></strong> verarbeitet die Auswahl des Benutzers, indem es im aktiven Tab ein Content Script ausführt</li>
+</ul>
+
+<h4 id="choose_beast.html">choose_beast.html</h4>
+
+<p>Die HTML-Datei sieht folgendermaßen aus:</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;link rel="stylesheet" href="choose_beast.css"/&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;div class="button beast"&gt;Frog&lt;/div&gt;
+    &lt;div class="button beast"&gt;Turtle&lt;/div&gt;
+    &lt;div class="button beast"&gt;Snake&lt;/div&gt;
+    &lt;div class="button clear"&gt;Reset&lt;/div&gt;
+
+    &lt;script src="choose_beast.js"&gt;&lt;/script&gt;
+  &lt;/body&gt;
+
+&lt;/html&gt;</pre>
+
+<p>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.</p>
+
+<h4 id="choose_beast.css">choose_beast.css</h4>
+
+<p>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:</p>
+
+<pre class="brush: css">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;
+}
+</pre>
+
+<h4 id="choose_beast.js">choose_beast.js</h4>
+
+<p>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:</p>
+
+<pre class="brush: js">/*
+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) =&gt; {
+  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) =&gt; {
+      browser.tabs.sendMessage(tabs[0].id, {beastURL: chosenBeastURL});
+    });
+  }
+  else if (e.target.classList.contains("clear")) {
+    browser.tabs.reload();
+    window.close();
+  }
+});
+</pre>
+
+<p>It uses three WebExtensions API functions:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/executeScript">browser.tabs.executeScript</a></code> to inject a content script found at "content_scripts/beastify.js" into the active tab</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query">browser.tabs.query</a></code> to get the active tab</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage">browser.tabs.sendMessage</a></code> to send a message to content scripts running in the active tab. The message contains the URL to an image of the chosen beast.</li>
+</ul>
+
+<h3 id="The_content_script">The content script</h3>
+
+<p>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:</p>
+
+<pre class="brush: js">/*
+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);
+</pre>
+
+<p>The content script adds a listener to messages from the extension (specifically, from "choose_beast.js" above). In the listener, it:</p>
+
+<ul>
+ <li>removes every element in the <code>document.body</code></li>
+ <li>creates an <code>&lt;img&gt;</code> element pointing to the given URL, and inserts it into the DOM</li>
+ <li>removes the message listener.</li>
+</ul>
+
+<h3 id="The_beasts">The beasts</h3>
+
+<p>Finally, we need to include the images of the animals.</p>
+
+<p>Create a new directory called "beasts", and add the three images in that directory, with the appropriate names. You can get the images from <a href="https://github.com/mdn/webextensions-examples/tree/master/beastify/beasts">the GitHub repository</a>, or from here:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11459/frog.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11461/snake.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"><img alt="" src="https://mdn.mozillademos.org/files/11463/turtle.jpg" style="display: inline-block; height: 200px; margin: 20px; width: 200px;"></p>
+
+<h2 id="Testing_it_out">Testing it out</h2>
+
+<p>First, double check that you have the right files in the right places:</p>
+
+<pre>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</pre>
+
+<p>Starting in Firefox 45, you can install extensions temporarily from disk.</p>
+
+<p>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:</p>
+
+<p>{{EmbedYouTube("sAM78GU4P34")}}</p>
+
+<p>Open a web page, then click the icon, select a beast, and see the web page change:</p>
+
+<p>{{EmbedYouTube("YMQXyAQSiE8")}}</p>
+
+<h2 id="Developing_from_the_command_line">Developing from the command line</h2>
+
+<p>You can automate the temporary installation step by using the <a href="/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext">web-ext</a> tool. Try this:</p>
+
+<pre class="brush: bash">cd beastify
+web-ext run</pre>
diff --git a/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html
new file mode 100644
index 0000000000..688d48f544
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html
@@ -0,0 +1,143 @@
+---
+title: Extending the developer tools
+slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
+tags:
+  - Deutsch Guide
+  - DevTools
+  - Extentions
+  - german
+translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
+---
+<div class="note">
+<p>Das heißt Folgendes wird nicht unterstützt , sie können Änderungen an der Seite sehen, die von Seitenskripten vorgenommen wurden.Diese Seite beschreibt devtools-APIs, wie sie in Firefox 55 vorhanden sind. Obwohl die APIs auf den Chrome devtools APIs basieren, gibt es noch viele Funktionen, die in Firefox noch nicht implementiert sind und daher hier nicht dokumentiert sind. Informationen zu den derzeit fehlenden Funktionen finden Sie unter Einschränkungen der devtools-APIs.</p>
+</div>
+
+<ul>
+ <li>Sie können WebExtensions-APIs verwenden, um die integrierten Entwicklertools des Browsers zu erweitern. Um eine devtools-Erweiterung zu erstellen, geben Sie den Schlüssel "devtools_Seite" in manifest.json ein:</li>
+ <li>
+  <pre class="brush: json">"devtools_seite": "devtools/devtools-seite.html"</pre>
+ </li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Der Wert dieses Schlüssels ist eine URL, die auf eine HTML-Datei verweist, die mit Ihrer Erweiterung gebündelt wurde . Die URL sollte relativ zur manifest.json-Datei selbst sein.</span></li>
+ <li>Die HTML-Datei definiert eine spezielle Seite in der Verlängerung, Seite der devtools ResourceHinzufügen
+  <h3 id="Devtools_Seite">Devtools Seite</h3>
+ </li>
+ <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Die davetool Seite wird beim Öffnen der Browser Devtools geladen und beim Schließen entladen. Beachten Sie, dass, weil die devtools Fenster mit einem einzigen Register zugeordnet ist, es für mehr als ein devtools Fenster durchaus möglich ist - also mehr als eine devtools Seite - zur gleichen Zeit existieren.</span></li>
+</ul>
+
+<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Die devtools-Seite hat kein sichtbares DOM, kann aber JavaScript-Quellen mit &lt;script&gt; -Tags enthalten. Die Quellen müssen mit der Erweiterung selbst gebündelt werden. Die normalen DOM-APIs, auf die über das globale Fensterobjekt zugegriffen werden kann Die gleichen WebExtension-APIs wie in Inhaltsskripten Die devtools-APIs: Devtools </span>inspiziertes Fenster devtools.network devtools.panels Beachten Sie, dass die devtools-Seite keinen Zugriff auf andere Web Extensions-APIs erhält und die Hintergrundseite keinen Zugriff auf die devtools-APIs erhält. Stattdessen müssen die davetool-Seite und die Hintergrundseite definiert werden. Verwenden der Laufzeit-Messeging-APIs. Hier ist ein Beispiel:</p>
+
+<div class="twocolumns">
+<ul>
+ <li>
+  <pre class="syntaxbox">&lt;!DOCTYPE html&gt; &lt;html&gt;   &lt;head&gt;     &lt;meta charset="utf-8"&gt;   &lt;/head&gt;   &lt;body&gt;     &lt;script sec="devtools.js"&gt;&lt;/script&gt;   &lt;/body&gt; &lt;/html&gt;The devtools.js file will hold the actual code creating your dev tools extensions.</pre>
+ </li>
+ <li>
+  <h3 id="Erstellen_von_panel">Erstellen von panel </h3>
+ </li>
+ <li>Das devtools-Fenster enthält eine Reihe separater Tools - den JavaScript-Debugger, den Netzwerkmonitor usw.  Über eine Reihe von Registerkarten am oberen Rand kann der Benutzer zwischen den verschiedenen Werkzeugen wechseln.  Das Fenster, in dem sich die Benutzeroberfläche jedes Tools befindet, wird als "Panel" bezeichnet.</li>
+ <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Gebrauche der </span></font>devtools.panels.create()</code> API,,  um Ihren eigenen  Panel Herzustellen in devtools Fenster(Window)</li>
+ <li>
+  <pre class="brush: js">browser.devtools.panels.create(
+  "My Panel",                      // title
+  "icons/star.png",                // icon
+  "devtools/panel/panel.html"      // content
+).then((newPanel) =&gt; {
+  newPanel.onShown.addListener(initialisePanel);
+  newPanel.onHidden.addListener(unInitialisePanel);
+});</pre>
+ </li>
+ <li>
+  <p>Hierfür sind drei Argumente erforderlich: Titel, Symbol und Inhalt des Panels.  Es wird ein Versprechen zurück gegeben, das devtool panel ExtensionPanel-Objekt aufgelöst wird, das in neue Panel darstellt.</p>
+ </li>
+ <li><code>devtools.panels.ExtensionPanel</code> dieser obieckt reprsentiert das neue Panel</li>
+ <li>
+  <h3 id="Interaktion_mit_dem_Zielfenster">Interaktion mit dem Zielfenster</h3>
+ </li>
+ <li>Die Entwicklertools sind immer an eine bestimmte Browserregisterkarte angehängt.  Dies wird als "Ziel" für die Entwicklertools oder als "inspiziertes Fenster" bezeichnet, damit können Sie inspizierten Fenster mit der Sie interagieren</li>
+ <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code> API.</li>
+</ul>
+</div>
+
+<dl>
+ <dt>
+ <h3 id="Code_im_Zielfenster_ausführen">Code im Zielfenster ausführen</h3>
+ </dt>
+</dl>
+
+<p>Der<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval">devtools.inspectedWindow.eval()</a></code> bereitgestellt in einfacher weisen um den Code auszuführen in den lnspector Fensten </p>
+
+<div class="blockIndicator note">
+<p class="syntaxbox">Arbeiten mit Inhaltsskripten Dies entspricht in etwa der Verwendung von {{WebExtAPIRef ("tabs.executeScript ()")}} zum Einfügen eines Inhaltsskripts, mit einem wichtigen Unterschied nommen wurden.Beachten Sie, dass eine saubere Ansicht des DOM eine Sicherheitsfunktion ist, mit der verhindert werden soll, dass feindliche Seiten Erweiterungen austricksen, indem das Verhalten nativer DOM-Funktionen neu definiert wird.  Das bedeutet, dass Sie mit eval () sehr vorsichtig sein müssen und ein normales Inhaltsskript verwenden sollten, wenn Sie können.</p>
+</div>
+
+<p>Mit devtools.inspectedWindow.eval () geladene Skripte sehen auch keine von c definierten JavaJavaScript-Variablen</p>
+
+<h3 id="Arbeiten_mit_Inhaltsskripten">Arbeiten mit Inhaltsskripten</h3>
+
+<p>devtools document hat keinen direkten Zugrif Beachten Sie, dass eine saubere Ansicht des DOM eine Sicherheitsfunktion ist, mit der verhindert werden soll, dass feindliche Seiten Erweiterungen austricksen, indem das Verhalten nativer DOM-Funktionen neu definiert wird.  Das bedeutet, dass Sie mit eval () sehr vorsichtig sein müssen und ein normales Inhaltsskript verwenden sollten, wenn Sie können.&lt;</p>
+
+<p>Bei einem Skript muss das devtools5-Dokument eine Nachricht senden, in der es aufgefordert wird, das Skript einzufügen.  Die devtools.inspectedWindow.table gibt die ID der Zielregisterkarte an:</p>
+
+<p>Wenn Sie Nachrichten zwischen den im Zielfenster ausgeführten Inhaltsskripten und einem devtools-Dokument austauschen müssen, sollten Sie {{WebExtAPIRef ("runtime.connect ()")} und {{WebExtAPIRef ("runtime.onConnect") verwenden  ")}}, um eine Verbindung zwischen der Hintergrundseite und dem devtools-Dokument herzustellen.  Die Hintergrundseite kann dann eine Zuordnung zwischen Registerkarten-IDs und {{WebExtAPIRef ("runtime.Port")}} -Objekten verwalten und diese verwenden, um Nachrichten zwischen den beiden Bereichen weiterzuleiten.</p>
+
+<p>Diese APIs basieren auf den Chrome devtools-APIs, aber im Vergleich zu Chrome fehlen noch viele Funktionen.  In diesem Abschnitt werden die Funktionen aufgeführt, die ab Firefox 54 noch nicht implementiert sind. Beachten Sie, dass sich die devtools-APIs in der aktiven Entwicklung befinden und wir erwarten, dass die meisten davon in zukünftigen Versionen unterstützt werden.</p>
+
+<ul>
+ <li>
+  <pre class="brush: js">// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+window.addEventListener("click", () =&gt; {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});</pre>
+ </li>
+ <li>
+  <pre class="brush: js">// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);</pre>
+ </li>
+ <li><img alt="" src="https://mdn.mozillademos.org/files/14923/devtools-content-scripts.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 600px;"></li>
+ <li>
+  <h2 id="Einschränkungen_der_devtools_APIs">Einschränkungen der devtools APIs</h2>
+ </li>
+ <li>
+  <h3 id="devtools_inspizierte_Window">devtools inspizierte Window</h3>
+ </li>
+ <li>Folgendes wird nicht unterstüzt</li>
+ <li><code>inspectedWindow.getResources()</code></li>
+ <li><code>inspectedWindow.onResourceAdded</code></li>
+ <li><code>inspectedWindow.onResourceContentCommitted</code></li>
+ <li>None of the options to <code>inspectedWindow.eval()</code> are supported.</li>
+ <li>Scripts injected using <code>inspectedWindow.eval()</code> can't use all the Console's command-line helper functions, but <code>$0</code> and <code>inspect(...)</code> are both supported (starting from Firefox 55).</li>
+ <li>
+  <h3 id="devtools.panele">devtools.panele</h3>
+ </li>
+ <li>The following are not supported:</li>
+ <li><code>panels.elements</code></li>
+ <li><code>panels.sources</code></li>
+ <li><code>panels.setOpenResourceHandler()</code></li>
+ <li><code>panels.openResource()</code></li>
+ <li><code>panels.ExtensionPanel.createStatusBarButton()</code></li>
+ <li><code>panels.Button</code></li>
+ <li><code>panels.ElementsPanel</code></li>
+ <li><code>panels.SourcesPanel</code></li>
+ <li>
+  <h3 id="Beispielsweise">Beispielsweise</h3>
+ </li>
+ <li>Das <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> bericht an GitHub, enthält einige Beispiele für Erweiterungen, die devtools-Panels verwenden:</li>
+ <li>
+  <p><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> benutzen Sie dentools Panels</p>
+ </li>
+</ul>
+
+<p><span style="display: none;"> </span></p>
diff --git a/files/de/mozilla/add-ons/webextensions/index.html b/files/de/mozilla/add-ons/webextensions/index.html
new file mode 100644
index 0000000000..bb1b68b2de
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/index.html
@@ -0,0 +1,86 @@
+---
+title: WebExtensions
+slug: Mozilla/Add-ons/WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>WebExtensions sind ein Cross-Browser-System zur Entwicklung von Browser-Add-ons. Das System ist in weiten Teilen kompatibel mit der <a class="external-icon external" href="https://developer.chrome.com/extensions">extension API</a>, welche von Google Chrome und Opera unterstützt wird. Erweiterungen, welche für diese Browser geschrieben wurden, werden in den meisten Fällen mit <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">nur wenigen Anpassungen</a> auch in Firefox oder <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> lauffähig sein. Die API ist außerdem vollständig kompatibel mit <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">Multiprozess-Firefox</a>.</p>
+
+<p>Wir beabsichtigen auch, die APIs zu erweitern, um die Unterstützung für Add-on-Entwickler zu verbessern. Sollten Sie Vorschläge dazu haben, würden wir uns über Ihre Mitteilung freuen. Sie erreichen uns über die englischsprachige <a href="https://mail.mozilla.org/listinfo/dev-addons">Mailingliste für Add-on-Entwickler</a> oder auf <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> im <a href="https://wiki.mozilla.org/IRC">IRC</a>.</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h3 id="Erste_Schritte">Erste Schritte</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions_">Was sind WebExtensions?</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_first_WebExtension">Deine erste WebExtension</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Your_second_WebExtension">Deine zweite WebExtension</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Anatomie einer WebExtension</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Examples">Beispiel-WebExtensions</a></li>
+</ul>
+
+<h3 id="Kurzanleitungen">Kurzanleitungen</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">Abfangen von HTTP-Anfragen</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Modify_a_web_page">Eine Web-Seite verändern</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">Eine Schaltfläche zu einer Werkzeugleiste hinzufügen</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">Eine Einstellungen-Seite erstellen</a></li>
+ <li>Browser-Tabs beeinflussen</li>
+ <li>Zugreifen auf und verändern von Lesezeichen</li>
+ <li>Zugreifen auf und verändern von Cookies</li>
+</ul>
+
+<h3 id="Konzepte">Konzepte</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs">Verwendung der JavaScript-APIs</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Content_scripts">Content scripts</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Match_patterns">Match patterns</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">Internationalisierung</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">Content Security Policy</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">Native messaging</a></li>
+</ul>
+
+<h3 id="Portieren">Portieren</h3>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">Portieren einer Google Chrome-Erweiterung</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on">Portieren eines veralteten Firefox Add-ons</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Embedded_WebExtensions">Eingebettete WebExtensions</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_the_Add-on_SDK">Vergleich mit dem Add-on SDK</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Comparison_with_XUL_XPCOM_extensions">Vergleich mit XUL/XPCOM-Erweiterungen</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities">Inkompatibilitäten mit Chrome</a></li>
+</ul>
+
+<h3 id="Firefox_workflow">Firefox workflow</h3>
+
+<ul>
+ <li><a href="/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">Installation</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Getting_started_with_web-ext">Einstieg in Web-Ext</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/web-ext_command_reference">Web-Ext Befehlsreferenz</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">WebExtensions und die Add-On-ID</a></li>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension">Veröffentlichen deiner WebExtension</a></li>
+</ul>
+</div>
+
+<div class="section">
+<h3 id="Referenz">Referenz</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript-API-Überblick</a></li>
+ <li><a href="/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">Tabellen zur Browser-Kompatibilität zu JavaScript-APIs</a></li>
+</ul>
+
+<h4 id="JavaScript_APIs">JavaScript APIs</h4>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/API") }}</div>
+
+<h4 id="Manifest_keys">Manifest keys</h4>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div>
+</div>
+</div>
diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html
new file mode 100644
index 0000000000..6222b35145
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html
@@ -0,0 +1,184 @@
+---
+title: commands
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/commands
+tags:
+  - Add-ons Erweiterungen WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/commands
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">Typ</th>
+   <td><code>Objekt</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Obligatorisch</th>
+   <td>Nein</td>
+  </tr>
+  <tr>
+   <th scope="row">Beispiel</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y",
+      "linux": "Ctrl+Shift+U"
+    },
+    "description": "Ereignis 'toggle-feature' senden"
+  }
+}</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Verwenden Sie den<code>commands-Schlüssel, um für Ihre Erweiterung eine oder mehrere Tastenkürzel zu definieren</code>.</p>
+
+<p>Jedes Tastenkürzel wird mit einem Namen, eine Kombination von Tasten und einer Beschreibung definiert. Sobald Sie einige Befehle in der manifest.json definiert haben, können Sie die zugewiesenen Tastenkombinationen mittels der JavaScript-API  {{WebExtAPIRef("commands")}} verwenden.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>Der <code>commands-Schlüssel</code>ist ein Objekt, und jedes Tastenkürzel ist eine Eigenschaft von ihm. Der Name der Eigenschaft ist der Name des Tastenkürzels.</p>
+
+<p>Jedes Tastenkürzel ist selbst ein Objekt, das bis zu zwei Eigenschaften hat:</p>
+
+<ul>
+ <li><code>suggested_key</code>: diese definiert die Tastenkombination</li>
+ <li><code>description</code>: eine Zeichenkette, die dieses Tastenkürzel beschreibt</li>
+</ul>
+
+<p>Die Eigenschaft <code>suggested_key</code> ist selbst ein Objekt, das folgende Eigenschaften haben kann, die alle Zeichenketten sind:</p>
+
+<ul>
+ <li><code>"default"</code>, <code>"mac"</code>, <code>"linux"</code>, <code>"windows"</code>, <code>"chromeos"</code>, <code>"android"</code>, <code>"ios"</code></li>
+</ul>
+
+<p>Der Wert jeder Eigenschaft ist das Tastenkürzel für den Befehl auf der angegebenen Plattform, der als Zeichenkette angegeben wird, die die durch ein „+“ voneinander getrennten Tasten enthält. Der Wert für <code>„default“</code> wird auf allen Plattformen verwendet, die nicht ausdrücklich angegeben sind.</p>
+
+<p>Beispiel:</p>
+
+<pre class="brush: json no-line-numbers">"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Alt+Shift+U",
+      "linux": "Ctrl+Shift+U"
+    },
+    "description": "'toggle-feature'-Ereignis an die Erweiterung senden"
+  },
+  "do-another-thing": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    }
+  }
+}</pre>
+
+<p>Dies definiert zwei Tastenkürzel:</p>
+
+<ul>
+ <li>eine mit dem Namen "toggle-feature", auf die mit Hilfe von <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>U</kbd> auf Linux und <kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>U</kbd> auf allen anderen Plattformen zugegriffen wird</li>
+ <li>eine mit dem Namen "do-another-thing", auf die mit Hilfe von <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Y</kbd> auf allen Plattformen zugegriffen wird.</li>
+</ul>
+
+<p>Sie könnten dann den ersten dieser Befehle mit einem Code wie diesen verwenden:</p>
+
+<pre class="brush: js no-line-numbers">browser.commands.onCommand.addListener(function(command) {
+  if (command == "toggle-feature") {
+    console.log("toggling the feature!");
+  }
+});</pre>
+
+<h3 id="Besondere_Tastenkürzel">Besondere Tastenkürzel</h3>
+
+<p>Es gibt drei besondere Tastenkürzel:</p>
+
+<ul>
+ <li>_execute_browser_action: funktioniert wie ein Klick auf die <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_action">Browseraktion</a> der Erweiterung.</li>
+ <li>_execute_page_action: funktioniert wie ein Klick auf die <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Page_actions">Seitenaktion</a> der Erweiterung.</li>
+ <li>_execute_sidebar_action: öffnet die <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Sidebars">Seitenleiste</a> der Erweiterung. Wird nur in Firefox unterstützt und erst ab Firefox Version 54.</li>
+</ul>
+
+<p>Dies definiert zum Beispiel eine Tastenkombination, um auf die Browseraktion der Erweiterung zu klicken:</p>
+
+<pre class="brush: js no-line-numbers">"commands": {
+  "_execute_browser_action": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    }
+  }
+}</pre>
+
+<h2 id="Tastenkürzel-Werte">Tastenkürzel-Werte</h2>
+
+<p>Es gibt zwei gültige Formate für Tastenkürzel: als Tastenkombination oder als Medien-Taste.</p>
+
+<h3 id="Tastenkombinationen">Tastenkombinationen</h3>
+
+<div class="pull-aside">
+<div class="moreinfo">Auf Macs wird "Ctrl" als  "Command"-Taste interpretiert, geben Sie also "MacCrtl" an, wenn Sie eigentlich "Ctrl" brauchen.</div>
+</div>
+
+<p>Tastenkombinationen müssen aus zwei oder mehr Tasten bestehen:</p>
+
+<ul>
+ <li><strong>Modifikator </strong>(obligatorisch, mit Ausnahme der Funktionstasten). Dieser kann sein: "Ctrl", "Alt", "Command", "MacCtrl".</li>
+ <li><strong>zweiter Modifikator</strong> (optional). Wenn angegeben, muss dieser entweder "Shift" oder (für Firefox ≥ 63)  "Ctrl", "Alt", "Command" und "MacCtrl" sein, wenn sie nicht als Hauptmodifikator verwendet werden.</li>
+ <li><strong>Taste </strong>(obligatorisch). Die kann sein:
+  <ul>
+   <li>die Buchstaben A-Z</li>
+   <li>die Zahlen 0-9</li>
+   <li>die Funktionstasten F1-F12</li>
+   <li>Comma (Komma), Period (Punkt), Home (Pos1), End (Ende), PageUp (Bild hoch) , PageDown (Bild runter), Space (Leertaste), Insert (Einfg), Delete (Entf), Up (Pfeil hoch), Down (Pfeil runter), Left (Pfeil links), Right (Pfeil rechts)</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Die Taste wird dann als Zeichenkette angegeben, die den Satz an Tastenwerten enthält, in der oben angegebenen Reihenfolge, getrennt durch "+": zum Beispiel "Ctrl+Shift+Z".</p>
+
+<p>Wenn eine Tastenkombination bereits vom Browser (zum Beispiel "Ctrl+P") oder durch ein bestehendes Add-on verwendet wird, können Sie sie nicht überschreiben. Sie dürfen sie definieren, aber Ihr Eventhandler wird nicht aufgerufen, wenn der Benutzer sie eingibt.</p>
+
+<h3 id="Medientasten">Medientasten</h3>
+
+<p>Alternativ kann das Tastenkürzel als eine der folgenden Medientasten angegeben werden:</p>
+
+<ul>
+ <li>"MediaNextTrack", "MediaPlayPause", "MediaPrevTrack", "MediaStop"</li>
+</ul>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Definieren Sie ein einzelnes Tastenkürzel, das nur standardmäßig verwendet wird:</p>
+
+<pre class="brush: json no-line-numbers">"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    },
+    "description": "Ereignis'toggle-feature' senden"
+  }
+}</pre>
+
+<p>Definieren Sie zwei Tastenkürzel, eins mit einer plattformspezifischen Tastenkombination:</p>
+
+<pre class="brush: json no-line-numbers">"commands": {
+  "toggle-feature": {
+    "suggested_key": {
+      "default": "Alt+Shift+U",
+      "linux": "Ctrl+Shift+U"
+    },
+    "description": "Ereignis 'toggle-feature' senden"
+  },
+  "do-another-thing": {
+    "suggested_key": {
+      "default": "Ctrl+Shift+Y"
+    }
+  }
+}</pre>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.commands")}}</p>
diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html
new file mode 100644
index 0000000000..1b4afb1cfa
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html
@@ -0,0 +1,42 @@
+---
+title: devtools_page
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">Type</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json no-line-numbers">
+"devtools_page": "devtools/my-page.html"</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Use this key to enable your extension to extend the browser's built-in devtools.</p>
+
+<p>This key is defined as a URL to an HTML file. The HTML file must be bundled with the extension, and the URL is relative to the extension's root.</p>
+
+<p>See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> to learn more.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: json no-line-numbers">"devtools_page": "devtools/my-page.html"</pre>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.devtools_page")}}</p>
diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/index.html
new file mode 100644
index 0000000000..10a4fd8597
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/manifest.json/index.html
@@ -0,0 +1,105 @@
+---
+title: manifest.json
+slug: Mozilla/Add-ons/WebExtensions/manifest.json
+tags:
+  - Add-ons
+  - Extensions
+  - NeedsTranslation
+  - TopicStub
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Die Datei manifest.json ist eine <a href="/en-US/docs/Glossary/JSON">JSON</a>-formatierte Datei, und die einzige Datei, die eine Erweiterung, die das WebExtensions API verwendet, unterstützt.</p>
+
+<p>Durch das Verwenden von manifest.json, legst du Metadaten, wie zum Beispiel Name und Version, für deine Erweiterung fest, und kannst auch einige Aspekte der Funktionalität deiner Erweiterung,wie zum Beispiel Hintergrundskripte, Inhaltsskripte und Browserationen.</p>
+
+<p>Manifest.json keys sind unten gelistet:</p>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div>
+
+<div class="twocolumns"> </div>
+
+<p><code>"manifest_version"</code>, <code>"version"</code>, und <code>"name"</code> sind die einzigen verpflichtenden Keys. <code>"default_locale"</code> muss vorhanden sein, wenn der "_locales"-Ordner vorhanden ist und darf sonst nicht vorhanden sein. <code>"applications"</code> wird von Google Chrome nicht unterstützt, und ist verpflichtend in Firefox vor Firefox 48 und Firefox für Android.</p>
+
+<h2 id="Browserkompatiblität">Browserkompatiblität</h2>
+
+<p>{{Compat("webextensions.manifest")}}</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Hier ein kurzes Syntax-Beispiel für manifest.json:</p>
+
+<pre class="brush: json">{
+  "applications": {
+    "gecko": {
+      "id": "addon@example.com",
+      "strict_min_version": "42.0"
+    }
+  },
+
+  "background": {
+    "scripts": ["jquery.js", "my-background.js"],
+    "page": "my-background.html"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "commands": {
+    "toggle-feature": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Y",
+        "linux": "Ctrl+Shift+U"
+      },
+      "description": "Send a 'toggle-feature' event"
+    }
+  },
+
+  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
+
+  "content_scripts": [
+    {
+      "exclude_matches": ["*://developer.mozilla.org/*"],
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "default_locale": "en",
+
+  "description": "...",
+
+  "icons": {
+    "48": "icon.png",
+    "96": "icon@2x.png"
+  },
+
+  "manifest_version": 2,
+
+  "name": "...",
+
+  "page_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "permissions": ["webNavigation"],
+
+  "version": "0.1",
+
+  "web_accessible_resources": ["images/my-image.png"]
+}</pre>
+
+<p> </p>
diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html
new file mode 100644
index 0000000000..30825db592
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html
@@ -0,0 +1,1361 @@
+---
+title: theme
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme
+---
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">Type</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Mandatory</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Example</th>
+   <td>
+    <pre class="brush: json notranslate">
+"theme": {
+  "images": {
+    "theme_frame": "images/sun.jpg"
+  },
+  "colors": {
+    "frame": "#CF723F",
+    "tab_background_text": "#000"
+  }
+}</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Use the theme key to define a static theme to apply to Firefox.</p>
+
+<div class="note">
+<p><strong>Note</strong>: If you want to include a theme with an extension, please see the {{WebExtAPIRef("theme")}} API.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong>: Since May 2019, themes need to be signed to be installed ({{bug(1545109)}}).  See <a href="/en-US/docs/Mozilla/Add-ons/Distribution">Signing and distributing your add-on</a> for more details.</p>
+</div>
+
+<div class="note">
+<p><strong>Theme support in Firefox for Android</strong>: A new version of Firefox for Android, based on GeckoView, is under development. A <a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix" rel="noreferrer nofollow">pre-release version</a> is available. The pre-release version does not support themes.</p>
+</div>
+
+<h2 id="Image_formats">Image formats</h2>
+
+<p>The following image formats are supported in all theme image properties:</p>
+
+<ul>
+ <li>JPEG</li>
+ <li>PNG</li>
+ <li>APNG</li>
+ <li>SVG (animated SVG is supported from Firefox 59)</li>
+ <li>GIF (animated GIF isn’t supported)</li>
+</ul>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The theme key is an object that takes the following properties:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>images</code></td>
+   <td><code>Object</code></td>
+   <td>
+    <p>Optional as of Firefox 60. Mandatory before Firefox 60.</p>
+
+    <p>A JSON object whose properties represent the images to display in various parts of the browser. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#images">images</a></code> for details on the properties that this object can contain.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>colors</code></td>
+   <td><code>Object</code></td>
+   <td>
+    <p>Mandatory.</p>
+
+    <p>A JSON object whose properties represent the colors of various parts of the browser. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#colors">colors</a></code> for details on the properties that this object can contain.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>properties</code></td>
+   <td><code>Object</code></td>
+   <td>
+    <p>Optional</p>
+
+    <p>This object has two properties that affect how the <code>"additional_backgrounds"</code> images are displayed. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#properties">properties</a></code> for details on the properties that this object can contain.</p>
+
+    <ul>
+     <li><code>"additional_backgrounds_alignment":</code> an array of enumeration values defining the alignment of the corresponding <code>"additional_backgrounds":</code> array item.<br>
+      The alignment options include: <code>"bottom"</code>, <code>"center"</code>, <code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"center bottom"</code>, <code>"center center"</code>, <code>"center top"</code>, <code>"left bottom"</code>, <code>"left center"</code>, <code>"left top"</code>, <code>"right bottom"</code>, <code>"right center"</code>, and <code>"right top"</code>. If not specified, defaults to <code>"right top"</code>.<br>
+      Optional</li>
+     <li><code>"additional_backgrounds_tiling":</code> an array of enumeration values defining how the corresponding <code>"additional_backgrounds":</code> array item repeats, with support for <code>"no-repeat"</code>, <code>"repeat"</code>, <code>"repeat-x"</code>, and <code>"repeat-y"</code>. If not specified, defaults to <code>"no-repeat"</code>.<br>
+      Optional</li>
+    </ul>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="images">images</h3>
+
+<p dir="ltr">All URLs are relative to the manifest.json file and cannot reference an external URL.</p>
+
+<p dir="ltr">Images should be 200 pixels high to ensure they always fill the header space vertically.</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>headerURL </code> <code>{{Deprecated_Inline}}</code></td>
+   <td><code>String</code></td>
+   <td>
+    <div class="blockIndicator warning">
+    <p><code>headerURL</code> has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use <code>theme_frame</code> instead.</p>
+    </div>
+
+    <p>The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.</p>
+
+    <p>Optional in desktop Firefox from Firefox 60 onwards. One of <code>theme_frame</code> or <code>headerURL</code> had to be specified before Firefox 60. Note also that in Firefox 60 onwards, any {{cssxref("text-shadow")}} applied to the header text is removed if no <code>headerURL</code> is specified (see {{bug(1404688)}}).</p>
+
+    <p>In Firefox for Android, <code>headerURL</code> or <code>theme_frame</code>  must be specified.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>theme_frame</code></td>
+   <td><code>String</code></td>
+   <td>
+    <p>The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.</p>
+
+    <div class="blockIndicator note">
+    <p>Chrome anchors the image to the top left of the header and if the image doesn’t fill the header area tile the image.</p>
+    </div>
+
+    <p>Optional in desktop Firefox 60 onwards. One of <code>theme_frame</code> or <code>headerURL</code> had to be specified before Firefox 60.</p>
+
+    <p>In Firefox for Android, <code>headerURL</code> or <code>theme_frame</code>  must be specified.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>additional_backgrounds</code></td>
+   <td><code>Array </code>of <code>String</code></td>
+   <td>
+    <div class="warning">
+    <p>The <code>additional_backgrounds</code> property is experimental. It is currently accepted in release versions of Firefox, but its behavior is subject to change. It is not supported in Firefox for Android.</p>
+    </div>
+
+    <p>An array of URLs for additional background images to be added to the header area and displayed behind the <code>"theme_frame":</code> image. These images layer the first image in the array on top, the last image in the array at the bottom.</p>
+
+    <p>Optional.</p>
+
+    <p>By default all images are anchored to the upper right corner of the header area, but their alignment and repeat behavior can be controlled by properties of <code>"properties":</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="colors">colors</h3>
+
+<p>These properties define the colors used for different parts of the browser. They are all optional (but note that <code>"accentcolor"</code> and <code>"textcolor"</code> were mandatory in Firefox before version 63).  How these properties affect the Firefox UI  is shown here:</p>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <td style="background-color: white;">
+    <p><img alt="Overview of the color properties and how they apply to Firefox UI components" src="https://mdn.mozillademos.org/files/16855/Themes_components_annotations.png" style="height: 1065px; width: 1521px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="blockIndicator note">
+<p>Where a component is affected by multiple color properties, the properties are listed in order of precedence.</p>
+</div>
+
+<p>All these properties can be specified as either a string containing any valid <a href="/en-US/docs/Web/CSS/color_value">CSS color string</a> (including hexadecimal), or an RGB array, such as <code>"tab_background_text": [ 107 , 99 , 23 ]</code>.</p>
+
+<div class="blockIndicator note">
+<p><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">In Chrome, colors may only be specified as RGB arrays</a>.</p>
+
+<p>In Firefox for Android colors can be specified using:</p>
+
+<ul>
+ <li>full hexadecimal notation, that is #RRGGBB only. <em>alpha</em> and shortened syntax, as in #RGB[A], are not supported.</li>
+ <li><a href="/en-US/docs/Web/CSS/color_value#Syntax_2">Functional notation</a> (RGB arrays) for themes targeting Firefox 68.2 or later.</li>
+</ul>
+
+<p>Colors for Firefox for Android themes cannot be specified using color names.</p>
+</div>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p><code>accentcolor</code><code> {{Deprecated_Inline}}</code></p>
+   </td>
+   <td>
+    <div class="blockIndicator warning">
+    <p><code>accentcolor</code> has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use the <code>frame</code> property instead.</p>
+    </div>
+
+    <p>The color of the header area background, displayed in the part of the header not covered or visible through the images specified in <code>"headerURL"</code> and <code>"additional_backgrounds"</code>.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "accentcolor": "red",
+     "tab_background_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15871/theme-accentcolor.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>bookmark_text</code></td>
+   <td>
+    <p>The color of text and icons in the bookmark and find bars. Also, if <code>tab_text</code> isn't defined it sets the color of the active tab text and if <code>icons</code> isn't defined the color of the toolbar icons. Provided as Chrome compatible alias for <code>toolbar_text</code>.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure any color used contrasts well with those used in <code>frame</code> and <code>frame_inactive</code> or <code>toolbar</code> if you're using that property.</p>
+
+    <p>Where <code>icons</code> isn't defined, also ensure good contrast with<code> button_background_active</code> and <code>button_background_hover</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "tab_text": "white",
+    "toolbar": "black",
+    "bookmark_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="Example use of the bookmark_text color property" src="https://mdn.mozillademos.org/files/16668/theme-bookmark_text.png"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>button_background_active</code></td>
+   <td>
+    <p>The color of the background of the pressed toolbar buttons.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "button_background_active": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15872/theme-button_background_active.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>button_background_hover</code></td>
+   <td>
+    <p>The color of the background of the toolbar buttons on hover.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "button_background_hover": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15873/theme-button_background_hover.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>icons</code></td>
+   <td>
+    <p>The color of toolbar icons, excluding those in the find toolbar.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>frame</code>,  <code>frame_inactive</code>, <code>button_background_active</code>, and <code>button_background_hover</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "icons": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15874/theme-icons.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>icons_attention</code></td>
+   <td>
+    <p>The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>frame</code>,  <code>frame_inactive</code>, <code>button_background_active</code>, and <code>button_background_hover</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "icons_attention": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15875/theme-icons_attention.png" style="height: 324px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>frame</code></td>
+   <td>
+    <p>The color of the header area background, displayed in the part of the header not covered or visible through the images specified in <code>"theme_frame"</code> and <code>"additional_backgrounds"</code>.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "red",
+     "tab_background_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15871/theme-accentcolor.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>frame_inactive</code></td>
+   <td>
+    <p>The color of the header area background when the browser window is inactive, displayed in the part of the header not covered or visible through the images specified in <code>"theme_frame"</code> and <code>"additional_backgrounds"</code>.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "red",
+     "frame_inactive": "gray",
+     "tab_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="Example use of the frame_inactive color property" src="https://mdn.mozillademos.org/files/16669/theme-frame_inactive.png" style="height: 193px; width: 752px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>ntp_background</code></td>
+   <td>
+    <p>The new tab page background color.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "ntp_background": "red",
+     "ntp_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16175/ntp_colors.png" style="display: block; height: 190px; margin: 0 auto;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>ntp_text</code></td>
+   <td>
+    <p>The new tab page text color.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with that used in <code>ntp_background</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "ntp_background": "red",
+     "ntp_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16175/ntp_colors.png" style="display: block; height: 190px; margin: 0 auto;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>popup</code></td>
+   <td>
+    <p>The background color of popups (such as the url bar dropdown and the arrow panels).</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15876/theme-popup.png" style="height: 324px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>popup_border</code></td>
+   <td>
+    <p>The border color of popups.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup": "black",
+     "popup_text": "white",
+     "popup_border": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15877/theme-popup_border.png" style="height: 324px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>popup_highlight</code></td>
+   <td>
+    <p>The background color of items highlighted using the keyboard inside popups (such as the selected url bar dropdown item).</p>
+
+    <div class="blockIndicator note">
+    <p>It's recommended to define <code>popup_highlight_text</code> to override the browser default text color on various platforms.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup_highlight": "red",
+     "popup_highlight_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15878/theme-popup_highlight.png" style="height: 490px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>popup_highlight_text</code></td>
+   <td>
+    <p>The text color of items highlighted inside popups.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with that used in <code>popup_highlight</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup_highlight": "black",
+     "popup_highlight_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15879/theme-popup_highlight_text.png" style="height: 490px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>popup_text</code></td>
+   <td>
+    <p>The text color of popups.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with that used in <code>popup</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup": "black",
+     "popup_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15880/popup_text.png" style="height: 490px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sidebar</code></td>
+   <td>
+    <p>The background color of the sidebar.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "sidebar": "red",
+     "sidebar_highlight": "white",
+     "sidebar_highlight_text": "green",
+     "sidebar_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16176/sidebar_colors.png" style="display: block; margin: 0 auto; width: 250px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sidebar_border</code></td>
+   <td>
+    <p>The border and splitter color of the browser sidebar</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "sidebar_border": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16177/Screen_Shot_2018-09-16_at_6.13.31_PM.png" style="display: block; height: 286px; margin: 0px auto; width: 300px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sidebar_highlight</code></td>
+   <td>
+    <p>The background color of highlighted rows in built-in sidebars</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "sidebar_highlight": "red",
+     "sidebar_highlight_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16223/Screen_Shot_2018-10-04_at_11.15.46_AM.png" style="display: block; height: 357px; margin: 0px auto; width: 269px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sidebar_highlight_text</code></td>
+   <td>
+    <p>The text color of highlighted rows in sidebars.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with that used in <code>sidebar_highlight</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "sidebar_highlight": "pink",
+    "sidebar_highlight_text": "red",
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16224/Screen_Shot_2018-10-04_at_11.22.41_AM.png" style="display: block; height: 363px; margin: auto; width: 262px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>sidebar_text</code></td>
+   <td>
+    <p>The text color of sidebars.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with that used in <code>sidebar</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "sidebar": "red",
+     "sidebar_highlight": "white",
+     "sidebar_highlight_text": "green",
+     "sidebar_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/16176/sidebar_colors.png" style="display: block; margin: 0 auto; width: 250px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_background_separator</code></td>
+   <td>
+    <p>The color of the vertical separator of the background tabs.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_background_separator": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="A closeup of browser tabs to highlight the separator." src="https://mdn.mozillademos.org/files/16048/theme-tab-background-separator.png" style="height: 356px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_background_text</code></td>
+   <td>
+    <p>The color of the text displayed in the inactive page tabs. If <code>tab_text</code> or <code>bookmark_text</code> isn't specified, applies to the active tab text.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>tab_selected</code> or <code>frame</code> and  <code>frame_inactive</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "white",
+    "tab_background_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15885/theme-textcolor.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_line</code></td>
+   <td>
+    <p>The color of the selected tab line.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_line": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15881/theme-tab_line.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_loading</code></td>
+   <td>
+    <p>The color of the tab loading indicator and the tab loading burst.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_loading": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15882/theme-tab_loading.gif" style="height: 186px; width: 618px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_selected</code></td>
+   <td>
+    <p>The background color of the selected tab. When not in use selected tab color is set by <code>frame</code> and the <code>frame_inactive</code>.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "images": {
+  "theme_frame": "weta.png"
+},
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_selected": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15883/theme-tab_selected.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>tab_text</code></td>
+   <td>
+    <p>From Firefox 59, it represents the text color for the selected tab. If <code>tab_line</code> isn't specified, it also defines the color of the selected tab line.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>tab_selected</code> or <code>frame</code> and  <code>frame_inactive</code>.</p>
+    </div>
+
+    <p>From Firefox 55 to 58, it is incorrectly implemented as alias for <code>"textcolor"</code></p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "images": {
+  "theme_frame": "weta.png"
+},
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_selected": "white",
+     "tab_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15884/theme-tab_text.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>textcolor {{Deprecated_Inline}}</code></td>
+   <td>
+    <div class="blockIndicator warning">
+    <p><code>textcolor</code> has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use <code>tab_background_text</code> instead.</p>
+    </div>
+
+    <p>The color of the text displayed in the header area.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "white",
+    "textcolor": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15885/theme-textcolor.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar</code></td>
+   <td>
+    <p>The background color for the navigation bar, the bookmarks bar, and the selected tab.</p>
+
+    <p>This also sets the background color of the "Find" bar.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "red",
+    "tab_background_text": "white"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15966/toolbar.png" style="height: 335px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_bottom_separator</code></td>
+   <td>
+    <p>The color of the line separating the bottom of the toolbar from the region below.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar_bottom_separator": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15887/theme-toolbar_bottom_separator.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field</code></td>
+   <td>
+    <p>The background color for fields in the toolbar, such as the URL bar.</p>
+
+    <p>This also sets the background color of the <strong>Find in page</strong> field.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15967/toolbar-field.png" style="height: 335px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_border</code></td>
+   <td>
+    <p>The border color for fields in the toolbar.</p>
+
+    <p>This also sets the border color of the <strong>Find in page</strong> field.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_border": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15968/toolbar-field-border.png" style="height: 335px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_border_focus</code></td>
+   <td>
+    <p>The focused border color for fields in the toolbar.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_border_focus": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15890/theme-toolbar_field_border_focus.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_focus</code></td>
+   <td>
+    <p>The focused background color for fields in the toolbar, such as the URL bar.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_focus": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15891/theme-toolbar_field_focus.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_highlight</code></td>
+   <td>The background color used to indicate the current selection of text in the URL bar (and the search bar, if it's configured to be separate).
+    <details open><summary>See example</summary>
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "toolbar_field": "rgba(255, 255, 255, 0.91)",
+    "toolbar_field_text": "rgb(0, 100, 0)",
+    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
+    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="Example showing customized text and highlight colors in the URL bar" src="https://mdn.mozillademos.org/files/16632/toolbar_field_highlight.png" style="height: 289px; width: 738px;"></p>
+
+    <p>Here, the <code>toolbar_field_highlight</code> field specifies that the highlight color is a light green, while the text is set to a dark-to-medium green using <code>toolbar_field_highlight_text</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_highlight_text</code></td>
+   <td>
+    <p>The color used to draw text that's currently selected in the URL bar (and the search bar, if it's configured to be separate box).</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>toolbar_field_highlight</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "toolbar_field": "rgba(255, 255, 255, 0.91)",
+    "toolbar_field_text": "rgb(0, 100, 0)",
+    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
+    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="Example showing customized text and highlight colors in the URL bar" src="https://mdn.mozillademos.org/files/16632/toolbar_field_highlight.png" style="height: 289px; width: 738px;"></p>
+
+    <p>Here, the <code>toolbar_field_highlight_text</code> field is used to set the text color to a dark medium-dark green, while the highlight color is  a light green.</p>
+   </td>
+  </tr>
+  <tr>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_separator</code></td>
+   <td>
+    <p>The color of separators inside the URL bar. In Firefox 58 this was implemented as <code>toolbar_vertical_separator</code>.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field_separator": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15895/theme-toolbar_field_separator.png" style="height: 302px; width: 738px;"></p>
+
+    <p>In this screenshot, <code>"toolbar_vertical_separator"</code> is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_text</code></td>
+   <td>
+    <p>The color of text in fields in the toolbar, such as the URL bar. This also sets the color of text in the <strong>Find in page</strong> field.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>toolbar_field</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15969/toolbar-field-text.png" style="height: 335px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_field_text_focus</code></td>
+   <td>
+    <p>The color of text in focused fields in the toolbar, such as the URL bar.</p>
+
+    <div class="blockIndicator note">
+    <p>Ensure the color used contrasts well with those used in <code>toolbar_field_focus</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_text_focus": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15893/theme-toolbar_field_text_focus.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_text </code></td>
+   <td>
+    <p>The color of toolbar text. This also sets the color of  text in the "Find" bar.</p>
+
+    <div class="blockIndicator note">
+    <p>For compatibility with Chrome, use the alias <code>bookmark_text</code>.</p>
+    </div>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar": "black",
+    "toolbar_text": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15970/toolbar-text.png" style="height: 335px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_top_separator</code></td>
+   <td>
+    <p>The color of the line separating the top of the toolbar from the region above.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar": "black",
+    "toolbar_top_separator": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15897/theme-toolbar_top_separator.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>toolbar_vertical_separator</code></td>
+   <td>
+    <p>The color of the separator next to the application menu icon. In Firefox 58, it corresponds to the color of separators inside the URL bar.</p>
+
+    <details open><summary>See example</summary>
+
+    <pre class="brush: json notranslate">
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar": "black",
+    "toolbar_vertical_separator": "red"
+  }
+}</pre>
+    </details>
+
+    <p><img alt="" src="https://mdn.mozillademos.org/files/15898/theme-toolbar_vertical_separator.png" style="height: 302px; width: 738px;"></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Aliases">Aliases</h4>
+
+<p>Additionally, this key accepts various properties that are aliases for one of the properties above. These are provided for compatibility with Chrome. If an alias is given, and the non-alias version is also given, then the value will be taken from the non-alias version.</p>
+
+<div class="blockIndicator warning">
+<p>Beginning Firefox 70, the following properties are removed: <code>accentcolor</code> and <code>textcolor</code>. Use <code>frame</code> and <code>tab_background_text</code> instead. Using these values in themes loaded into Firefox 65 or later will raise warnings.</p>
+</div>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Alias for</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>bookmark_text</code></td>
+   <td><code>toolbar_text</code></td>
+  </tr>
+  <tr>
+   <td><code>frame</code></td>
+   <td><code>accentcolor</code> <code>{{Deprecated_Inline}}</code></td>
+  </tr>
+  <tr>
+   <td><code>frame_inactive</code></td>
+   <td><code>accentcolor</code> <code>{{Deprecated_Inline}}</code></td>
+  </tr>
+  <tr>
+   <td><code>tab_background_text</code></td>
+   <td><code>textcolor</code> <code>{{Deprecated_Inline}}</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="properties">properties</h3>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>additional_backgrounds_alignment</code></td>
+   <td>
+    <p><code>Array</code> of <code>String</code></p>
+   </td>
+   <td>
+    <p>Optional.</p>
+
+    <p>An array of enumeration values defining the alignment of the corresponding <code>"additional_backgrounds":</code> array item.<br>
+     The alignment options include:</p>
+
+    <ul>
+     <li><code>"bottom"</code></li>
+     <li><code>"center"</code></li>
+     <li><code>"left"</code></li>
+     <li><code>"right"</code></li>
+     <li><code>"top"</code></li>
+     <li><code>"center bottom"</code></li>
+     <li><code>"center center"</code></li>
+     <li><code>"center top"</code></li>
+     <li><code>"left bottom"</code></li>
+     <li><code>"left center"</code></li>
+     <li><code>"left top"</code></li>
+     <li><code>"right bottom"</code></li>
+     <li><code>"right center"</code></li>
+     <li><code>"right top"</code>.</li>
+    </ul>
+
+    <p>If not specified, defaults to <code>"right top"</code>.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>additional_backgrounds_tiling</code></td>
+   <td>
+    <p><code>Array</code> of <code>String</code></p>
+   </td>
+   <td>
+    <p>Optional.</p>
+
+    <p>An array of enumeration values defining how the corresponding <code>"additional_backgrounds":</code> array item repeats. Options include:</p>
+
+    <ul>
+     <li><code>"no-repeat"</code></li>
+     <li><code>"repeat"</code></li>
+     <li><code>"repeat-x"</code></li>
+     <li><code>"repeat-y"</code></li>
+    </ul>
+
+    <p>If not specified, defaults to <code>"no-repeat"</code>.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Examples">Examples</h2>
+
+<p dir="ltr" id="docs-internal-guid-f85f22a2-6854-24d7-769b-8a47c376e2f2">A basic theme must define an image to add to the header, the accent color to use in the header, and the color of text used in the header:</p>
+
+<pre class="brush: json notranslate" dir="ltr"> "theme": {
+   "images": {
+     "theme_frame": "images/sun.jpg"
+   },
+   "colors": {
+     "frame": "#CF723F",
+     "tab_background_text": "#000"
+   }
+ }</pre>
+
+<p dir="ltr">Multiple images can be used to fill the header. Before Firefox version 60, use a blank or transparent header image to gain control over the placement of each additional image:</p>
+
+<pre class="brush: json notranslate" dir="ltr"> "theme": {
+   "images": {
+     "additional_backgrounds": [ "images/left.png" , "images/middle.png", "images/right.png"]
+   },
+   "properties": {
+     "additional_backgrounds_alignment": [ "left top" , "top", "right top"]
+   },
+   "colors": {
+     "frame": "blue",
+     "tab_background_text": "#ffffff"
+   }
+ }</pre>
+
+<p dir="ltr">You can also fill the header with a repeated image, or images, in this case a single image anchored in the middle top of the header and repeated across the rest of the header:</p>
+
+<pre class="brush: json notranslate" dir="ltr"> "theme": {
+   "images": {
+     "additional_backgrounds": [ "images/logo.png"]
+   },
+   "properties": {
+     "additional_backgrounds_alignment": [ "top" ],
+     "additional_backgrounds_tiling": [ "repeat"  ]
+   },
+   "colors": {
+     "frame": "green",
+     "tab_background_text": "#000"
+   }
+ }</pre>
+
+<p><a id="example-screenshot" name="example-screenshot">The following example uses most of the different values for <code>theme.colors</code>:</a></p>
+
+<pre class="brush: json notranslate">  "theme": {
+    "images": {
+      "theme_frame": "weta.png"
+    },
+
+    "colors": {
+       "frame": "darkgreen",
+       "tab_background_text": "white",
+       "toolbar": "blue",
+       "bookmark_text": "cyan",
+       "toolbar_field": "orange",
+       "toolbar_field_border": "white",
+       "toolbar_field_text": "green",
+       "toolbar_top_separator": "red",
+       "toolbar_bottom_separator": "white",
+       "toolbar_vertical_separator": "white"
+    }
+  }</pre>
+
+<p>It will give you a browser that looks like this:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15789/theme.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 1446px;"></p>
+
+<p>In this screenshot, <code>"toolbar_vertical_separator"</code> is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.theme")}}</p>
+
+<h3 id="Colors">Colors</h3>
+
+<p>{{Compat("webextensions.manifest.theme.colors", 10)}}</p>
+
+<h3 id="Images">Images</h3>
+
+<p>{{Compat("webextensions.manifest.theme.images", 10)}}</p>
+
+<h3 id="Properties">Properties</h3>
+
+<p>{{Compat("webextensions.manifest.theme.properties", 10)}}</p>
+
+<h3 id="Chrome_compatibility">Chrome compatibility</h3>
+
+<p>In Chrome:</p>
+
+<ul>
+ <li><code>colors/toolbar_text</code> is not used, use <code>colors/bookmark_text</code> instead.</li>
+ <li><code>images/theme_frame</code> anchors the image to the top left of the header and if the image doesn’t fill the header area tile the image.</li>
+ <li>all colors must be specified as an array of RGB values, like this:
+  <pre class="brush: json notranslate">"theme": {
+  "colors": {
+     "frame": [255, 0, 0],
+     "tab_background_text": [0, 255, 0],
+     "bookmark_text": [0, 0, 255]
+  }
+}</pre>
+
+  <p>From Firefox 59 onward, both the array form and the CSS color form are accepted for all properties. Before that, <code>colors/frame</code> and <code>colors/tab_background_text</code> required the array form, while other properties required the CSS color form.</p>
+ </li>
+</ul>
diff --git a/files/de/mozilla/add-ons/webextensions/match_patterns/index.html b/files/de/mozilla/add-ons/webextensions/match_patterns/index.html
new file mode 100644
index 0000000000..6c4694c922
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/match_patterns/index.html
@@ -0,0 +1,430 @@
+---
+title: Match patterns in extension manifests
+slug: Mozilla/Add-ons/WebExtensions/Match_patterns
+translation_of: Mozilla/Add-ons/WebExtensions/Match_patterns
+---
+<div>{{AddonSidebar}}</div>
+
+<p>Match patterns are a way to specify groups of URLs: a match pattern matches a specific set of URLs. They are used in WebExtensions APIs in a few places, most notably to specify which documents to load <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> into, and to specify which URLs to add <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a></code> listeners to.</p>
+
+<p>APIs that use match patterns usually accept a list of match patterns, and will perform the appropriate action if the URL matches any of the patterns. See, for example, the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> key in manifest.json.</p>
+
+<h2 id="Match_pattern_structure">Match pattern structure</h2>
+
+<div class="note">
+<p><strong>Note:</strong> Some browsers don’t support certain schemes.<br>
+ Check the <a href="#Browser_compatibility">Browser compatibility table</a> for details.</p>
+</div>
+
+<p>All match patterns are specified as strings. Apart from the special <code><a href="/en-US/Add-ons/WebExtensions/Match_patterns#%3Call_urls%3E">&lt;all_urls&gt;</a></code> pattern, match patterns consist of three parts: <em>scheme</em>, <em>host</em>, and <em>path</em>. The scheme and host are separated by <code>://</code>.</p>
+
+<pre>&lt;scheme&gt;://&lt;host&gt;&lt;path&gt;</pre>
+
+<h3 id="scheme">scheme</h3>
+
+<p>The <em>scheme</em> component may take one of two forms:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Form</th>
+   <th scope="col">Matches</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>*</code></td>
+   <td>Only "http" and "https" and in some browsers also <a href="/en-US/docs/Web/API/WebSockets_API">"ws" and "wss"</a>.</td>
+  </tr>
+  <tr>
+   <td>One of <code>http</code>, <code>https</code>, <code>ws</code>, <code>wss</code>, <code>ftp</code>, <code>ftps</code>, <code>data</code> or <code>file</code>.</td>
+   <td>Only the given scheme.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="host">host</h3>
+
+<p>The <em>host</em> component may take one of three forms:</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 50%;">Form</th>
+   <th scope="col">Matches</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>*</code></td>
+   <td>Any host.</td>
+  </tr>
+  <tr>
+   <td><code>*.</code> followed by part of the hostname.</td>
+   <td>The given host and any of its subdomains.</td>
+  </tr>
+  <tr>
+   <td>A complete hostname, without wildcards.</td>
+   <td>Only the given host.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p><em>host</em> must not include a port number.</p>
+
+<p><em>host</em> is optional only if the <em>scheme</em> is "file".</p>
+
+<p>Note that the wildcard may only appear at the start.</p>
+
+<h3 id="path">path</h3>
+
+<p>The <em>path</em> component must begin with a <code>/</code>.</p>
+
+<p>After that, it may subsequently contain any combination of the <code>*</code> wildcard and any of the characters that are allowed in URL paths or query strings. Unlike <em>host</em>, the <em>path</em> component may contain the <code>*</code> wildcard in the middle or at the end, and the <code>*</code> wildcard may appear more than once.</p>
+
+<p>The value for the <em>path</em> matches against the string which is the URL path plus the <a href="https://en.wikipedia.org/wiki/Query_string">URL query string</a>. This includes the <code>?</code> between the two, if the query string is present in the URL. For example, if you want to match URLs on any domain where the URL path ends with <code>foo.bar</code>, then you need to use an array of Match Patterns like <code>['*://*/*foo.bar', '*://*/*foo.bar?*']</code>. The <code>?*</code> is needed, rather than just <code>bar*</code>, in order to anchor the ending <code>*</code> as applying to the URL query string and not some portion of the URL path.</p>
+
+<p>Neither the <a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL fragment identifier</a>, nor the <code>#</code> which precedes it, are considered as part of the <em>path</em>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: The path pattern string should not include a port number. Adding a port, as in: <em>"http://localhost:1234/*" </em>causes the match pattern to be ignored. However, "<em>http://localhost:1234</em>" will match with "<em>http://localhost/*</em>"</p>
+</div>
+
+<h3 id="&lt;all_urls>">&lt;all_urls&gt;</h3>
+
+<p>The special value <code>&lt;all_urls&gt;</code> matches all URLs under any of the supported schemes: that is "http", "https", "ws", "wss", "ftp", "data", and "file".</p>
+
+<h2 id="Examples">Examples</h2>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 33%;">Pattern</th>
+   <th scope="col" style="width: 33%;">Example matches</th>
+   <th scope="col" style="width: 33%;">Example non-matches</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <p><code>&lt;all_urls&gt;</code></p>
+
+    <p>Match all URLs.</p>
+   </td>
+   <td>
+    <p><code>http://example.org/</code></p>
+
+    <p><code>https://a.org/some/path/</code></p>
+
+    <p><code>ws://sockets.somewhere.org/</code></p>
+
+    <p><code>wss://ws.example.com/stuff/</code></p>
+
+    <p><code>ftp://files.somewhere.org/</code></p>
+
+    <p><code>ftps://files.somewhere.org/</code></p>
+   </td>
+   <td>
+    <p><code>resource://a/b/c/</code><br>
+     (unsupported scheme)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>*://*/*</code></p>
+
+    <p>Match all HTTP, HTTPS and WebSocket URLs.</p>
+   </td>
+   <td>
+    <p><code>http://example.org/</code></p>
+
+    <p><code>https://a.org/some/path/</code></p>
+
+    <p><code>ws://sockets.somewhere.org/</code></p>
+
+    <p><code>wss://ws.example.com/stuff/</code></p>
+   </td>
+   <td>
+    <p><code>ftp://ftp.example.org/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>ftps://ftp.example.org/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>file:///a/</code><br>
+     (unmatched scheme)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>*://*.mozilla.org/*</code></p>
+
+    <p>Match all HTTP, HTTPS and WebSocket URLs that are hosted at "mozilla.org" or one of its subdomains.</p>
+   </td>
+   <td>
+    <p><code>http://mozilla.org/</code></p>
+
+    <p><code>https://mozilla.org/</code></p>
+
+    <p><code>http://a.mozilla.org/</code></p>
+
+    <p><code>http://a.b.mozilla.org/</code></p>
+
+    <p><code>https://b.mozilla.org/path/</code></p>
+
+    <p><code>ws://ws.mozilla.org/</code></p>
+
+    <p><code>wss://secure.mozilla.org/something</code></p>
+   </td>
+   <td>
+    <p><code>ftp://mozilla.org/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>http://mozilla.com/</code><br>
+     (unmatched host)</p>
+
+    <p><code>http://firefox.org/</code><br>
+     (unmatched host)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>*://mozilla.org/</code></p>
+
+    <p>Match all HTTP, HTTPS and WebSocket URLs that are hosted at exactly "mozilla.org/".</p>
+   </td>
+   <td>
+    <p><code>http://mozilla.org/</code></p>
+
+    <p><code>https://mozilla.org/</code></p>
+
+    <p><code>ws://mozilla.org/</code></p>
+
+    <p><code>wss://mozilla.org/</code></p>
+   </td>
+   <td>
+    <p><code>ftp://mozilla.org/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>http://a.mozilla.org/</code><br>
+     (unmatched host)</p>
+
+    <p><code>http://mozilla.org/a</code><br>
+     (unmatched path)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>ftp://mozilla.org/</code></p>
+
+    <p>Match only "ftp://mozilla.org/".</p>
+   </td>
+   <td><code>ftp://mozilla.org</code></td>
+   <td>
+    <p><code>http://mozilla.org/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>ftp://sub.mozilla.org/</code><br>
+     (unmatched host)</p>
+
+    <p><code>ftp://mozilla.org/path</code><br>
+     (unmatched path)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>https://*/path</code></p>
+
+    <p>Match HTTPS URLs on any host, whose path is "path".</p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/path</code></p>
+
+    <p><code>https://a.mozilla.org/path</code></p>
+
+    <p><code>https://something.com/path</code></p>
+   </td>
+   <td>
+    <p><code>http://mozilla.org/path</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>https://mozilla.org/path/</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/a</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/path?foo=1</code><br>
+     (unmatched path due to URL query string)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>https://*/path/</code></p>
+
+    <p>Match HTTPS URLs on any host, whose path is "path/" and which has no URL query string.</p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/path/</code></p>
+
+    <p><code>https://a.mozilla.org/path/</code></p>
+
+    <p><code>https://something.com/path</code>/</p>
+   </td>
+   <td>
+    <p><code>http://mozilla.org/path/</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>https://mozilla.org/path</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/a</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/path/</code><code>?foo=1</code><br>
+     (unmatched path due to URL query string)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>https://mozilla.org/*</code></p>
+
+    <p>Match HTTPS URLs only at "mozilla.org", with any URL path and URL query string.</p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/</code></p>
+
+    <p><code>https://mozilla.org/path</code></p>
+
+    <p><code>https://mozilla.org/another</code></p>
+
+    <p><code>https://mozilla.org/path/to/doc</code></p>
+
+    <p><code>https://mozilla.org/path/to/doc?foo=1</code></p>
+   </td>
+   <td>
+    <p><code>http://mozilla.org/path</code><br>
+     (unmatched scheme)</p>
+
+    <p><code>https://mozilla.com/path</code><br>
+     (unmatched host)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>https://mozilla.org/a/b/c/</code></p>
+
+    <p>Match only this URL, or this URL with any URL fragment.</p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/a/b/c/</code></p>
+
+    <p><code>https://mozilla.org/a/b/c/#section1</code></p>
+   </td>
+   <td>Anything else.</td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>https://mozilla.org/*/b/*/</code></p>
+
+    <p>Match HTTPS URLs hosted on "mozilla.org", whose path contains a component "b" somewhere in the middle. Will match URLs with query strings, if the string ends in a <code>/</code>.</p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/a/b/c/</code></p>
+
+    <p><code>https://mozilla.org/d/b/f/</code></p>
+
+    <p><code>https://mozilla.org/a/b/c/d/</code></p>
+
+    <p><code>https://mozilla.org/a/b/c/d/#section1</code></p>
+
+    <p><code>https://mozilla.org/a/b/c/d/?foo=/</code></p>
+
+    <p><code>https://mozilla.org/a?foo=21314&amp;bar=/b/&amp;extra=c/</code></p>
+   </td>
+   <td>
+    <p><code>https://mozilla.org/b/*/</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/a/b/</code><br>
+     (unmatched path)</p>
+
+    <p><code>https://mozilla.org/a/b/c/d/?foo=bar</code><br>
+     (unmatched path due to URL query string)</p>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><code>file:///blah/*</code></p>
+
+    <p>Match any FILE URL whose path begins with "blah".</p>
+   </td>
+   <td>
+    <p><code>file:///blah/</code></p>
+
+    <p><code>file:///blah/bleh</code></p>
+   </td>
+   <td><code>file:///bleh/</code><br>
+    (unmatched path)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Invalid_match_patterns">Invalid match patterns</h3>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Invalid pattern</th>
+   <th scope="col">Reason</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>resource://path/</code></td>
+   <td>Unsupported scheme.</td>
+  </tr>
+  <tr>
+   <td><code>https://mozilla.org</code></td>
+   <td>No path.</td>
+  </tr>
+  <tr>
+   <td><code>https://mozilla.*.org/</code></td>
+   <td>"*" in host must be at the start.</td>
+  </tr>
+  <tr>
+   <td><code>https://*zilla.org/</code></td>
+   <td>"*" in host must be the only character or be followed by ".".</td>
+  </tr>
+  <tr>
+   <td><code>http*://mozilla.org/</code></td>
+   <td>"*" in scheme must be the only character.</td>
+  </tr>
+  <tr>
+   <td><code>https://mozilla.org:80/</code></td>
+   <td>Host must not include a port number.</td>
+  </tr>
+  <tr>
+   <td><code>*://*</code></td>
+   <td>Empty path: this should be "<code>*://*/*</code>".</td>
+  </tr>
+  <tr>
+   <td><code>file://*</code></td>
+   <td>Empty path: this should be "<code>file:///*</code>".</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<h3 id="scheme_2">scheme</h3>
+
+
+
+<p>{{Compat("webextensions.match_patterns.scheme",10)}}</p>
diff --git a/files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html
new file mode 100644
index 0000000000..85498e8b30
--- /dev/null
+++ b/files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html
@@ -0,0 +1,24 @@
+---
+title: Was sind WebExtensions?
+slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+tags:
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
+---
+<div>{{AddonSidebar}}</div>
+
+<p>WebExtensions erweitern und modifizieren die Funktionen eines Web-Browsers. Sie werden unter Verwendung von Standard-Webtechnologien - JavaScript, HTML und CSS - sowie zusätzlichen speziell dafür vorgesehenen JavaScript APIs erstellt. Unter anderem können mit so einer Erweiterung neue Funktionen zum Browser hinzufügt, das Erscheinungsbild oder der Inhalt bestimmter Webseiten verändert werden.</p>
+
+<p>Erweiterungen für Firefox werden mit Hilfe von WebExtensions APIs erstellt, einem Cross-Browser-System zum Entwickeln von Browsererweiterungen. Zum größten Teil ist die API kompatibel mit der <a class="external external-icon" href="https://developer.chrome.com/extensions">extension API</a> für Google Chrome und Opera. Erweiterungen, die für diese Browser erstellt wurden, laufen in den meisten Fällen mit <a href="/de/docs/Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension">wenigen Änderungen</a> in Firefox oder Microsoft Edge. Die API ist ebenfalls vollständig mit <a href="/de/Firefox/Multiprocess_Firefox">Multiprozess-Firefox</a> kompatibel.</p>
+
+<p>Vor WebExtensions gab es drei unterschiedliche Möglichkeiten, Erweiterungen für Firefox zu erstellen: <a href="/de/Add-ons/überliegende_Erweiterungen">XUL/XPCOM overlays</a>, <a href="/de/Add-ons/Bootstrapped_extensions">bootstrapped extensions</a> und das <a href="/de/Add-ons/SDK">Add-on SDK</a>. Seit Ende November 2017 sind WebExtensions APIs die einzige Möglichkeit, Firefox-Erweiterungen zu entwickeln, die vorherigen Systeme gelten als veraltet.</p>
+
+<p>Wir sind stets bemüht, die API ständig zu erweitern, um den Anforderungen der Add-on-Entwickler gerecht zu werden. Sollten Sie Anregungen dazu haben, würden wir uns über Ihre Mitteilung auf der englischsprachigen <a class="external external-icon" href="https://mail.mozilla.org/listinfo/dev-addons">Mailingliste für Add-on-Entwickler</a> oder auf <a href="irc://irc.mozilla.org/webextensions">#webextensions</a> im <a class="external external-icon" href="https://wiki.mozilla.org/IRC">IRC</a> freuen.</p>
+
+<h2 id="Nächste_Schritte">Nächste Schritte?</h2>
+
+<ul>
+ <li><a href="/de/Add-ons/WebExtensions/Examples">WebExtensions Beispiele</a>.</li>
+ <li><a href="/de/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">Aufbau einer WebExtension</a>.</li>
+ <li><a href="/de/Add-ons/WebExtensions/Your_first_WebExtension">Schritt-für-Schritt Entwicklung einer einfachen WebExtension</a>.</li>
+</ul>
diff --git a/files/de/mozilla/add-ons/überliegende_erweiterungen/index.html b/files/de/mozilla/add-ons/überliegende_erweiterungen/index.html
new file mode 100644
index 0000000000..0214de4021
--- /dev/null
+++ b/files/de/mozilla/add-ons/überliegende_erweiterungen/index.html
@@ -0,0 +1,54 @@
+---
+title: Legacy-Erweiterungen
+slug: Mozilla/Add-ons/überliegende_Erweiterungen
+tags:
+  - Add-ons
+  - Erweiterungen
+translation_of: Archive/Add-ons/Overlay_Extensions
+---
+<p>Diese Seite enthält Links zu der Dokumentation für die approach für Entwickeln von Erweiterungen für Gecko-basierte Applikationen welche benutzen:</p>
+
+<ul>
+ <li>XUL Überliegungen um das Interface zu spezialisieren</li>
+ <li>APIs, welche auf privilegiertem Code, solchem wie <a href="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> und <a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript modules</a>,verfügbar sind, um mit der Applikation und dem Inhalt zu interagieren.</li>
+</ul>
+
+<p>Priorität zu Firefox 4, und der Gecko-2- Engine welche es ermöglicht, dies war die einzige Möglichkeit Erweiterungen zu entwickeln. Diese Methode wurde sehr übertroffen von <a href="/en-US/docs/Extensions/Bootstrapped_extensions">Neustartlosen Erweiterungen</a>, und der <a href="/en-US/Add-ons/SDK">Add-on SDK</a>, welche an ihrer Spitze gebaut ist. Die privilegierten JavaScript APIs, welche hier beschrieben wurden, können in diesen neueren Typen von Add-ons immer noch benutzt werden.</p>
+
+<h2 id="XUL-Schule">XUL-Schule</h2>
+
+<p><a href="/en-US/Add-ons/Overlay_Extensions/XUL_School">XUL-Schule</a> ist ein verständliches Addonentwicklungstutorial, fokussierend auf die Entwicklung  von Firefoxerweiterungen, aber ist meistens übertragbar auf andere Gecko-basierte Applikationen.</p>
+
+<h2 id="Mehr_Ressourcen">Mehr Ressourcen</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/Mozilla/Add-ons/Setting_up_extension_development_environment">Setting up your environment</a></dt>
+ <dd>Setting up the application for extension development.</dd>
+ <dt><a href="/en-US/docs/XUL">XUL</a></dt>
+ <dd>Tutorials and reference for the user interface language used by XUL extensions.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Code_snippets">Code snippets</a></dt>
+ <dd>Sample code for many of the things you'll want to do.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Installing_extensions">Installing extensions</a></dt>
+ <dd>How to install an extension by copying the extension files into the application's install directory.</dd>
+ <dt><a href="/en-US/Add-ons/Overlay_extensions/Firefox_addons_developer_guide">Firefox add-ons developer guide</a></dt>
+ <dd>A guide to developing overlay extensions.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript code modules</a></dt>
+ <dd>JavaScript modules available to extension developers.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Inline_Options">Extension preferences</a></dt>
+ <dd>How to specify the preferences for your extension that will appear in the Add-ons Manager.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Extension_Packaging">Extension packaging</a></dt>
+ <dd>How extensions are packaged and installed.</dd>
+ <dt><a href="/en-US/Mozilla/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System">Binary Firefox extensions</a></dt>
+ <dd>Creating binary extensions for Firefox.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>