diff options
Diffstat (limited to 'files/de/mozilla/add-ons/sdk')
11 files changed, 2337 insertions, 0 deletions
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 = "<h1>Diese Seite wurde aufgegessen</h1>";' + +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 = ' + + ' "<h1>Page matches ruleset</h1>";'; + +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 = "<h1>Seite erfüllt die Regeln.</h1>";</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("<h1>Page matches ruleset</h1>");'; + +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"><!DOCTYPE html"> +<html> + <head> + <script> + window.foo = "hello from page script" + </script> + </head> +</html></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"><html> + <head> + </head> + <body> + <script> + window.onclick = function() { + window.alert("it's my click now!"); + } + </script> + </body> +</html></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 > 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&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 && event.shiftKey == false) + self.port.emit('left-click'); + if(event.button == 2 || (event.button == 0 && 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>/dev/null' + ].join('&&') + } + }, + 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 > +</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> +</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> |