---
title: Deine erste Erweiterung
slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
tags:
  - Anleitung
  - Erweiterung
  - Weberweiterung
translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
original_slug: Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung
---
<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>