Softwareentwickler / Software Developer
Mobile Gestures im Add-on-Store von Mozilla Firefox

Mobile Gestures | Entwicklung eines Firefox Add-ons

Einen kleinen Einblick in die Progammierung von Apps mit Android habe ich bereits gegeben. Ein weiteres Thema, was mich interessiert hat, war das Entwicklen von Browser-Plugins, in meinem Fall speziell ein Firefox Add-on. Und wie das geht, möchte ich in diesem Artikel einmal erklären.

Mobile Gestures

Zuerst einmal eine Werbung in eigener Sache. Als Beispiel nutze ich mein Add-on, was sich tatsächlich auch schon im Store von Mozilla befindet. Sinn und Zweck von “Mobile Gestures” ist es, zu der Android Variante von Firefox Finger-Gesten hinzuzufügen, um eine noch schnellere Nutzung zu ermöglichen. Mich hat es immer genervt, dass man z.B. zum Öffnen eines neuen Tabs immer zwei Klicks machen muss. Zwar gab es dafür schon vorhandene Add-ons, aber diese waren entweder mit der neuesten Version von Firefox nicht kompatibel, die die Nutzung der WebExtensions API voraussetzt, oder haben mir nicht gefallen.

Aufbau des Addons

Viele Dateien werden hier gar nicht gebraucht. Wichtig ist zuerst einmal die manifest.json-Datei, in der die Metadaten von dem Projekt stehen. Hier mal als Beispiel das Beispiel aus meinem Projekt:

{
  "manifest_version": 2,
  "name": "Mobile Gestures",
  "version": "1.0.2",
  "description": "Adds one-finger-gestures to Firefox for Android.",
  "icons": {
    "48": "icons/mobile-gestures-48.png"
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["mobile-gestures.js"]
    }
  ],  
  "applications": {
    "gecko": {
      "id": "mobile-gestures@jonas-hellmann.de"  
    }
  },  
  "background": {
    "scripts": ["background.js"]
  },  
  "permissions": ["tabs"]
}

Allgemeine Angaben

Die einzelnen Angaben möchte ich zumindest kurz einmal erklären. Die Manifest-Version gibt an, welche Struktur für die Datei verwendet wird. Anschließend lege ich Namen und Beschreibung sowie die aktuelle version des Add-ons fest. Damit mein Add-on nicht ohne Bild erscheint, kann ich dieses festlegen. Dann wird es spannend.

Content- und Hintergund-Skripte

Ich kann sogenannte Content-Skripte angeben. Dabei handelt es sich um die Skripte, die beim Aufruf einer Webseite im Kontext dieser Seite ausgeführt werden und quasi der Einstiegspnkt für das Add-on sind. Ich kann hier ganz normal auf den DOM der Seite zugreifen und diesen manipulieren oder auf ausgelöste Events reagieren. Ein Stück weiter unten werden dann Hintergrund-Skripte aufgeführt. Diese laufen nicht in einem bestimmten Seiten-Kontext. In diesen habe ich aber viel mehr Möglichkeiten, die Funktionalitäten der WebExtensions API einzusetzen. Um Tabs zu öffnen, schließen etc. fordere ich abschließend die notwendige Berechtigung ein.

In der Manifest-Datei sind damit alle benötigten Dateien aufgelistet, weswegen ich gleich weiter zum Code komme.

Die Content-Skripte bieten wie gesagt den Einstieg in die Seite. Sie bieten mir es aber nicht an, auf alle Funktionen, die ich brauche – zum Beispiel in diesen Fall das Verwalten von Tabs – zuzugreifen. Dies ist wie gesagt nur aus den im Hintergrund laufenden Skripten möglich. Deswegen muss ich zwischen diesen beiden irgendwie kommunizieren können.

Im Kontext der Seite wird per Touch-Events ermittelt, welche Geste grade ausgeführt wurde. Im Anschluss daran wird dann eine Nachricht mit browser.runtime.sendMessage() verschickt. Und da im Hintergrund-Skript ein Listener auf solche eine Nachricht mittels browser.runtime.onMessage.addListener(notify) registriert wurde, kann ich in der entsprechenden Methode auf diese eingehende Nachricht reagieren. Und das war eigentlich auch schon die gesamte Magie.

Wer sich tiefergehend damit beschäftigen will, kann sich ausgehend von diesem Artikel durch die Mozilla-Dokumentation hangeln, die meiner Meinung nach sehr hilfreich ist und gute Beispiel bietet. Wenn du auch schon mal ein Add-on veröffentlicht hast oder sonst etwas los werden möchtest, dann gerne in die Kommentare damit! 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert