webentwicklung-frage-antwort-db.com.de

Was ist der einfachste Weg, um eine Firefox-Erweiterung zu entwickeln?

Ich plane, eine einfache Firefox-Erweiterung zu entwickeln, die die URL eines derzeit aktiven Tabs verkürzt, ein Popup mit der verkürzten URL anzeigt und in die Zwischenablage legt.

In Google Chrome wäre dies ziemlich einfach (laut http://developer.chrome.com/extensions/getstarted.html ) - reines JavaScript plus ein paar Aufrufe von JavaScript-APIs für die Interaktion mit der Benutzeroberfläche des Browsers.

Nachdem ich nach einem guten Tutorial für Firefox-Erweiterungen gesucht habe, habe ich folgende offiziell aussehende Links gefunden:

Ihnen zufolge muss ich die XUL-Sprache auch für die einfachsten Interaktionen mit der Benutzeroberfläche des Browsers erlernen. Darüber hinaus muss ich ein benutzerdefiniertes Firefox-Profil einrichten, um mein Standardprofil während der Entwicklung nicht zu überfrachten, eine komplizierte Verzeichnisstruktur zu erstellen, ein Manifest in obskurem XML zu schreiben, herauszufinden, wie ich alles, was ich implementiere, verpacken und testen kann usw.

Es ist 2013, gibt es nicht eine einfachere Möglichkeit, Firefox-Erweiterungen zu erstellen?

60
dorserg

Es ist 2013, gibt es nicht eine einfachere Möglichkeit, Firefox-Erweiterungen zu erstellen?

Ja, das gibt es!

Die Links, die Sie in der Frage angegeben haben, sind unglaublich veraltet. Es gibt eine neue, viel bessere Möglichkeit, Firefox-Erweiterungen zu entwickeln - Firefox-Add-on-SDK .

Es ist jedoch ziemlich schwer, darauf zu stoßen, indem man einfach nach den Grundsätzen des Firefox-Addon-Tutorials googelt. Ich bin erstaunt, dass Mozilla es nicht aggressiver bewirbt oder zumindest auf den von Ihnen gefundenen Seiten erwähnt.

Erste Schritte (Mac/Linux, sollte aber für PC ziemlich ähnlich sein):

  • Laden Sie das SDK von https://addons.mozilla.org/en-US/developers/builder herunter und entpacken Sie es.
  • Schauen Sie sich schnell die README Datei an (immer nützlich).
  • Ausführen source bin/activate aus dem SDK-Verzeichnis (dasselbe Verzeichnis, in dem sich die Datei README befindet)).
  • Ausführen cfx docs - Dieser Bootstrap erstellt eine lokale Kopie von SDK-Dokumente und öffnet sie in Ihrem Browser.
  • Verlassen Sie das SDK-Verzeichnis und erstellen Sie ein leeres Verzeichnis für Ihre Erweiterung.
  • Ausführen cfx init innerhalb des Erweiterungsverzeichnisses - dies erzeugt alle notwendigen Dateien/Verzeichnisse.
  • Folgen Sie dem Rest von Erste Schritte mit cfx Seite:
    • Aktualisiere lib/main.js mit nur ein paar Zeilen JS, um ein benutzerdefiniertes Widget auf der Add-On-Leiste zu platzieren.
    • Ausführen cfx run - Hiermit wird eine neue Firefox-Instanz mit Ihrer neuen glänzenden Erweiterung geöffnet.

Alles in allem habe ich nur ein paar Stunden gebraucht, um die Dokumentation zu lesen, mich mit den SDK-APIs vertraut zu machen und das SDK Modul zu finden, um ein Widget auf einer Navigationsleiste statt einer Add-On-Leiste zu platzieren. und entwickeln Sie eine voll funktionsfähige Erweiterung in nur etwa 50 Zeilen JavaScript.

HTH!

Aktualisieren

Es gibt einen neuen Standard namens WebExtensions

From MDN

Derzeit gibt es mehrere Toolsets für die Entwicklung von Firefox-Add-Ons, aber WebExtensions werden bis Ende 2017 zum Standard.

Wenn Sie ein neues Add-On schreiben , empfehlen wir Ihnen, eine WebExtension zu schreiben.

72
dorserg

Ja, es gibt drei verschiedene Techniken, mit denen Sie Erweiterungen erstellen können:

  1. Add-On SDK-basierte Erweiterungen
  2. manuell gebootete neustartlose Erweiterungen
  3. Überlagerungserweiterungen

Sie können den Vergleich zwischen hier lesen

Wenn Sie können, ist es ratsam, das Add-on-SDK zu verwenden, das den neustartlosen Erweiterungsmechanismus verwendet, jedoch bestimmte Aufgaben vereinfacht und nach sich selbst bereinigt. Wenn das Add-on-SDK für Ihre Anforderungen nicht ausreicht, implementieren Sie stattdessen eine manuelle Erweiterung ohne Neustart.

Erste Schritte mit SDK-basierten Erweiterungen

  1. Installation
  2. Benutzeroberflächen erstellen
  3. Interagiere mit dem Browser
9
Subodh Ghulaxe

Ab https://blog.mozilla.org/addons/2016/11/23/add-ons-in-2017/ besteht die einzige Möglichkeit in der Verwendung von WebExtensions) . Die letzten SDK-Erweiterungen werden für Firefox 52 akzeptiert, während Firefox 57 die Unterstützung aller anderen Erweiterungen beendet und nur WebExtensions unterstützt.

Firefox hat die Erweiterungs-API von Google Chrome kopiert. Sie können also verwenden Sie einfach Ihre Chrome Erweiterung und prüfen, ob alle APIs bereits in Firefox unterstützt werden (sie sollten ab sofort verfügbar sein). Programmierer wie NoScript 's Giorgio Maone nterstützen aktiv den Wechsel zu WebExtensions .

Um eine WebExtension zu entwickeln, benötigen Sie

  • entweder web-ext- tool das kann über installiert werden

    npm install --global web-ext
    
  • oder benutze einfach Firefox's about:debugging oder Chrom's chrome:extensions, um die Weberweiterung vorübergehend zu laden.

In jedem Fall benötigen Sie ein manifest.json Datei in einem von Ihnen erstellten Verzeichnis, das alle Funktionen zusammenfügt. Ein erstes Beispiel finden Sie unter https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Your_first_WebExtension . Oder die Google-Dokumente unter https://developer.chrome.com/getstarted .

8
serv-inc

Es gibt zwei offizielle Wege für die Entwicklung von Add-Ons, jeder von ihnen hat Vor- und Nachteile:

1- WebExtensions (neuere Methode):

WebExtensions sind die Zukunft der Firefox-Add-Ons. Wenn Sie die WebExtensions-API verwenden können, ist dies die beste Wahl. Sie können WebExtensions jetzt entwickeln und veröffentlichen, sie befinden sich jedoch noch in einem frühen Stadium.

2- Add-On-SDK (ältere Methode):

Das Add-On-SDK bietet APIs zum Entwickeln von Firefox-Add-Ons sowie ein Tool zum Entwickeln, Testen und Packen dieser Add-Ons.

4
iraj jelodari

Ich habe ein Tutorial zum Entwickeln von Erweiterungen mit dem Firefox-Addon-SDK erstellt:

Wie man eine Firefox-Erweiterung mit dem Addon SDK entwickelt

3
ejectamenta