Wie macht man eine Chrome-Erweiterung?

How to Build a Chrome Extension

Hast Du Dich schon mal so sehr bei einer Aufgabe festgefahren, dass Du Dir wünschtest, Du könntest diesen Prozess einfach automatisieren? Bist Du es leid, Zeit mit der Suche nach einer geeigneten Chrome-Erweiterung zu verschwenden, die am Ende doch nicht helfen?

Glücklicherweise können Chrome-Benutzer in nur acht einfachen Schritten eine eigene Chrome-Erweiterung erstellen.

Woher weiß ich das? Weil ich eine eigene Chrome-Erweiterung für Ubersuggest entwickelt habe, um die Keywordrecherche zu optimieren.

In diesem Beitrag zeigen ich Dir, wie man eine Chrome-Erweiterung erstellt, mit der man sich wiederholende Aufgaben besser bewältigt, um produktiver zu arbeiten.

Was ist eine Chrome-Erweiterung?

Chrome-Erweiterungen sind WebExtensions, die von Browsern unterstützt und gemeinsam weiterentwickelt werden können. Diese Erweiterungen können bestimmte Funktionen im Browser automatisieren, bestehende Verhaltensweisen ändern und die Nutzung aktueller Software verbessern. Es gibt sogar Chrome-Erweiterungen, die für die SEO eingesetzt werden können.

Chrome-Erweiterungen werden mit HTML-, JavaScript- und CSS-Skripten gebaut, sind also im Wesentlichen kleine Webseiten, die in den Chrome Store hochgeladen werden. Der einzige Unterschied zwischen einer Chrome-Erweiterung und einer normalen Webseite besteht darin, dass Erweiterungen eine Manifest-Datei enthalten, die ihnen eine bestimmte auszuführende Funktion zuweist.

Du kannst Dir Browser-Erweiterungen wie ein Code-Snippet vorstellen, das Deine Browser-Erfahrung verändert.

Mit der Erweiterung von Grammarly kannst Du beispielsweise noch während des Schreibens Texte bearbeiten und ändern. Die Erweiterung von LastPass fügt Deinem Browser Deinen Passwortmanager hinzu.

Hier sind 13 weitere nützliche Chrome-Erweiterungen.

Was kann eine Chrome-Erweiterung machen?

Benutzerdefinierte Erweiterungen können eine einzelne Aufgabe ausführen. Diese Aufgabe muss eng definiert und leicht verständlich sein, damit es funktioniert. Du kannst mehr als eine Komponente oder Funktionalitäten einbeziehen, solange alles auf ein einziges Ziel ausgerichtet ist.

Chrome-Erweiterungen verwenden entweder Page Action oder Browser Action. Eine Page Action ist eine Aktion, die nur auf bestimmten Seiten durchgeführt werden kann. Eine Browser Action kann auf jeder Seite ausgeführt werden.

Die Benutzeroberfläche muss benutzerfreundlich und unkompliziert sein. Sie kann aus einem einzelnen Symbol bestehen, ein gutes Beispiel dafür ist das GMail-Symbol, Du kannst aber auch eine ganze Seite überschreiben.

Die Datei wird dann als gezipptes .crx-Paket zur Verfügung gestellt, dass der Benutzer herunterladen und installieren kann.

Warum sollte man eine Chrome-Erweiterung erstellen?

Google Chrome ist der am weitesten genutzte Browser der Welt. Laut W3Counter hat Chrome 71,6 % des gesamten Marktanteils.

Du solltest die Erstellung einer Chrome-Erweiterung auch in Betracht ziehen, wenn Du Deinem Browser-Erlebnis eine einfache Aktion hinzufügen möchtest.

Der Vorteil von Chrome-Erweiterungen gegenüber regulären Anwendungen besteht darin, dass sie oft einfacher zu erstellen und zu warten sind. Da Chrome-Erweiterungen aus einer einzigen Funktion bestehen, erfordert ihre Erstellung weniger Zeit und geringe Vorkenntnisse. Es nimmt oft viel weniger Zeit in Anspruch als das Erstellen einer neuen Webseite.

