mozilla

Version 111747 von Erweiterung erstellen

  • Adressname der Version: Erweiterung_erstellen
  • Titel der Version: Erweiterung erstellen
  • ID der Version: 111747
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar translation: first part; 652 words added, 680 words removed
Schlagwörter: 

Inhalt der Version

Schnellstart

Sie können die Add-on-Fabrik aus der Add-on Entwicklerecke verwenden, um eine einfache Erweiterung als Grundlage für Ihre Arbeit zu erhalten. 

Eine ähnliche Hello World Erweiterung können Sie auch in einem weiteren Tutorial der MozillaZine Knowledge Base(engl.) erstellen.

Einführung

Dieses Tutorial führt Sie durch die erforderlichen Schritte, um eine sehr einfache Erweiterung zu erstellen:
Es wird der Statuszeile des Firefox ein Panel mit dem Text "Hallo, Welt!" hinzugefügt.

Hinweis: Dieses Tutorial behandelt die Erstellung von Erweiterungen für Firefox 1.5 und später.  Weitere Tutorials existieren, falls Sie eine Erweiterung für eine frühere Version erstellen möchten.

Ein Tutorial zur Erstellung einer Erweiterung für Thunderbird findet sich unter "Eine Erweiterung für Thunderbird erstellen".

Eine Entwicklungsumgebung einrichten

Erweiterungen werden in ZIP Dateien mit der Endung ".xpi" (“zippy” ausgesprochen) oder in Bundles verpackt und ausgeliefert.

Ein Beispiel zum Aufbau einer typischen XPI Datein:

