1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
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>
|