Wenn Du Deinen Browser auf einfache und effektive Weise optimieren möchtest, ist eine Erweiterung vielleicht genau der richtige Weg.

Chrome-Erweiterungen können sogar Deinen Traffic verbessern, wie das untere Video zeigt.

Was macht eine erfolgreiche Chrome-Erweiterung aus?

Die Google Chrome-Erweiterung sollte eine bestimmte Aufgabe oder Funktionalität erleichtern und so Deine Produktivität verbessern.

Nehmen wir einfach mal an, Du betreibst einen E-Commerce-Web-Baukasten und recherchierst Mitbewerber. Mit der Koala Inspector-Erweiterung kannst Du sehen, welche Webseiten mit Shopify gebaut wurden. Du kannst auch sehen, welche Designvorlage verwendet wurde, ob Aktualisierungen vorgenommen wurden und Produktstatistiken einsehen.

Der News Feed Eradicator für Facebook kann Dir dabei helfen, Deine Produktivität zu steigern, indem er Deinen News Feed blockiert, damit Du Dich auf Deine Aufgaben konzentrieren kannst. Es handelt sich um eine einfache, aber effektive Funktion, um Deinen täglichen Arbeitsablauf zu optimieren.

Beide Erweiterungen führen eine einfache Funktion aus, die die Benutzererfahrung verbessert. Einfachheit sollte immer im Vordergrund stehen. Das ist das Geheimnis einer erfolgreichen Chrome-Erweiterung.

Die Schritt-für-Schritt-Anleitung zur Erstellung einer Chrome-Erweiterung

Jetzt bauen wir unsere Chrome-Erweiterung.

Du musst Deine Erweiterung in Google Chrome bauen. Das ist zwar offensichtlich, aber nicht jeder verwendet Chrome als Standardbrowser, darum erwähne ich es an dieser Stelle. Falls Du Chrome nicht regelmäßig verwendest, musst Du ihn erst installieren, bevor Du mit dem Bau beginnen kannst.

Prüfe Deine Arbeit zudem regelmäßig. Es ist viel einfacher, Fehler sofort zu beheben, als später, wenn die Erweiterung fertig ist.

Schritt Nr. 1: Überleg Dir, was die Erweiterung machen soll

Der erste Schritt besteht natürlich darin, die Funktion der Chrome-Erweiterung festzulegen. Was soll sie machen? Wie soll sie aussehen?

Wenn Du eine Erweiterung für Google Ads erstellen willst, musst Du Dir überlegen, welche Aufgabe sie ausführen soll.

Alle Erweiterungen, die in den Google Chrome Store hochgeladen werden, brauchen ein Symbol. Erstelle ein Symbol oder lagere diese Aufgabe an einen Designer aus, bevor Du mit der Arbeit beginnst.

Wenn Du Dich darauf geeinigt hast, was die Erweiterung tun und wie sie aussehen soll, kannst Du mit der Entwicklung beginnen. Im Folgenden erkläre ich, wie man eine Erweiterung erstellt, die die Hintergrundfarbe Deiner aktuellen Seite ändert. Dies soll als praktischen Beispiel dienen.

Schritt Nr. 2: Lege ein Verzeichnis für Deine Erweiterung an

Um eine Chrome-Erweiterung bauen zu können, musst Du zuerst ein neues Verzeichnis erstellen, in dem alle Dateien Deiner Erweiterung gespeichert werden. Dies ist wichtig, denn damit Chrome Dein Plug-in laden kann, muss es auf einen Ordner verweisen, der Deine Erweiterungsdateien enthält. Du musst alle Dateien, die Du für Deine Erweiterung benötigen, in dieses Verzeichnis einfügen.

Schritt Nr. 3: Baue die Manifest-Datei Deiner Erweiterung

Jetzt musst Du die Manifest-Datei Deiner Erweiterung erstellen. Diese Datei teilt Chrome mit, wie die Erweiterung geladen werden muss.

Erstelle mithilfe eines Texteditors eine JSON-Datei (JavaScript Object Notation) und füge sie Deinem Verzeichnis hinzu. Jetzt fehlt nur noch der benötigte Code hinzu. In unserem Fall würde der Code so aussehen:

{

“name”: “Getting Started Example”,

“description”: “Build an Extension!”,

“version”: “1.0”,

“manifest_version”: 3

}

Speichere die Datei anschließend im Ordner der Erweiterung als manifest.json.

Schritt Nr. 4: Lade Deine Erweiterung in Chrome hoch und prüfe sie auf Fehler

Jetzt musst Du Deine Erweiterung testen, um sicherzustellen, dass sie von Chrome ausgeführt werden kann. Befolge dazu die folgenden Schritte:

  1. Rufe chrome://extensions auf.
  2. Aktiviere rechts oben den Entwicklermodus.
  3. Klicke auf “Entpackte Erweiterung laden”.
  4. Suche den Ordner für die Erweiterung und wähle ihn aus.
example of google chrome extension loading screen

Wenn Deine Erweiterung gültig ist, sollte sie sofort geladen werden. Falls sie ungültig ist, siehst Du eine Fehlermeldung. Suche in diesem Fall nach Fehlern, korrigiere sie und lade Deine Erweiterung erneut. Wiederhole den Vorgang gegebenenfalls, bis sie wie gewünscht funktioniert.

Die häufigsten Fehler sind Syntaxfehler. Überprüfe alle Kommata und Klammern und stelle sicher, dass sie richtig formatiert sind. Aktiviere das Kontrollkästchen “Aktiviert” neben Deiner Erweiterung, damit Du sehen kannst, wie sie in der Live-Wiedergabe funktioniert.

Schritt Nr. 5: Entwickle ein Hintergrundskript

Jetzt brauchst Du ein Hintergrundskript, damit die Erweiterung weiß, was sie tun soll.

Lege zuerst eine Datei mit dem Namen background.js in Deinem Erweiterungsverzeichnis an und füge dann Dein Skript hinzu. Da wir die Hintergrundfarbe ändern wollen, verwenden wir dieses Skript:

{

“name”: “Getting Started Example”,

“description”: “Build an Extension!”,

“version”: “1.0”,

“manifest_version”: 3,

“background”: {

“service_worker”: “background.js”

}

}

Diese Datei weist Chrome darauf hin, dass nach weiteren Anweisungen gesucht werden soll.

Unsere Erweiterung erfordert ein Listening-Event für runtime.onInstalled im Hintergrundskript. Die Erweiterung legt innerhalb des onInstall-Listeners einen Wert mit der Speicher-API fest, dadurch können mehrere Erweiterungskomponenten diesen Wert ausführen und bearbeiten.

let color = ‘#3aa757’;

chrome.runtime.onInstalled.addListener(() => {

chrome.storage.sync.set({ color });

console.log(‘Default background color set to %cgreen’, `color: ${color}`);

});

Die meisten APIs müssen im Feld „Berechtigungen“ Deines Manifests registriert werden. In etwa so:

{

“name”: “Getting Started Example”,

“description”: “Build an Extension!”,

“version”: “1.0”,

“manifest_version”: 3,

“background”: {

“service_worker”: “background.js”

},

“permissions”: [“storage”]

}

Öffne die Verwaltungsoberfläche Deiner Erweiterung und klick auf “Neu laden”. Du solltest nun ein neues Feld für Inspect views sehen. Der blaue Link liest die Hintergrundseite.

example of chrome extension builder interface

Klick auf den Link, um das das Protokoll des Hintergrundskripts zu sehen. Dieses lautet: „Standardhintergrundfarbe auf Grün festgelegt“.