exampleExt.xpi:
              /install.rdf                   
              /components/*  
              /components/cmdline.js                   
              /defaults/
              /defaults/preferences/*.js     
              /plugins/*                        
              /chrome.manifest                
              /chrome/icons/default/*       
              /chrome/
              /chrome/content/

Wir werden eine ähnliche Verzeichnisstruktur in diesem Tutorial verwenden. Fangen wir also damit an, einen Ordner für unsere Erweiterung zu erstellen. Das kann überall auf der Festplatte geschehen (z.B. C:\erweiterungen\meine_erweiterung\ oder ~/erweiterungen/meine_erweiterung/). In Ihrem neuem Erweiterungsordner erstellen Sie einen neuen Ordner, welcher "chrome" genannt wird und innerhalb dieses Verzeichnisses wiederum erstellen Sie einen Ordner der "content" genannt wird.

Im Wurzelverzeichnis Ihres Erweiterungsverzeichnis erstellen Sie zwei leere Textdateien, genannt chrome.manifest und install.rdf.
Im chrome/content Verzeichnis erstellen Sie eine neue Textdatei, die Sie sample.xul nennen.

Sie sollten nun diese Verzeichnisstruktur erstellt haben:

<Erweiterungspfad>\
          install.rdf
          chrome.manifest
          chrome\
             content\
                sample.xul

Bitte lesen Sie die zusätzlichen Informationen zum Einrichten einer Entwicklungsumgebung für Erweiterungen.

{{ gecko_minversion_note("1.9.2", "Ab Gecko 1.9.2 (Firefox 3.6) können Sie auch einfach ein Icon, welches icon.png heißt, in Wurzelverzeichnis des Add-ons packen. Dies erlaubt Ihnen die Anzeige Ihres Add-on Icons sogar wenn das Add-on deaktiviert ist oder wenn im Manifest kein Eintrag zur iconURL vorhanden ist.") }}

Das Installationsmanifest erstellen

Öffnen Sie die Datei install.rdf, welche Sie am Anfang erstellt haben und schreiben Sie folgendes hinein:

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
    <em:id>sample@example.net</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type>
   
    <!-- Angaben zu unterstützten Anwendungsversionen --> 
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>3.6.*</em:maxVersion>
      </Description>
    </em:targetApplication>
   
    <!-- Sichtbare Daten -->
    <em:name>sample</em:name>
    <em:description>A test extension</em:description>
    <em:creator>Your Name Here</em:creator>
    <em:homepageURL>http://www.example.com/</em:homepageURL>
  </Description>      
</RDF>
  • <em:id>sample@example.net</em:id> - die ID der Erweiterung. Dies ist der Wert im Format einer E-Mail-Adresse, mit dem die Erweiterung identifiziert wird. Machen Sie diese einzigartig. Sie können auch eine GUID verwenden (Wenn die Erweiterung installiert ist, befindet sich in dem extension-Ordner in Ihrem Profilordner ein Ordner mit dem Namen der ID. In ihm befinden sich die Dateien der Erweiterung).
  • <em:type>2</em:type> - die Zwei zeigt an, dass hier eine Erweiterung beschrieben wird.  Wenn Sie ein Theme installieren würden, wäre dies eine 4 (siehe Installationsmanifest#type für weitere Typen).
  • {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - Anwendungs-ID von Firefox.
  • 1.5 - die exakte Versionsnummer der frühsten Version von Firefox mit der diese Erweiterung läuft. Verwenden Sie niemals einen Stern (*) bei minVersion, es wird meist nicht das, was Sie erwarten.
  • 3.6.* - die höchste Version von Firefox von der Sie wissen, dass die Erweiterung damit funktioniert. Legen Sie keine höhere Version ein, als zur Zeit verfügbar ist! In diesem Fall gibt "3.6.*" an, dass die Erweiterung mit Firefox 3.6 und jeden 3.6.x Versionen funktioniert.

(Wenn Sie eine Nachricht erhalten, dass Ihre install.rdf nicht korrekt formatiert ist, kann es hilfreich sein, die Datei über Datei->Öffnen zu öffnen, sodass XML Fehler angezeigt werden. In meinem Fall, hatte ich ein Leerzeichen vor "<?xml"...

Erweiterungen, die mit Firefox 2.0.0.x funktionieren sollen, sollten die maximale Versione auf "2.0.0.*" setzen. Erweiterungen, die mit Firefox 1.5.0.x funktionieren sollten eine maximale Version von "1.5.0.*" festlegen.

Siehe Installationsmanifest für eine komplette Liste von erforderlichen und optionalen Eigenschaften.

Speichern Sie die Datei ab.

Den Browser durch XUL erweitern

Die Benutzeroberfläche von Firefox ist in XUL und JavaScript geschrieben. XUL ist XML, welches Benutzeroberflächen-Widgets wie Schaltflächen, Menüs, Toolbars, etc. bereitstellt. Benutzeraktionen werden über JavaScript gesteuert.

Um den Browser zu erweitern, werden wir Teile der Benutzeroberfläche des Browser ändern und Teile hinzufügen. Wir fügen Widgets hinzu, indem wir neue XUL DOM Elemente in das Browserfenster einbauen und diese verändern, indem Skripte die neuen Abläufe steuern.

Der Browser wurde in einer XUL Datei namens browser.xul implementiert. ($FIREFOX_INSTALLATIONSVERZEICHNIS/chrome/browser.jar enthält content/browser/browser.xul).  In browser.xul können wir die Statusleiste finden, welche ungefähr so aussieht.:

<statusbar id="status-bar">
 ... <statusbarpanel>s ...
</statusbar>

<statusbar id="status-bar"> ist ein "merge point" für ein XUL Overlay.

XUL Overlays

XUL Overlays bieten eine Möglichkeit an, weitere UI Widgets an einem XUL Dokument anzuhängen, während das Programm läuft. Ein XUL Overlay ist eine .xul Datei, welche XUL Fragmente festlegt, um bestimmte "merge points" in einem "master" Dokument einzufügen. Diese Fragmente können Widgets festlegen, die eingefügt, entfernt oder verändert werden sollen.

Beispiel XUL Overlay Dokument

<?xml version="1.0"?>
<overlay id="sample" 
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <statusbar id="status-bar">
  <statusbarpanel id="my-panel" label="Hello, World"  />
 </statusbar>
</overlay>

Die <statusbar> genannt status-bar legt den "merge point" im Browserfenster fest, die wir anhängen wollen.

Das <statusbarpanel> Kindelement ist ein neues Widget, welches wir in den "merge point" einfügen wollen.

Nehmen Sie diesen Beispielcode und speichern Sie ihn in eine Datei sample.xul in dem Verzeichnis chrome/content, welches Sie erstellt haben.

Für weitere Informationen über das zusammenfügen von Widgets und der Veränderung an der Benutzeroberfläche mit Overlays, siehe weiter unten.

Chrome URIs

XUL-Dateien sind Teil von „Chrome-Paketen“, Bündeln von Komponenten der Benutzeroberfläche, die über chrome:// URIs geladen werden. Diese URIs zu XUL-Inhalten wurden von den Mozilla-Entwicklern entworfen, um dem Problem zu entgehen, dass file:// URIs von Plattform zu Plattform und von System zu System variieren. Die installierte Anwendung weiß auf diese Weise stets, wo sich mit chrome:// angesprochene Dateien relativ zum Installationspfad befinden.

Das Browser-Fenster ist: chrome://browser/content/browser.xul Versuchen Sie, diese URL in die Adressleiste von Firefox zu tippen! oder: chrome://predatorIndex/$34#2/browser.xvp

Chrome URIs bestehen aus verschiedenen Komponenten:

  • Zuerst dem URI Schema (chrome), das der Netzwerk-Bibliothek von Firefox sagt, dass dies eine Chrome URI ist, und dass deren Inhalt besonders behandelt werden muss.
  • Zweitens einem Paketnamen (im oberen Beispiel browser), der das Bündel der Komponenten der Benutzeroberfläche identifiziert. Dieser Paketname sollte so einzigartig wie möglich sein, um Konflikte zwischen verschiedenen Erweiterungen zu vermeiden.
  • Drittens dem Datentyp, der angefordert wird. Es gibt drei Typen: content (XUL, JavaScript, XBL bindings, etc., die Struktur und Verhalten der Anwendungsoberfläche bestimmen), locale (DTD, .properties-Dateien etc., die Zeichenketten für die Lokalisierung der Benutzeroberfläche enthalten), und skin (CSS und Bilder, die das Thema der Oberfläche bilden)
  • und zum Schluss dem Pfad der Datei, um sie zu laden.

Somit lädt chrome://foo/skin/bar.png die Datei bar.png aus  dem "foo" Theme-Abschnitt skin.

Wenn Sie Inhalt über eine Chrome URI laden, benutzt Firefox die Chrome Registry, um diese URIs in die tatsächlichen Quelldateien (oder in .jar-Pakete) zu übertragen.

Ein Chrome-Manifest erstellen

For more information on Chrome Manifests and the properties they support, see the Chrome Manifest Reference.

Open the file called chrome.manifest that you created alongside the chrome directory at the root of your extension's source folder hierarchy.

Add in this code:

content     sample    chrome/content/

(Don't forget the trailing slash, "/"! Without it, the package won't be registered.)

This specifies the:

  1. type of material within a chrome package
  2. name of the chrome package (make sure you use all lowercase characters for the package name ("sample") as Firefox/Thunderbird doesn't support mixed/camel case in version 2 and earlier - {{ Bug("132183") }})
  3. location of the chrome packages' files

So, this line says that for a chrome package sample, we can find its content files at the location chrome/content which is a path relative to the location of chrome.manifest.

Note that content, locale and skin files must be kept inside folders called content, locale and skin within your chrome subdirectory.

Save the file. When you launch Firefox with your extension, (later in this tutorial), this will register the chrome package.

Einen Overlay registrieren

You need Firefox to merge your overlay with the browser window whenever it displays one. So add this line to your chrome.manifest file:

overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

This tells Firefox to merge sample.xul into browser.xul when browser.xul loads.

Testen

First, we need to tell Firefox about your extension. During the development phase for Firefox versions 2.0 and higher, you can point Firefox to the folder where you are developing the extension, and it'll load it up every time you restart Firefox.

  1. Locate your profile folder and beneath it the profile you want to work with (e.g. Firefox/Profiles/<profile_id>.default/).
  2. Open the extensions/ folder, creating it if need be.
  3. Create a new text file and put the full path to your development folder inside (e.g. C:\extensions\my_extension\ or ~/extensions/my_extension/). Windows users should retain the OS' slash direction, and everyone should remember to include a closing slash and remove any trailing spaces.
  4. Save the file with the id of your extension as its name (e.g. sample@example.net). No file extension.

Now you should be ready to test your extension!

Start Firefox. Firefox will detect the text link to your extension directory and install the Extension. When the browser window appears you should see the text "Hello, World!" on the right side of the status bar panel.

You can now go back and make changes to the .xul file, close and restart Firefox and they should appear.

Packen

Now that your extension works, you can packen it for deployment and installation.

Zip up the contents of your extension's folder (not the extension folder itself), and rename the zip file to have a .xpi extension. In Windows XP, you can do this easily by selecting all the files and subfolders in your extension folder, right click and choose "Send To -> Compressed (Zipped) Folder". A .zip file will be created for you. Just rename it and you're done!

On Mac OS X, you can right-click on the contents of the extension's folder and choose "Create Archive of..." to make the zip file. However, since Mac OS X adds hidden files to folders in order to track file metadata, you should instead use the Terminal, delete the hidden files (whose names begin with a period), and then use the zip command on the command line to create the zip file.

On Linux, you would likewise use the command-line zip tool.

If you have the 'Extension Builder' extension installed it can compile the .xpi file for you (Tools -> Extension Developer -> Extension Builder). Merely navigate to the directory where your extension is (install.rdf etc.), and hit the Build Extension button. This extension has a slew of tools to make development easier.

Now upload the .xpi file to your server, making sure it's served as application/x-xpinstall. You can link to it and allow people to download and install it. For the purposes of just testing our .xpi file we can just drag it into the extensions window via Tools -> Extensions in Firefox 1.5.0.x, or Tools -> Add-ons in later versions.

Installation von einer Webseite

There are a variety of ways you can install extensions from web pages, including direct linking to the XPI files and using the InstallTrigger object. Extension and web authors are encouraged to use the InstallTrigger Methode to install XPIs, as it provides the best experience to users.

Verwendung von addons.mozilla.org

Mozilla Add-ons is a distribution site where you can host your extension for free. Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. Mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. In addition Mozilla Add-ons allows users to comment and provide feedback on your extension. It is highly recommended that you use Mozilla Add-ons to distribute your extensions!

Visit http://addons.mozilla.org/de/developers/ to create an account and begin distributing your extensions!

Note: Your Extension will be passed faster and downloaded more if you have a good description and some screenshots of the extension in action.

Erweiterungen über einen separaten Installer installieren

It's possible to install an extension in a special directory and it will be installed the next time the application starts. The extension will be available to any profile. See Erweiterungen installieren for more information.

On Windows, information about extensions can be added to the registry, and the extensions will automatically be picked up the next time the applications starts. This allows application installers to easily add integration hooks as extensions. See Erweiterungen über die Windows Registrierung hinzufügen for more information.

Weiteres zu XUL Overlays

In addition to appending UI widgets to the merge point, you can use XUL fragments within Overlays to:

  • Modify attributes on the merge point, e.g. <statusbar id="status-bar" hidden="true" /> (hides the status bar)
  • Remove the merge point from the master document, e.g. <statusbar id="status-bar" removeelement="true" />
  • Control the position of the inserted widgets:
<statusbarpanel position="1" ...  />

<statusbarpanel insertbefore="other-id" ...  />

<statusbarpanel insertafter="other-id" ...  />

Neue Elemente zur Benutzeroberfläche hinzufügen

You can create your own windows and dialog boxes as separate .xul files, provide functionality by implementing user actions in .js files, using DOM methods to manipulate UI widgets. You can use style rules in .css files to attach images, set colors etc.

View the XUL documentation for more resources for XUL developers.

Default-Dateien

Defaults files that you use to seed a user's profile with should be placed in defaults/ under the root of your extension's folder hierarchy. Default preferences .js files should be stored in defaults/preferences/ - when you place them here they will be automatically loaded by Firefox's preferences system when it starts so that you can access them using the Preferences API.

An example default preference file:

pref("extensions.sample.username", "Joe"); //a string pref
pref("extensions.sample.sort", 2); //an int pref
pref("extensions.sample.showAdvanced", true); //a boolean pref

XPCOM Komponenten

Firefox supports XPCOM components in extensions. You can create your own components easily in JavaScript or in C++ (using the Gecko SDK).

Place all of your .js or .dll files in the components/ directory - they are automatically registered the first time Firefox runs after your extension is installed.

For more information see XPCOM Komponenten in JavaScript, Eine binäre XPCOM Komponente über Visual Studio erstellen and the XPCOM Komponenten erstellen book.

Kommandozeile der Anwendung

One of the possible uses of custom XPCOM components is adding a command line handler to Firefox or Thunderbird. You can use this technique to run your extension as an application:

 firefox.exe -myapp

I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag(). See Chrome: Command Line and a forum discussion for details.

Lokalisierung

To support more than one language, you should separate strings from your content using Entities and String Bundles. It is much easier to do this while you are developing your extension, rather than come back and do it later!

Localization information is stored in the locale directory for the extension. For example, to add a locale to our sample extension, create a directory named "locale" in chrome (where the "content" directory is located) and add the following line to the chrome.manifest file:

locale sample en-US chrome/locale/en-US/

To create localizable attribute values in XUL, you put the values in a .dtd file, which should be placed in the locale directory and looks like this:

<!ENTITY  button.label     "Click Me!">
<!ENTITY  button.accesskey "C">

And then include it at the top of your XUL document (but underneath the "<?xml version"1.0"?>") like so:

<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.dtd">

where window is the localName value of the root element of the XUL document, and the value of the SYSTEM property is the chrome URI to the entity file. For our sample extension, the root element is overlay.

To use the entities, modify your XUL to look like this:

<button label="&button.label;" accesskey="&button.accesskey;"  />

The Chrome Registry will make sure the entity file is loaded from the localization bundle corresponding to the selected locale.

For strings that you use in script, create a .properties file, a text file that has a string on each line in this format:

key=value

and then use nsIStringBundleService/nsIStringBundle or the <stringbundle> tag to load the values into script.

Den Browser verstehen

Use the DOM Inspector to inspect the browser window or any other XUL window you want to extend.

Note: DOM Inspector is not part of the Standard Firefox installation. Since Firefox 3 Beta 4, the DOM Inspector has been available from Firefox Add-ons as a standalone extension. For earlier versions, you must reinstall with the Custom install path and choose DOM Inspector (or Developer Tools in Firefox 1.5) if there is not a "DOM Inspector" item in your browser's Tools menu.

Use the point-and-click node finder button at the top left of the DOM Inspector's toolbar to click on a node in the XUL window visually to select it. When you do this the DOM inspector's DOM hierarchy tree view will jump to the node you clicked on.

Use the DOM Inspector's right side panel to discover merge points with ids that you can use to insert your elements from overlays. If you cannot discover an element with an id that you can merge into, you may need to attach a script in your overlay and insert your elements when the load event fires on the master XUL window.

Erweiterungen debuggen

Analytical Tools for Debugging

  • The DOM Inspector - inspect attributes, DOM structure, CSS style rules that are in effect (e.g. find out why your style rules don't seem to be working for an element - an invaluable tool!)
  • Venkman - set breakpoints in JavaScript and inspect call stacks
  • arguments.callee.caller in JavaScript - access a function's call stack

printf debugging

Advanced debugging

Weitere Informationen

{{ languages( { "en": "en/Building_an_Extension", "es": "es/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_extension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/Sviluppare_un\'Estensione", "ru": "ru/\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435_\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f", "zh-cn": "cn/\u6784\u5efa\u4e00\u4e2a\u6269\u5c55", "ko": "ko/Building_an_Extension" } ) }}

Quelltext der Version

<h4>Schnellstart</h4>
<div>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Sie können die <a class="link-https" href="https://addons.mozilla.org/de/developers/tools/builder">Add-on-Fabrik</a> aus der <a class="link-https" href="https://addons.mozilla.org/de/developers">Add-on Entwicklerecke</a> verwenden, um eine einfache Erweiterung als Grundlage für Ihre Arbeit zu erhalten. </p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; ">Eine ähnliche <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World Erweiterung</a> können Sie auch <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">in einem weiteren Tutorial der MozillaZine Knowledge Base</a>(engl.) erstellen.</p>
</div>
<h4>Einführung</h4>
<p>Dieses Tutorial führt Sie durch die erforderlichen Schritte, um eine sehr einfache <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterung</a> zu erstellen: <br>
Es wird der Statuszeile des Firefox ein Panel mit dem Text "Hallo, Welt!" hinzugefügt.</p>
<div class="note">
<p><strong>Hinweis</strong>: Dieses Tutorial behandelt die Erstellung von Erweiterungen für Firefox <strong>1.5</strong> und später.  Weitere Tutorials existieren, falls Sie eine Erweiterung für eine frühere Version erstellen möchten.</p>
<p>Ein Tutorial zur Erstellung einer Erweiterung für Thunderbird findet sich unter "<a href="/en/Erweiterung/Thunderbird/Eine_Erweiterung_für_Thunderbird_erstellen" title="en/Erweiterung/Thunderbird/Eine Erweiterung für Thunderbird erstellen">Eine Erweiterung für Thunderbird erstellen</a>".</p>
</div>
<h4>Eine Entwicklungsumgebung einrichten</h4>
<p>Erweiterungen werden in ZIP Dateien mit der Endung ".xpi" (<em>“zippy” </em><em>ausgesprochen</em>) oder in <a href="/de/Bundles" title="de/Bundles">Bundles</a> verpackt und ausgeliefert.</p>
<p>Ein Beispiel zum Aufbau einer typischen XPI Datein:</p>
<pre class="eval">exampleExt.xpi:
              /<a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a>                   
              <a href="/de/Erweiterung_erstellen#XPCOM_Komponenten" title="de/Erweiterung erstellen#XPCOM Komponenten">/components/*</a>  
              <a href="/de/Erweiterung_erstellen#XPCOM_Komponenten" title="de/Erweiterung erstellen#XPCOM Komponenten">/components/cmdline.js</a>                   
              <a href="/de/Erweiterung_erstellen#Default-Dateien" title="de/Erweiterung erstellen#Default-Dateien">/defaults/</a>
              <a href="/de/Erweiterung_erstellen#Default-Dateien" title="de/Erweiterung erstellen#Default-Dateien">/defaults/preferences/*.js</a>     
              /plugins/*                        
              /<a href="/de/Chrome-Registrierung" title="de/Chrome-Registrierung">chrome.manifest</a>                
              /<a href="/de/Fenster_Icons" title="de/Fenster Icons">chrome/icons/default/*</a>       
              /chrome/
              /chrome/content/
</pre>
<p>Wir werden eine ähnliche Verzeichnisstruktur in diesem Tutorial verwenden. Fangen wir also damit an, einen Ordner für unsere Erweiterung zu erstellen. Das kann überall auf der Festplatte geschehen (z.B. <code>C:\erweiterungen\meine_erweiterung\</code> oder <code>~/erweiterungen/meine_erweiterung/</code>). In Ihrem neuem Erweiterungsordner erstellen Sie einen neuen Ordner, welcher "<code>chrome</code>" <code>genannt wird</code><span style="font-family: monospace;"> und innerhalb dieses Verzeichnisses wiederum erstellen Sie einen Ordner der "<code>content</code>" genannt wird</span>.</p>
<p>Im <strong>Wurzelverzeichnis</strong> Ihres Erweiterungsverzeichnis erstellen Sie zwei leere Textdateien, genannt <code>chrome.manifest<span style="font-family: Verdana,Tahoma,sans-serif;"> und</span></code> <code>install.rdf</code>. <br>
Im <strong>chrome/content</strong> Verzeichnis erstellen Sie eine neue Textdatei, die Sie <code>sample.xul</code> nennen.</p>
<p>Sie sollten nun diese Verzeichnisstruktur erstellt haben:</p>
<pre>&lt;Erweiterungspfad&gt;\
          install.rdf
          chrome.manifest
          chrome\
             content\
                sample.xul
</pre>
<p>Bitte lesen Sie die zusätzlichen Informationen zum <a href="/de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen" title="de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen">Einrichten einer Entwicklungsumgebung für Erweiterungen</a>.</p>
<p>{{ gecko_minversion_note("1.9.2", "Ab Gecko 1.9.2 (Firefox 3.6) können Sie auch einfach ein Icon, welches <code>icon.png</code> heißt, in Wurzelverzeichnis des Add-ons packen. Dies erlaubt Ihnen die Anzeige Ihres Add-on Icons sogar wenn das Add-on deaktiviert ist oder wenn im Manifest kein Eintrag zur <code>iconURL</code> vorhanden ist.") }}</p>
<h4>Das Installationsmanifest erstellen</h4>
<p>Öffnen Sie die Datei <code><a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a></code>, welche Sie am Anfang erstellt haben und schreiben Sie folgendes hinein:</p>
<pre class="eval">&lt;?xml version="1.0"?&gt;

&lt;RDF xmlns="<span class="nowiki"><a class="linkification-ext" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" title="Linkification: http://www.w3.org/1999/02/22-rdf-syntax-ns#">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a></span>"
     xmlns:em="<span class="nowiki"><a class="linkification-ext" href="http://www.mozilla.org/2004/em-rdf#" title="Linkification: http://www.mozilla.org/2004/em-rdf#">http://www.mozilla.org/2004/em-rdf#</a></span>"&gt;

  &lt;Description about="urn:mozilla:install-manifest"&gt;
    &lt;em:id&gt;<strong><a class="linkification-ext link-mailto" href="mailto:sample@example.net" title="Linkification: mailto:sample@example.net">sample@example.net</a></strong>&lt;/em:id&gt;
    &lt;em:version&gt;<strong>1.0</strong>&lt;/em:version&gt;
    &lt;em:type&gt;2&lt;/em:type&gt;
   
    &lt;!-- Angaben zu unterstützten Anwendungsversionen --&gt; 
    &lt;em:targetApplication&gt;
      &lt;Description&gt;
        &lt;em:id&gt;<strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong>&lt;/em:id&gt;
        &lt;em:minVersion&gt;<strong>1.5</strong>&lt;/em:minVersion&gt;
        &lt;em:maxVersion&gt;<strong>3.6.*</strong>&lt;/em:maxVersion&gt;
      &lt;/Description&gt;
    &lt;/em:targetApplication&gt;
   
    &lt;!-- Sichtbare Daten --&gt;
    &lt;em:name&gt;<strong>sample</strong>&lt;/em:name&gt;
    &lt;em:description&gt;<strong>A test extension</strong>&lt;/em:description&gt;
    &lt;em:creator&gt;<strong>Your Name Here</strong>&lt;/em:creator&gt;
    &lt;em:homepageURL&gt;<strong><span class="nowiki"><a class="linkification-ext" href="http://www.example.com/" title="Linkification: http://www.example.com/">http://www.example.com/</a></span></strong>&lt;/em:homepageURL&gt;
  &lt;/Description&gt;      
&lt;/RDF&gt;
</pre>
<ul> <li>&lt;em:id&gt;<a class=" link-mailto" href="mailto:sample@example.net" rel="freelink">sample@example.net</a>&lt;/em:id&gt; - die ID der Erweiterung. Dies ist der Wert im Format einer E-Mail-Adresse, mit dem die Erweiterung identifiziert wird. Machen Sie diese einzigartig. Sie können auch eine GUID verwenden (Wenn die Erweiterung installiert ist, befindet sich in dem extension-Ordner in Ihrem Profilordner ein Ordner mit dem Namen der ID. In ihm befinden sich die Dateien der Erweiterung).</li> <li><code>&lt;em:type&gt;2&lt;/em:type&gt;</code> - die Zwei zeigt an, dass hier eine Erweiterung beschrieben wird.  Wenn Sie ein Theme installieren würden, wäre dies eine 4 (siehe <a href="/de/Installationsmanifest#type" title="de/Installationsmanifest#type">Installationsmanifest#type</a> für weitere Typen).</li> <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Anwendungs-ID von Firefox.</li> <li><strong>1.5</strong> - die exakte Versionsnummer der frühsten Version von Firefox mit der diese Erweiterung läuft. Verwenden Sie niemals einen Stern (*) bei minVersion, es wird meist nicht das, was Sie erwarten.</li> <li><strong>3.6.*</strong> - die höchste Version von Firefox von der Sie wissen, dass die Erweiterung damit funktioniert. Legen Sie keine höhere Version ein, als zur Zeit verfügbar ist! In diesem Fall gibt "3.6.*" an, dass die Erweiterung mit Firefox 3.6 und jeden 3.6.x Versionen funktioniert.</li>
</ul>
<p>(Wenn Sie eine Nachricht erhalten, dass Ihre install.rdf nicht korrekt formatiert ist, kann es hilfreich sein, die Datei über Datei-&gt;Öffnen zu öffnen, sodass XML Fehler angezeigt werden. In meinem Fall, hatte ich ein Leerzeichen vor "<span style="font-family: 'Courier New';">&lt;?xml</span>"...</p>
<p>Erweiterungen, die mit Firefox 2.0.0.x funktionieren sollen, sollten die maximale Versione auf "2.0.0.*" setzen. Erweiterungen, die mit Firefox 1.5.0.x funktionieren sollten eine maximale Version von "1.5.0.*" festlegen.</p>
<p>Siehe <a href="/de/Installationsmanifest" title="de/Installationsmanifest">Installationsmanifest</a> für eine komplette Liste von erforderlichen und optionalen Eigenschaften.</p>
<p>Speichern Sie die Datei ab.</p>
<h4>Den Browser durch XUL erweitern</h4>
<p>Die Benutzeroberfläche von Firefox ist in XUL und JavaScript geschrieben. <a href="/de/XUL" title="de/XUL">XUL</a> ist XML, welches Benutzeroberflächen-Widgets wie Schaltflächen, Menüs, Toolbars, etc. bereitstellt. Benutzeraktionen werden über JavaScript gesteuert.</p>
<p>Um den Browser zu erweitern, werden wir Teile der Benutzeroberfläche des Browser ändern und Teile hinzufügen. Wir fügen Widgets hinzu, indem wir neue XUL DOM Elemente in das Browserfenster einbauen und diese verändern, indem Skripte die neuen Abläufe steuern.</p>
<p>Der Browser wurde in einer XUL Datei namens <code>browser.xul</code> implementiert. (<code>$FIREFOX_INSTALLATIONSVERZEICHNIS/chrome/browser.jar</code> enthält <code>content/browser/browser.xul</code>).  In browser.xul können wir die Statusleiste finden, welche ungefähr so aussieht.:</p>
<pre class="eval">&lt;statusbar id="status-bar"&gt;
 ... &lt;statusbarpanel&gt;s ...
&lt;/statusbar&gt;
</pre>
<p><code>&lt;statusbar id="status-bar"&gt;</code> ist ein "merge point" für ein XUL Overlay.</p>
<h5>XUL Overlays</h5>
<p><a href="/de/XUL_Overlays" title="de/XUL Overlays">XUL Overlays</a> bieten eine Möglichkeit an, weitere UI Widgets an einem XUL Dokument anzuhängen, während das Programm läuft. Ein XUL Overlay ist eine .xul Datei, welche XUL Fragmente festlegt, um bestimmte "merge points" in einem "master" Dokument einzufügen. Diese Fragmente können Widgets festlegen, die eingefügt, entfernt oder verändert werden sollen.</p>
<p><strong>Beispiel XUL Overlay Dokument</strong></p>
<pre class="eval">&lt;?xml version="1.0"?&gt;
&lt;overlay id="sample" 
         xmlns="<span class="nowiki"><a class="linkification-ext" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="Linkification: http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</a></span>"&gt;
 &lt;statusbar id="<strong>status-bar</strong>"&gt;
  &lt;statusbarpanel id="my-panel" label="Hello, World"  /&gt;
 &lt;/statusbar&gt;
&lt;/overlay&gt;
</pre>
<p>Die <code>&lt;statusbar&gt;</code> genannt <code><strong>status-bar</strong></code> legt den "merge point" im Browserfenster fest, die wir anhängen wollen.</p>
<p>Das <code>&lt;statusbarpanel&gt;</code> Kindelement ist ein neues Widget, welches wir in den "merge point" einfügen wollen.</p>
<p>Nehmen Sie diesen Beispielcode und speichern Sie ihn in eine Datei <code><strong>sample.xul</strong></code> in dem Verzeichnis <code>chrome/content</code>, welches Sie erstellt haben.</p>
<p>Für weitere Informationen über das zusammenfügen von Widgets und der Veränderung an der Benutzeroberfläche mit Overlays, siehe weiter unten.</p>
<h4>Chrome URIs</h4>
<p>XUL-Dateien sind Teil von „<a href="/de/Chrome_Registrierung" title="de/Chrome Registrierung">Chrome-Paketen</a>“, Bündeln von Komponenten der Benutzeroberfläche, die über <code>chrome://</code> URIs geladen werden. Diese URIs zu XUL-Inhalten wurden von den Mozilla-Entwicklern entworfen, um dem Problem zu entgehen, dass <code>file://</code> URIs von Plattform zu Plattform und von System zu System variieren. Die installierte Anwendung weiß auf diese Weise stets, wo sich mit <code>chrome://</code> angesprochene Dateien relativ zum Installationspfad befinden.</p>
<p>Das Browser-Fenster ist: <code><a class=" external" href="chrome://browser/content/browser.xul" rel="freelink">chrome://browser/content/browser.xul</a></code> Versuchen Sie, diese URL in die Adressleiste von Firefox zu tippen! oder: <code><a class=" external" href="chrome://predatorIndex/$34#2/browser.xvp" rel="freelink">chrome://predatorIndex/$34#2/browser.xvp</a></code></p>
<p>Chrome URIs bestehen aus verschiedenen Komponenten:</p>
<ul> <li>Zuerst dem <strong>URI Schema</strong> (<code>chrome</code>), das der Netzwerk-Bibliothek von Firefox sagt, dass dies eine Chrome URI ist, und dass deren Inhalt besonders behandelt werden muss.</li> <li>Zweitens einem Paketnamen (im oberen Beispiel <code><strong>browser</strong></code>), der das Bündel der Komponenten der Benutzeroberfläche identifiziert. Dieser Paketname sollte so einzigartig wie möglich sein, um Konflikte zwischen verschiedenen Erweiterungen zu vermeiden.</li> <li>Drittens dem Datentyp, der angefordert wird. Es gibt drei Typen: <code>content</code> (XUL, JavaScript, XBL bindings, etc., die Struktur und Verhalten der Anwendungsoberfläche bestimmen), <code>locale</code> (DTD, .properties-Dateien etc., die Zeichenketten für die <a href="/de/Lokalisierung" title="de/Lokalisierung">Lokalisierung</a> der Benutzeroberfläche enthalten), und <code>skin</code> (CSS und Bilder, die das <a href="/de/Themes" title="de/Themes">Thema</a> der Oberfläche bilden)</li> <li>und zum Schluss dem Pfad der Datei, um sie zu laden.</li>
</ul>
<p>Somit lädt <code><a class=" external" href="chrome://foo/skin/bar.png" rel="freelink">chrome://foo/skin/bar.png</a></code> die Datei <code>bar.png</code> aus  <code>dem "foo"</code> Theme-Abschnitt <code>skin</code>.</p>
<p>Wenn Sie Inhalt über eine Chrome URI laden, benutzt Firefox die Chrome Registry, um diese URIs in die tatsächlichen Quelldateien (oder in .jar-Pakete) zu übertragen.</p>
<h4>Ein Chrome-Manifest erstellen</h4>
<p>For more information on Chrome Manifests and the properties they support, see the <a href="/de/Chrome_Registrierung" title="de/Chrome Registrierung">Chrome Manifest</a> Reference.</p>
<p>Open the file called <strong>chrome.manifest</strong> that you created alongside the <code>chrome</code> directory at the root of your extension's source folder hierarchy.</p>
<p>Add in this code:</p>
<pre class="eval">content     sample    chrome/content/
</pre>
<p>(<strong>Don't forget the trailing slash, "<code>/</code>"!</strong> Without it, the package won't be registered.)</p>
<p>This specifies the:</p>
<ol> <li>type of material within a chrome package</li> <li>name of the chrome package (make sure you use all lowercase characters for the package name ("sample") as Firefox/Thunderbird doesn't support mixed/camel case in version 2 and earlier - {{ Bug("132183") }})</li> <li>location of the chrome packages' files</li>
</ol>
<p>So, this line says that for a chrome package <strong>sample</strong>, we can find its <strong>content</strong> files at the location <code>chrome/content</code> which is a path relative to the location of <code>chrome.manifest</code>.</p>
<p>Note that content, locale and skin files must be kept inside folders called content, locale and skin within your <code>chrome</code> subdirectory.</p>
<p>Save the file. When you launch Firefox with your extension, (later in this tutorial), this will register the chrome package.</p>
<h4>Einen Overlay registrieren</h4>
<p>You need Firefox to merge your overlay with the browser window whenever it displays one. So add this line to your <code>chrome.manifest</code> file:</p>
<pre class="eval">overlay <a class=" external" href="chrome://browser/content/browser.xul" rel="freelink">chrome://browser/content/browser.xul</a> <a class=" external" href="chrome://sample/content/sample.xul" rel="freelink">chrome://sample/content/sample.xul</a>
</pre>
<p>This tells Firefox to merge <code>sample.xul</code> into <code>browser.xul</code> when <code>browser.xul</code> loads.</p>
<h4>Testen</h4>
<p>First, we need to tell Firefox about your extension. During the development phase for Firefox versions 2.0 and higher, you can point Firefox to the folder where you are developing the extension, and it'll load it up every time you restart Firefox.</p>
<ol> <li>Locate your <a class="external" href="http://kb.mozillazine.org/Profile_folder" title="http://kb.mozillazine.org/Profile_folder">profile folder</a> and beneath it the profile you want to work with (e.g. <code>Firefox/Profiles/&lt;profile_id&gt;.default/</code>).</li> <li>Open the <code>extensions/</code> folder, creating it if need be.</li> <li>Create a new text file and put the full path to your development folder inside (e.g. <code>C:\extensions\my_extension\</code> or <code>~/extensions/my_extension/)</code>. Windows users should retain the OS' slash direction, and <em>everyone</em> should remember to <strong>include</strong> a closing slash and <strong>remove</strong> any trailing spaces.</li> <li>Save the file with the id of your extension as its name (e.g. <code><a class="linkification-ext link-mailto" href="mailto:sample@example.net" title="Linkification: mailto:sample@example.net">sample@example.net</a></code>). No file extension.</li>
</ol>
<p>Now you should be ready to test your extension!</p>
<p>Start Firefox. Firefox will detect the text link to your extension directory and install the Extension. When the browser window appears you should see the text "Hello, World!" on the right side of the status bar panel.</p>
<p>You can now go back and make changes to the .xul file, close and restart Firefox and they should appear.</p>
<h4>Packen</h4>
<p>Now that your extension works, you can <a href="/de/Packen_von_Erweiterungen" title="de/Packen von Erweiterungen">packen</a> it for deployment and installation.</p>
<p>Zip up the <strong>contents</strong> of your extension's folder (not the extension folder itself), and rename the zip file to have a .xpi extension. In Windows XP, you can do this easily by selecting all the files and subfolders in your extension folder, right click and choose "Send To -&gt; Compressed (Zipped) Folder". A .zip file will be created for you. Just rename it and you're done!</p>
<p>On Mac OS X, you can right-click on the <strong>contents</strong> of the extension's folder and choose "Create Archive of..." to make the zip file. However, since Mac OS X adds hidden files to folders in order to track file metadata, you should instead use the Terminal, delete the hidden files (whose names begin with a period), and then use the <code>zip</code> command on the command line to create the zip file.</p>
<p>On Linux, you would likewise use the command-line zip tool.</p>
<p>If you have the 'Extension Builder' extension installed it can compile the .xpi file for you (Tools -&gt; Extension Developer -&gt; Extension Builder). Merely navigate to the directory where your extension is (install.rdf etc.), and hit the Build Extension button. This extension has a slew of tools to make development easier.</p>
<p>Now upload the .xpi file to your server, making sure it's served as <code>application/x-xpinstall</code>. You can link to it and allow people to download and install it. For the purposes of just testing our .xpi file we can just drag it into the extensions window via Tools -&gt; Extensions in Firefox 1.5.0.x, or Tools -&gt; Add-ons in later versions.</p>
<h5>Installation von einer Webseite</h5>
<p>There are a variety of ways you can install extensions from web pages, including direct linking to the XPI files and using the InstallTrigger object. Extension and web authors are encouraged to use the <a href="/de/Erweiterungen_und_Themes_von_Webseiten_installieren" title="de/Erweiterungen und Themes von Webseiten installieren"> InstallTrigger Methode</a> to install XPIs, as it provides the best experience to users.</p>
<h5>Verwendung von addons.mozilla.org</h5>
<p>Mozilla Add-ons is a distribution site where you can host your extension for free. Your extension will be hosted on Mozilla's mirror network to guarantee your download even though it might be very popular. Mozilla's site also provides users easier installation, and will automatically make your newer versions available to users of your existing versions when you upload them. In addition Mozilla Add-ons allows users to comment and provide feedback on your extension. It is highly recommended that you use Mozilla Add-ons to distribute your extensions!</p>
<p>Visit <a class="linkification-ext external" href="http://addons.mozilla.org/de/developers/" title="http://addons.mozilla.org/de/developers/">http://addons.mozilla.org/de/developers/</a> to create an account and begin distributing your extensions!</p>
<p><em>Note:</em> Your Extension will be passed faster and downloaded more if you have a good description and some screenshots of the extension in action.</p>
<h5>Erweiterungen über einen separaten Installer installieren</h5>
<p>It's possible to install an extension in a special directory and it will be installed the next time the application starts. The extension will be available to any profile. See <a class="internal" href="/de/Erweiterungen_installieren" title="de/Erweiterungen installieren">Erweiterungen installieren</a> for more information.</p>
<p>On Windows, information about extensions can be added to the registry, and the extensions will automatically be picked up the next time the applications starts. This allows application installers to easily add integration hooks as extensions. See <a href="/de/Erweiterungen_über_die_Windows_Registrierung_hinzufügen" title="de/Erweiterungen über die Windows Registrierung hinzufügen">Erweiterungen über die Windows Registrierung hinzufügen</a> for more information.</p>
<h4>Weiteres zu XUL Overlays</h4>
<p>In addition to appending UI widgets to the merge point, you can use XUL fragments within Overlays to:</p>
<ul> <li>Modify attributes on the merge point, e.g. <code>&lt;statusbar id="status-bar" hidden="true" /&gt;</code> (hides the status bar)</li> <li>Remove the merge point from the master document, e.g. <code>&lt;statusbar id="status-bar" removeelement="true" /&gt;</code></li> <li>Control the position of the inserted widgets:</li>
</ul>
<pre class="eval">&lt;statusbarpanel position="1" ...  /&gt;

&lt;statusbarpanel insertbefore="other-id" ...  /&gt;

&lt;statusbarpanel insertafter="other-id" ...  /&gt;
</pre>
<h4>Neue Elemente zur Benutzeroberfläche hinzufügen</h4>
<p>You can create your own windows and dialog boxes as separate .xul files, provide functionality by implementing user actions in .js files, using DOM methods to manipulate UI widgets. You can use style rules in .css files to attach images, set colors etc.</p>
<p>View the <a href="/de/XUL" title="de/XUL">XUL</a> documentation for more resources for XUL developers.</p>
<h4>Default-Dateien</h4>
<p>Defaults files that you use to seed a user's profile with should be placed in <code>defaults/</code> under the root of your extension's folder hierarchy. Default preferences .js files should be stored in <code>defaults/preferences/</code> - when you place them here they will be automatically loaded by Firefox's preferences system when it starts so that you can access them using the <a href="/de/Preferences_API" title="de/Preferences API">Preferences API</a>.</p>
<p>An example default preference file:</p>
<pre class="eval">pref("extensions.sample.username", "Joe"); //a string pref
pref("extensions.sample.sort", 2); //an int pref
pref("extensions.sample.showAdvanced", true); //a boolean pref
</pre>
<h4>XPCOM Komponenten</h4>
<p>Firefox supports <a href="/de/XPCOM" title="de/XPCOM">XPCOM</a> components in extensions. You can create your own components easily in JavaScript or in C++ (using the <a href="/de/Gecko_SDK" title="de/Gecko SDK">Gecko SDK</a>).</p>
<p>Place all of your .js or .dll files in the <code>components/</code> directory - they are automatically registered the first time Firefox runs after your extension is installed.</p>
<p>For more information see <a href="/de/XPCOM_Komponenten_in_JavaScript" title="de/XPCOM Komponenten in JavaScript">XPCOM Komponenten in JavaScript</a>, <a href="/de/Eine_binäre_XPCOM_Komponente_über_Visual_Studio_erstellen" title="de/Eine binäre XPCOM Komponente über Visual Studio erstellen">Eine binäre XPCOM Komponente über Visual Studio erstellen</a> and the <a href="/de/XPCOM_Komponenten_erstellen" title="de/XPCOM Komponenten erstellen">XPCOM Komponenten erstellen</a> book.</p>
<h5>Kommandozeile der Anwendung</h5>
<p>One of the possible uses of custom XPCOM components is adding a command line handler to Firefox or Thunderbird. You can use this technique to run your extension as an application:</p>
<pre class="eval"> firefox.exe -myapp
</pre>
<p><span class="comment">I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag().</span> See <a href="/de/Chrome/Command_Line" title="de/Chrome/Command Line">Chrome: Command Line</a> and a <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">forum discussion</a> for details.</p>
<h4>Lokalisierung</h4>
<p>To support more than one language, you should separate strings from your content using <a href="/de/XUL_Tutorial/Lokalisierung" title="de/XUL Tutorial/Lokalisierung">Entities</a> and <a href="/de/XUL_Tutorial/Property-Dateien" title="de/XUL Tutorial/Property-Dateien">String Bundles</a>. It is much easier to do this while you are developing your extension, rather than come back and do it later!</p>
<p>Localization information is stored in the locale directory for the extension. For example, to add a locale to our sample extension, create a directory named "locale" in chrome (where the "content" directory is located) and add the following line to the chrome.manifest file:</p>
<pre class="eval">locale sample en-US chrome/locale/en-US/
</pre>
<p>To create localizable attribute values in XUL, you put the values in a <code>.dtd</code> file, which should be placed in the locale directory and looks like this:</p>
<pre class="eval">&lt;!ENTITY  button.label     "Click Me!"&gt;
&lt;!ENTITY  button.accesskey "C"&gt;
</pre>
<p>And then include it at the top of your XUL document (but underneath the "&lt;?xml version"1.0"?&gt;") like so:</p>
<pre class="eval">&lt;!DOCTYPE <strong>window</strong> SYSTEM "<a class=" external" href="chrome://packagename/locale/filename.dtd" rel="freelink">chrome://packagename/locale/filename.dtd</a>"&gt;
</pre>
<p>where <code><strong>window</strong></code> is the <code><a href="/de/DOM/Node.localName" title="de/DOM/Node.localName">localName</a></code> value of the root element of the XUL document, and the value of the <code>SYSTEM</code> property is the chrome URI to the entity file. For our sample extension, the root element is <code><strong>overlay</strong></code>.</p>
<p>To use the entities, modify your XUL to look like this:</p>
<pre class="eval">&lt;button label="&amp;button.label;" accesskey="&amp;button.accesskey;"  /&gt;
</pre>
<p>The Chrome Registry will make sure the entity file is loaded from the localization bundle corresponding to the selected locale.</p>
<p>For strings that you use in script, create a .properties file, a text file that has a string on each line in this format:</p>
<pre class="eval">key=value
</pre>
<p>and then use <code><a href="/de/NsIStringBundleService" title="de/NsIStringBundleService">nsIStringBundleService</a></code>/<code><a href="/de/XPCOM_Interface_Referenz/nsIStringBundle" title="de/XPCOM Interface Referenz/nsIStringBundle">nsIStringBundle</a></code> or the <code><a href="/de/XUL/stringbundle" title="de/XUL/stringbundle">&lt;stringbundle&gt;</a></code> tag to load the values into script.</p>
<h4>Den Browser verstehen</h4>
<p>Use the <a href="/de/DOM_Inspector" title="de/DOM Inspector">DOM Inspector</a> to inspect the browser window or any other XUL window you want to extend.</p>
<p><strong>Note:</strong> <strong>DOM Inspector</strong> is not part of the <strong>Standard</strong> Firefox installation. Since Firefox 3 Beta 4, the DOM Inspector has been available from <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622">Firefox Add-ons</a> as a standalone extension. For earlier versions, you must reinstall with the Custom install path and choose <strong>DOM Inspector</strong> (or <strong>Developer Tools</strong> in Firefox 1.5) if there is not a "DOM Inspector" item in your browser's Tools menu.</p>
<p>Use the point-and-click node finder button at the top left of the DOM Inspector's toolbar to click on a node in the XUL window visually to select it. When you do this the DOM inspector's DOM hierarchy tree view will jump to the node you clicked on.</p>
<p>Use the DOM Inspector's right side panel to discover merge points with ids that you can use to insert your elements from overlays. If you cannot discover an element with an id that you can merge into, you may need to attach a script in your overlay and insert your elements when the <code>load</code> event fires on the master XUL window.</p>
<h4>Erweiterungen debuggen</h4>
<p><strong>Analytical Tools for Debugging</strong></p>
<ul> <li>The <a href="/de/DOM_Inspector" title="de/DOM Inspector">DOM Inspector</a> - inspect attributes, DOM structure, CSS style rules that are in effect (e.g. find out why your style rules don't seem to be working for an element - an invaluable tool!)</li> <li><a href="/de/Venkman" title="de/Venkman">Venkman</a> - set breakpoints in JavaScript and inspect call stacks</li> <li><code><a href="/de/Core_JavaScript_1.5_Referenz/Funktionen_und_Funktionsbereiche/arguments/callee" title="de/Core JavaScript 1.5 Referenz/Funktionen und Funktionsbereiche/arguments/callee">arguments.callee</a>.<a href="/de/Core_JavaScript_1.5_Referenz/Globale_Objekte/Funktion/caller" title="de/Core JavaScript 1.5 Referenz/Globale Objekte/Funktion/caller">caller</a></code> in JavaScript - access a function's call stack</li>
</ul>
<p><strong>printf debugging</strong></p>
<ul> <li>Use <code><a href="/de/DOM/window.dump" title="de/DOM/window.dump">dump</a>("string")</code> (see the link for details; this requires a bit of configuration to work properly)</li> <li>Use <code><a href="/de/Components.utils.reportError" title="de/Components.utils.reportError">Components.utils.reportError()</a></code> or <code><a href="/de/nsIConsoleService" title="de/nsIConsoleService">nsIConsoleService</a></code> to log to the JavaScript console</li>
</ul>
<p><strong>Advanced debugging</strong></p>
<ul> <li>Run a debug Firefox build and set breakpoints in Firefox itself, or your C++ components. For the experienced developer, this is often the fastest way to diagnose a problem. See <a href="/de/Entwicklerhandbuch/Build_Anweisungen" title="de/Entwicklerhandbuch/Build Anweisungen">Build Anweisungen</a> and <a href="/de/Entwicklerhandbuch" title="de/Entwicklerhandbuch">Entwicklerhandbuch</a> for more information.</li> <li>See <a href="/de/Eine_XULRunner_Anwendung_debuggen" title="de/Eine XULRunner Anwendung debuggen">Debugging a XULRunner Application</a> for more helpful tips.</li>
</ul>
<h3>Weitere Informationen</h3>
<ul> <li><a href="/de/Erweiterungen_FAQ" title="de/Erweiterungen FAQ">Erweiterungen FAQ</a></li> <li><a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a></li>
</ul>
<p>{{ languages( { "en": "en/Building_an_Extension", "es": "es/Creando_una_extensi\u00f3n", "fr": "fr/Construire_une_extension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/Sviluppare_un\'Estensione", "ru": "ru/\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435_\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f", "zh-cn": "cn/\u6784\u5efa\u4e00\u4e2a\u6269\u5c55", "ko": "ko/Building_an_Extension" } ) }}</p>
Zu dieser Version zurücksetzen