Mit einer eigenen Browsererweiterung können Sie die Funktionalität Ihres Browsers erweitern, Ihre Produktivität steigern oder wiederkehrende Probleme mit einem einzigen Klick beheben. Dank der zunehmenden Unterstützung gängiger Standards ist die Entwicklung einer einzigen Erweiterung, die in verschiedenen Browsern funktioniert, sowohl für Einsteiger als auch für Profis zu einem realistischen Ziel geworden.
Der Erfolg einer Browsererweiterung hängt vom Verständnis ihrer Dateistruktur, ihres Berechtigungsmechanismus und der sicheren und effizienten Interaktion mit Webseiten ab. Durch die Einhaltung gängiger Verfahren lassen sich die erforderlichen Anpassungen pro Browser minimieren und der Bereitstellungsprozess beschleunigen.
Dieser Leitfaden bietet klare Schritte zum Erstellen einer Browsererweiterung, die mit Chrome, Firefox und anderen Browsern kompatibel ist, wobei der Schwerpunkt auf bewährten Verfahren liegt, die langfristige Leistungsfähigkeit, Stabilität und Wartungsfreundlichkeit gewährleisten.
Dank der WebExtensions-Initiative und grundlegender Webtechnologien ist die Entwicklung browserübergreifend kompatibler Erweiterungen deutlich einfacher geworden. Durch die Verwendung eines standardisierten Formats lassen sich Erweiterungen schreiben, die überall funktionieren, ohne dass bestimmte Browser als Zielplattform festgelegt werden müssen.
Lerne, wie du dein erstes Plugin programmierst und testest, um individuelle Änderungen an beliebigen Webseiten vorzunehmen.
Was sind Web-Plugins?
Web-Plugins sind Erweiterungen, die mit verschiedenen Browsern kompatibel sind und Web-APIs (Application Programming Interfaces) nutzen, um die Standardfunktionalität von Webbrowsern zu erweitern. Plugins werden als Quellcode verteilt und verwenden die Kerntechnologien HTML, CSS und JavaScript.
Obwohl es Erweiterungen schon seit fast 30 Jahren gibt, nutzten Browser traditionell unterschiedliche Methoden, um sie zu unterstützen. Das bedeutete, dass eine Chrome-Erweiterung nicht mit Firefox kompatibel war und umgekehrt. Dank Standardisierungsbemühungen und der Vereinheitlichung vieler Browser auf Basis der Chromium-Engine ist dies deutlich weniger problematisch geworden. Seit 2021 verfolgt die WebExtensions-Initiative das Ziel, dieses Ökosystem formal zu regulieren. Im Idealfall würde dies Entwicklern ermöglichen, eine Erweiterung nur einmal zu schreiben und sie für alle Browser verfügbar zu machen.
Lesen Sie weiter, um zu erfahren, wie Sie mit der Webplattform moderne, mit allen Browsern kompatible Erweiterungen entwickeln können; es ist einfacher, als Sie denken!
Hinweis: Obwohl WebExtensions browserunabhängig sein sollen, ist Firefox der Browser, der sich am einfachsten dafür entwickeln lässt, da er das temporäre Laden der Erweiterung ermöglicht. Safari hingegen erfordert ein kostenpflichtiges Entwicklerabonnement.
Erstellen einer Manifestdatei: Jedes Plugin benötigt lediglich eine Manifestdatei, die seine allgemeine Struktur beschreibt. Hier ist ein Beispiel:
{
"manifest_version": 3,
"name": "my first extension",
"version": "1.0",
"icons": {
"16": "app/images/icon16.png",
"48": "app/images/icon48.png",
"128": "app/images/icon128.png"
},
"permissions": [
"webNavigation",
"storage"
],
}
ملاحظة
Diese Datei liegt im JSON-Format vor, was bedeutet, dass Sie sie mit allen verfügbaren Tools bearbeiten oder anzeigen können.
Es werden lediglich drei Schlüssel benötigt: Name, Version und Manifestversion. Die Schlüssel Name und Version sind anwendungsspezifisch, ihre genauen Werte sind für diese Erklärung nicht relevant. Chrome verweigert jedoch das Laden Ihrer Erweiterung, wenn die Version ungültig ist. Stellen Sie daher sicher, dass es sich um eine durch Punkte getrennte Ganzzahl zwischen 1 und 4 handelt, z. B. „0“ oder „0.0.1“.
Die Manifestversion ist ein etwas heikler Punkt: Während andere Browser möglicherweise die Versionen 1 und 2 unterstützen, weigert sich Chrome, Erweiterungen zu laden, es sei denn, Sie verwenden Version 3. Die Verwendung dieser Version schränkt Ihre Kontrolle ein, aber wenn Sie möchten, dass Chrome unterstützt wird, sollten Sie sie verwenden.
Darüber hinaus kann die Manifestdatei verschiedene weitere Schlüssel verwenden, um die Art Ihres Add-ons zu beschreiben. Dazu gehören Autor, Beschreibung und Symbole, die für die Bewerbung Ihres Add-ons im Store hilfreich sein können. Mit dem Befehlsschlüssel können Sie Tastenkombinationen definieren.
Der Schlüssel content_scripts ist einer der wichtigsten Manifestschlüssel, da er es Ihrem Plugin ermöglicht, JavaScript- oder CSS-Dateien zu laden und auf die Webseite anzuwenden.
"content_scripts": [{
"matches": ["https://en.wikipedia.org/wiki/*"],
"js": ["script.js"],
"css": ["style.css"]
}]
Jedes Element in der Datei `content_scripts` muss einen `matches`-Schlüssel enthalten, der die URLs angibt, auf denen die Erweiterung ausgeführt wird. Mit den Schlüsseln `js` und `css` können Sie die Skripte oder Stylesheets auflisten, die die Erweiterung beim Anzeigen einer entsprechenden Seite laden soll.
Schreiben des Erweiterungscodes
Dieses einfache Beispiel simuliert TampermonkeyTampermonkey ist eine beliebte Erweiterung, mit der man Webseiten anpassen kann. Damit lassen sich beispielsweise im Reddit-Feed die „besten“ Inhalte ausblenden.
Mithilfe einer Manifestdatei und etwas JavaScript lässt sich leicht eine einfache Web-Erweiterung erstellen. Dieses Beispiel verändert die Darstellung von Wikipedia-Seiten, aber die Möglichkeiten sind unbegrenzt; alles, was mit einer Webseite möglich ist, ist realisierbar.
{
"manifest_version": 3,
"name": "tweakipedia",
"description": "Tweak Wikipedia pages to our liking",
"version": "1.0",
"content_scripts": [{
"matches": ["https://en.wikipedia.org/wiki/*"],
"js": ["tweakipedia.js"],
"css": ["tweakipedia.css"]
}]
}
Ich fange ganz einfach an und passe einige Dinge mithilfe von CSS-Code meinen persönlichen Vorlieben an. Beispielsweise stört mich der Hinweis „Weitere Gutachter benötigt“, da er den durchschnittlichen Leser ablenkt. Daher blende ich ihn aus, indem ich die Kategorie des Elements festlege und dessen Display-Eigenschaft auf „none“ setze.
.box-More_citations_needed { display: none; }
Wenn Sie keine Lust haben, Gutes zu tun, können Sie die Spendenaufruf-Ankündigung auch ausblenden:
.cn-fundraising { display: none; }
Danach empfinde ich die Fußnotenmarkierungen als etwas störend, daher werde ich ihre Bedeutung etwas verringern, indem ich ihre Farbe anpasse:
sup a { color: rgb(51, 102, 204, 0.5); }
Beachten Sie, dass dies die Standardfarbe mit 50 % Alphakanal ist, also nahezu transparent. Dadurch wird die Sichtbarkeit dieser Markierungen reduziert.
Wenn ich dieses Konzept genauer betrachte, möchte ich andere Elemente ausblenden (oder verändern), aber nur bei Bedarf, und die Änderungen sollen sich problemlos rückgängig machen lassen. Das erfordert etwas JavaScript, ist aber ganz einfach!
toggle_on_key("Escape", "sup a,.mw-editsection,.vector-page-toolbar");
function toggle_on_key(key, sels) {
document.addEventListener("keydown", function (ev) {
if (ev.key === key) {
document.querySelectorAll(sels).forEach(function (node) {
node.style.display = node.style.display === "none" ? "" : "none";
});
}
});
}
Ich habe eine praktische Funktion erstellt, um bestimmte Elemente beim Drücken einer bestimmten Taste ein- oder auszublenden. Der Event-Handler sucht nach einer passenden Taste, findet alle Elemente, die einem Selektor entsprechen, und blendet sie je nach ihrem visuellen Zustand ein oder aus. Dabei wird dieselbe CSS-Eigenschaft (display) wie im Stylesheet verwendet, jedoch dynamisch per JavaScript implementiert.
Installieren und verwenden Sie die Erweiterung
Sobald alles vorbereitet ist, ist es an der Zeit, die Erweiterung zu installieren und auszuprobieren.
Öffnen Sie in Firefox about:debugging, wählen Sie in der Seitenleiste „Dieser Firefox“ aus und klicken Sie dann auf „Temporäres Add-on laden“. Wählen Sie eine beliebige Datei (Manifest-Datei oder Code-Datei) aus und öffnen Sie sie.
Öffnen Sie in Chrome chrome://extensions/, aktivieren Sie den Entwicklermodus über den Schalter oben rechts und klicken Sie anschließend oben links auf „Unkomprimierte Dateien laden“. Wählen Sie den Ordner mit Ihren Erweiterungsdateien aus.
Die Erweiterung sollte auf jeder Wikipedia-Seite funktionieren. Das Erscheinungsbild der Seite sollte sich wie folgt ändern:
Nach der Installation und Aktivierung der Erweiterung sollte die Wikipedia-Seite wie folgt aussehen, wobei der prominente Hinweis ausgeblendet und die Fußnotenlinks in einer helleren Farbe dargestellt werden:
Die Entwicklung einer Browsererweiterung, die mit mehreren Browsern kompatibel ist, ermöglicht einen breiteren Zugang und eine bessere Benutzererfahrung ohne zusätzliche Komplexität. Die Einhaltung gängiger Standards von Anfang an reduziert den Aufwand und erhöht die Erfolgswahrscheinlichkeit der Erweiterung.
Beginnen Sie mit einem kleinen Schritt, testen Sie die Erweiterung auf mehr als einem Browser und erweitern Sie schrittweise ihren Funktionsumfang, um eine hohe Qualität und eine breitere Verbreitung unter den Nutzern zu gewährleisten.