Du kannst auch ein Content-Skript hinzufügen, um Deine Skripte seitenweise auszuführen. Content-Skripte sollten direkt in die Manifestdatei eingefügt werden.

Schritt Nr. 6: Erstelle eine Benutzeroberfläche

Deine Erweiterung braucht eine Benutzeroberfläche. Diese kann verschiedene Formen annehmen, von Pop-ups bis hin zu Tooltipps.

Um Deine Benutzeroberfläche zu entwerfen, musst Du zuerst eine Browseraktion im Manifest registrieren. Für unser Beispiel möchte ich ein Pop-up verwenden. Das sieht dann so aus:

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”button.css”>

</head>

<body>

<button id=”changeColor”></button>

</body>

</html>

Du musst diesen Code in Deinem Manifest deklarieren, damit er funktioniert. Füge dem Manifest eine Aktion hinzu und lege popup.html als default_popup der Aktion fest.

Das Skript sollte so aussehen:

{

“name”: “Getting Started Example”,

“description”: “Build an Extension!”,

“version”: “1.0”,

“manifest_version”: 3,

“background”: {

“service_worker”: “background.js”

},

“permissions”: [“storage”],

“action”: {

“default_popup”: “popup.html”

}

}

Dieses spezielle Pop-up verweist auf ein CSS-Skript, sodass wir dem Verzeichnis eine weitere Datei hinzufügen müssen. Benenne die Datei und füge Folgendes hinzu:

button {

height: 30px;

width: 30px;

outline: none;

margin: 10px;

border: none;

border-radius: 2px;

}

button.current {

box-shadow: 0 0 0 2px white,

0 0 0 4px black;

}

Wir möchten die Schaltflächen unseres Pop-ups farbig gestalten. Diese Farbe wird später auch für den Hintergrund verwendet. Dafür erstellen wir eine popup.js-Datei mit dem folgenden Code und fügen sie dem Verzeichnis hinzu.

// Initialize button with user’s preferred color

let changeColor = document.getElementById(“changeColor”);

chrome.storage.sync.get(“color”, ({ color }) => {

changeColor.style.backgroundColor = color;

});

So wird die Schaltfläche aus popup.html abgerufen und der Farbwert angefordert. Füge nun ein Skript-Tag für popup.js in popup.html ein:

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”button.css”>

</head>

<body>

<button id=”changeColor”></button>

http://popup.js

</body>

</html>

Jetzt kannst Du Badges hinzufügen, um den Status Deiner Erweiterung anzuzeigen. Das Badge kann dem Benutzer beispielsweise mitteilen, ob die Erweiterung aktiv ist oder ausgeschaltet wurde.

an icon showing on funtionality and a water drop below it

Toolbar-Icons können als Aktion unter default_icons hinzugefügt werden. Platziere dafür beliebige Bilder in Deinem Verzeichnis und teile der Erweiterung mit, wie die Bilder verwendet werden sollen.

{

“name”: “Getting Started Example”,

“description”: “Build an Extension!”,

“version”: “1.0”,

“manifest_version”: 3,

“background”: {

“service_worker”: “background.js”

},

“permissions”: [“storage”],

“action”: {

“default_popup”: “popup.html”,

“default_icon”: {

“16”: “/images/get_started16.png”,

“32”: “/images/get_started32.png”,

“48”: “/images/get_started48.png”,

“128”: “/images/get_started128.png”

}

}

}

Für Bilder werden die Größen 16×16 und 32×32 empfohlen. Alle Symbole sollten quadratisch sein, sonst könnten sie verzerrt dargestellt werden. Wenn Du kein Symbol angibst, fügt Chrome ein Standardsymbol hinzu.

Halte die Benutzeroberfläche Deiner Chrome-Erweiterung möglichst einfach und benutzerfreundlich, denn sie soll das Browser-Erlebnis verbessern, nicht ablenken.

Bevor wir fortfahren, laden wie die Erweiterung noch mal neu und stellen sicher, dass alles funktioniert.

Schritt Nr. 7: Füge etwas Logik hinzu

