mozilla

Versionen vergleichen

Eine erste Erweiterung erstellen

Versionsänderungen

Version 118234:

Version 118234 von TByte am

Version 118235:

Version 118235 von TByte am

Titel:
Eine erste Erweiterung erstellen
Eine erste Erweiterung erstellen
Adressname:
Eine_erste_Erweiterung_erstellen
Eine_erste_Erweiterung_erstellen
Inhalt:

Version 118234
Version 118235
nn21    </p>
22    <p style="margin-left: 40px;">
23      <span style="color: rgb(255, 255, 255);"><span style="backg
 >round-color: rgb(0, 0, 255);">content<br></span></span>
24    </p>
25    <p style="margin-left: 40px;">
26      <span style="color: rgb(255, 255, 255);"><span style="backg
 >round-color: rgb(0, 0, 255);">overlay.xul</span></span>
nn69      <li>
70        <p>
71          <code>&nbsp;&nbsp;&nbsp; &lt;em:version&gt;1.0&lt;/em:v
 >ersion&gt;</code> Die Version unseres Add-Ons
72        </p>
73      </li>
74      <li>
75        <p>
76          <code>&nbsp;&nbsp;&nbsp; &lt;em:type&gt;2&lt;/em:type&g
 >t;</code> Der Typ unserer Dateien. 2 steht für Erweiterung, ander
 >e wären z.B. Themes oder Plugins.
77        </p>
78      </li>
79      <li>
80        <p>
81          <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;em
 >:minVersion&gt;1.5&lt;/em:minVersion&gt;<br>
82          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;em:maxVe
 >rsion&gt;3.5.*&lt;/em:maxVersion&gt;</code> Hiermit sagen wir Fir
 >efox, ab welcher Firefox Version unser Add-On unterstüzt wird und
 > bis zu welcher Version.
83        </p>
84      </li>
85      <li>
86        <p>
87          <code>&nbsp;&nbsp;&nbsp; &lt;em:name&gt;Hallo Welt Add-
 >On&lt;/em:name&gt;</code> Der Name unseres Add-Ons
88        </p>
89      </li>
90      <li>
91        <p>
92          <code>&nbsp;&nbsp;&nbsp; &lt;em:description&gt;Eine ein
 >fache Erweiterung&lt;/em:description&gt;</code> Die Beschreibung 
 >zu unserem Add-On
93        </p>
94      </li>
95      <li>
96        <p>
97          <code>&nbsp;&nbsp;&nbsp; &lt;em:creator&gt;TByte&lt;/em
 >:creator&gt;</code> Der Urheber des Add-Ons
98        </p>
99      </li>
100      <li>
101        <p>
102          <code>&nbsp;&nbsp;&nbsp; &lt;em:homepageURL&gt;<a class
 >=" external" href="http://meineseite.de" rel="freelink">http://me
 >ineseite.de</a>&lt;/em:homepageURL&gt;</code> Und die Homepage zu
 > diesem&nbsp;Add-On
103        </p>
104      </li>
tt106    <h3>
107      Chrome
108    </h3>
109    <p>
110      Firefox stellt seine gesammte Oberfläche durch XUL dar. XUL
 > ist ein mächtiger XML Dialekt. Jedes Tag stellt hier ein Steuere
 >lement dar. Der Pfad von&nbsp;Chrome-Dateien sieht etwas anders:
111    </p>
112    <p>
113      <a class=" external" href="chrome://namensraum/typ/dateinam
 >e.xul" rel="freelink">chrome://namensraum/typ/dateiname.xul</a>
114    </p>
115    <p>
116      Wenn wir z.B. die XUL-Datei des Browsers nehmen:
117    </p>
118    <p>
119      <a class=" external" href="chrome://browser/content/browser
 >.xul" rel="freelink">chrome://browser/content/browser.xul</a>
120    </p>
121    <p>
122      Dies wird deutlicher wenn wir uns unser eigenes Add-On vorn
 >ehmen. Doch zunächst soll genügen, dass wenn man oben genannte Ad
 >resse im&nbsp;Firefox eingibt, man einen Browser-im-Browser bekom
 >mt. Das sieht nicht nur lustig aus, sondern kann sehr nützlich se
 >in, wenn man den DOM Inspector installiert hat. Mehr dazu später.
 > Öffnen wir erst einmal chrome.manifest:
123    </p>
124    <p>
125      <code>content&nbsp;&nbsp;&nbsp;&nbsp; helwor &nbsp;&nbsp; c
 >hrome/content/<br>
126      overlay <a class=" external" href="chrome://browser/content
 >/browser.xul" rel="freelink">chrome://browser/content/browser.xul
 ></a> <a class=" external" href="chrome://helwor/content/overlay.x
 >ul" rel="freelink">chrome://helwor/content/overlay.xul</a></code>
127    </p>
128    <p>
129      helwor stellt in den Namensraum für unser Add-On dar. Die z
 >weite Zeile sagt Firefox, dass er unsere Add-On-Oberfläche (die z
 >ufällig auch in&nbsp;XUL geschrieben ist) mit der von dem Browser
 > "verschmelzen" soll. Das heißt, dass somit unser Add-On ein&nbsp
 >;Teil des Browsers geworden ist.
130    </p>
131    <p>
132      Nun müssen wir unsere Oberfläche auch irgendwie machen, dam
 >it Firefox auch etwas zum Verschmelzen hat.
133    </p>
134    <h3>
135      Die Oberfläche
136    </h3>
137    <p>
138      Nun, da alle Kleinigkeiten erledigt sind, können wir uns de
 >m Eigentlichen zuwidmen:
139    </p>
140    <p>
141      <code>&lt;?xml version="1.0"?&gt;<br>
142      &lt;overlay id="helwor" xmlns="<a class=" external" href="h
 >ttp://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" rel
 >="freelink">http://www.mozilla.org/keymaster/gat...re.is.only.xul
 ></a>"&gt;</code>
143    </p>
144    <p>
145      &nbsp;<code>&lt;statusbar id="status-bar"&gt;<br>
146      &nbsp; &lt;statusbarpanel id="mein-panel" label="Hallo Welt
 >"&nbsp; /&gt;<br>
147      &nbsp;&lt;/statusbar&gt;</code>
148    </p>
149    <p>
150      <code>&lt;toolbox id="navigator-toolbox"&gt;<br></code>
151    </p>
152    <p>
153      <code>&lt;toolbar id="nav-bar"&gt;<br></code>
154    </p>
155    <p>
156      <code>&lt;toolbarbutton id="hallo" image="<a class=" extern
 >al" href="http://www.meineseite.de/bild.jpg" rel="freelink">http:
 >//www.meineseite.de/bild.jpg</a>" onclick="alert('Hallo Welt!');"
 > /&gt;<br></code>
157    </p>
158    <p>
159      <code>&lt;/toolbar&gt;<br></code>
160    </p>
161    <p>
162      <code>&lt;/toolbox&gt;</code>
163    </p>
164    <p>
165      <code>&lt;/overlay&gt;</code>
166    </p>
167    <p>
168      So, jetzt zur Analyse:
169    </p>
170    <p>
171      Das overlay-Tag sagt Firefox, dass jetzt die Verschmelzung 
 >anfängt. Normalerweise wird jeder Code, den man verschmelzt, dire
 >kt unten an den bestehenden Code angefügt. Bei uns jedoch nicht. 
 >Nehmen wir uns erst einmal die Statusbar vor. Jedes Statusbarpane
 >l und innerhalb einer Statusbar. Doch wie kommt unser neuer Panel
 > in eine schon bestehende Statusbar (nämlich die unten bei Firefo
 >x)? Hätten wir id="status-bar" ausgelassen, hätten wir eine neue 
 >Statusbar direkt über der schon bestehenden. Die ID "status-bar" 
 >wurde nicht willkürlich gewählt. Wenn wir <a class=" external" hr
 >ef="chrome://browser/content/browser.xul" rel="freelink">chrome:/
 >/browser/content/browser.xul</a> aufrufen, den DOM Inspector öffn
 >en und die Statusbar durch Klick auswählen zeigt uns der DOM Insp
 >ector die ID "status-bar". Wir haben also so eine echte Verschmel
 >zung vorgenommen, indem wir eine schon vorhandene Statusbar rekon
 >struiert haben und in dieser ein neues Element eingefügt haben. D
 >as Gleich haben wir mit der Toolbox gemacht, nur dass hier mehr v
 >erschachtelt wurde. onclick ist ein Javascript ereignis. ACHTUNG:
 > Das onclick Attribut ist <u>nicht</u> notwendig. Es soll einfach
 > nur für JavaScript-Könner sein und zeigen, dass JS genau wie mit
 > HTML funktioniert.
172    </p>
173    <p>
174      Eine gute XUL Referent findet sich auf der englischsprachig
 >en DevMo Homepage.
175    </p>
176    <h3>
177      Testen der Erweiterung
178    </h3>
179    <p>
180      Nun wollen wir unser Add-On testen. Dazu lokalisieren wir u
 >nseren Profile Ordner, standardgemäß in %APPDATA%, bzw. C:\Users\
 >TByte\AppData\Roaming. Der volle Pfad lautet: C:\Users\Alireza\Ap
 >pData\Roaming\Mozilla\Firefox\Profiles\&lt;Profil&gt;\extensions
181    </p>
182    <p>
183      Hier erstellen wir nun erst einmal eine neue Textdatei. Der
 > Name ist <u>vorerst</u> egal. Speichert die Datei und öffnet sie
 >. Hier kommt nun der Pfad zu unserem Add-On rein. Z.B. C:\unserad
 >don\chrome\content...
184    </p>
185    <p>
186      Also speichern wir in der Datei C:\unseraddon\. NICHT&nbsp;
 >DEN&nbsp;SCHLUSSSTRICH&nbsp;VERGESSEN!
187    </p>
188    <p>
189      Jetzt zum Dateinamen: Der sollte wie unsere Add-On-ID laute
 >n, als <a class=" link-mailto" href="mailto:hallo@we.lt" rel="fre
 >elink">hallo@we.lt</a>. Bitte nicht vergessen .txt wegzumachen. N
 >ach einem Neustart des Firefox sollte es funktionieren, bzw. auch
 > nicht (falls Fehler da sind).
190    </p>
191    <h3>
192      Verpacken und Bereitstellen
193    </h3>
194    <p>
195      Jetzt, wo alles läuft, wollen wir unser Add-On auch anderen
 > Bereitstellen. Jetzt packen wir alle Dateien und Ordner unserer 
 >Erweiterung in eine ZIP-Datei. Also den Ordner chrome und die Dat
 >eien chrome.manifest und install.rdf. Bitte nicht den ganzen Ordn
 >er (unseraddon) in die ZIP Datei tun. Nachdem alles gezippt ist (
 >mit z.B. 7zip, WinZip, oder meinem favorit AlZip), bennen wir die
 > erweiterung von .zip um in .xpi.
196    </p>
197    <p>
198      Diese XPI Datei stellt nun unser fertiges Add-On dar!
199    </p>

Zurück zur Versionsgeschichte