Logik verbessert die Interaktion mit der Benutzeroberfläche. Füge Deiner Benutzeroberfläche nach Bedarf verschiedene Logic-Skripte hinzu.

Logic kann Deine Erweiterung anweisen, bestimmte Aktionen auszuführen, z. B. eine bestimmte Aktion auslösen, wenn der Nutzer auf eine Schaltfläche klickt.

Wenn Du das Skript popup.js verwendet hast, müsstest Du das Logic-Skript am Ende einfügen. Das würde dann so aussehen:

// When the button is clicked, inject setPageBackgroundColor into current page

changeColor.addEventListener(“click”, async () => {

 let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

 chrome.scripting.executeScript({

 target: { tabId: tab.id },

 function: setPageBackgroundColor,

 });

});

// The body of this function will be executed as a content script inside the

// current page

function setPageBackgroundColor() {

 chrome.storage.sync.get(“color”, ({ color }) => {

 document.body.style.backgroundColor = color;

 });

}

function setPageBackgroundColor() {

chrome.storage.sync.get(“color”, ({ color }) => {

document.body.style.backgroundColor = color;

});

}

Dieser Code löst ein programmgesteuertes Content-Skript aus. Dadurch bekommt der Hintergrund der Seite dieselbe Farbe wie die der zuvor hinzugefügten Schaltfläche.

Deine Erweiterung sollte nun voll funktionsfähig sein. Alles Weitere wäre Schnickschnack.

Schritt Nr. 8: Teste Deine Erweiterung

Genau wie bei A/B-Tests im Marketing solltest Du Deine Erweiterung ebenfalls regelmäßig testen, um sicherzustellen, dass alles wie gewünscht funktioniert.

Du kannst diesen Test selbst durchführen oder Freunde um Hilfe bitten. Falls der Test von einem Freund oder Bekannten durchgeführt wird, solltest Du ihm vorher keine genauen Anweisungen geben, um zu prüfen, ob die Benutzerführung verständlich ist. Nimm bei Bedarf Änderungen vor und teste die Erweiterung dann erneut.

Du kannst Deine Erweiterung auch nach dem Launch kontinuierlich optimieren und verbessern. Auf diese Weise habe ich die Ubersuggest Chrome-Erweiterung 2.0 entwickelt.

Wenn Du zufrieden bist, ist Deine Erweiterung einsatzbereit.

Kann ich das Erstellen einer Chrome-Erweiterung üben?

Sobald du die Erweiterung in den Chrome Store hochgeladen hast, ist sie live und kann genutzt werden. Wenn Du sie nicht öffentlich zugänglich machen willst, kannst Du ein GitHub-Repository erstellen, damit Benutzer Deine Erweiterung klonen können. Dazu musst Du ihnen jedoch Zugriff auf den Quellcode gewähren, dies solltest Du also in Betracht ziehen, bevor Du etwas auf GitHub hochlädst.

Du kannst auch mit Open-Source-Beispielen experimentieren, bevor Du selbst eine Erweiterung erstellst. Du findest zahlreiche Chrome-Erweiterungen auf Google GitHub.

Fazit

Die Erstellung einer benutzerdefinierten Chrome-Erweiterung ist eine großartige Möglichkeit, um die Funktionalität Deines Browsers zu verbessern und eine optimale Nutzererfahrung zu gewährleisten. Darüber hinaus kann eine Erweiterung mehr Traffic auf Deine Webseite lenken, was zu neuen Leads führen kann.

Einige der besten Chrome-Erweiterungen wurden von Menschen wie Dir erstellt. Vergiss das nicht! Es ist zwar nicht einfach, eine Erweiterung dorthin zu bringen, wo man sie haben will, es lohnt sich aber, wenn man dadurch aufregende neue Funktion bekommt, die man seinen Freunden – und potenziellen Kunden – zeigen kann.

Hast Du schon mal eine Chrome-Erweiterung gebaut?

Teilen