So erstellen Sie eine Chrome-Erweiterung

Heutzutage scheint es für alles eine Erweiterung zu geben, aber es ist nicht unmöglich, eine Browsererweiterung für einen bestimmten Zweck oder Bedarf zu finden. Wie kompliziert ist es, einen zu bauen? Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung zum Erstellen einer Chrome-Erweiterung:

Schritt 1: Anforderungen

Zwei Anmerkungen vor dem Start:

• Obwohl dies für die meisten offensichtlich erscheinen mag, ist es wichtig, Ihre Erweiterung in Google Chrome selbst zu erstellen.
• Testen Sie Ihre Arbeit, während Sie diesen Prozess durchlaufen. Es ist einfacher, Codierungsfehler unterwegs zu beheben, als umzukehren, wenn Sie fertig sind.

Bevor Sie beginnen, müssen Sie sich für die Funktion der Erweiterung entscheiden. Welchem ​​Zweck soll es dienen? Konzentrieren Sie sich auf die Interessen und Probleme Ihres Publikums, damit Sie klar definieren können, welche Art von Lösung Sie anbieten können.

Sobald Sie dies abgedeckt haben, überprüfen Sie das Design. Jede in den Google Chrome Store hochgeladene Erweiterung erfordert ein Symbol. Sie können es selbst erstellen oder das Design auslagern. Sobald Sie Ihr Symbol haben, können Sie mit dem Erstellen Ihrer Erweiterung beginnen.

Schritt 2: Bausteine

Wie jede Software besteht die Erweiterung aus mehreren Dateien. Als erstes müssen Sie also ein Verzeichnis erstellen, das alle Ihre Erweiterungsdateien hostet.

Ein Verzeichnis ist ein Ort zum Speichern von Dateien auf Ihrem Computer. Jedes Betriebssystem mit einer hierarchischen Dateistruktur, wie MS-DOS, OS/2 oder Linux, hat ein Dateiverzeichnis.

Warum brauchen Sie ein Verzeichnis? Wenn Chrome also Ihre Erweiterung lädt, können Sie die Dateien aus dem richtigen Ordner ziehen.

manifest.json-Datei

Als Nächstes müssen Sie die Manifestdatei Ihrer Erweiterung erstellen.

Ein Manifest ist eine Datei, die dem Betriebssystem mitteilt, wie ein Programm gestartet werden soll . Einstellungen in einer Manifestdatei werden immer mithilfe der XML-Sprache angegeben. Manifeste werden häufig verwendet, um Einstellungen wie Berechtigungen einzuschließen und dem Betriebssystem mitzuteilen, welche Version einer DLL das Programm verwenden wird.

Im Fall Ihrer Erweiterung gibt die Manifestdatei Chrome die Anweisungen zum Laden der Erweiterung.

Erstellen Ihrer Manifestdatei

Erstellen Sie in Chrome eine Datei namens manifest.json und fügen Sie sie Ihrem Verzeichnis hinzu. Fügen Sie Ihrer Manifestdatei den benötigten Code hinzu. Fügen Sie dann den folgenden Code hinzu:

{

„name“: „Erste-Schritte-Beispiel“,

„description“: „Erstellen Sie eine Erweiterung!“,

„Version“: „1.0“,

„manifest_version“: 3

}

Die Berechtigungen der Erweiterung hängen von der Erweiterungsfunktion ab. Eine Liste aller Berechtigungen und ihrer Bedeutung finden Sie in den Dokumenten zur Chrome-Erweiterung.

Pop-up-Seite

Wenn Ihre Website ein Popup benötigt, sollten Sie es Ihrem Code hinzufügen.

1. Weisen Sie den Namen der Datei mit browser_action in der Manifest-Datei zu.
2. Erstellen Sie die Popup-Seite mit HTML oder CSS. Sie können Bilder mit SVG hinzufügen.
3. Verwenden Sie JavaScript, um dem Popup Funktionalität hinzuzufügen. Bestimmen Sie die JavaScript-Datei und verknüpfen Sie sie in Ihrer Popup-Datei. Zum Beispiel:
4. Sie können Funktionen erstellen und haben Zugriff auf das Popup-DOM. Hier ist ein Beispiel, wie es geht.

document.addEventListener(“DOMContentLoaded”, () => {

var button = document.getElementById("submit")

button.addEventListener(“click”, (e) => {

console.log(e)

})

})

Inhaltsskript

Der Abschnitt content_script definiert, wo die Erweiterung funktionieren soll. Wenn Sie möchten, dass die Erweiterung auf allen Websites funktioniert, sollten Sie Folgendes schreiben:

„Inhaltsskripte“: [

{

„Übereinstimmungen“: [“<all_urls>“],

„css“: [„Hintergrund.css“],

„js“: [„Hintergrund.js“]

}

],

Wenn Sie möchten, dass die Erweiterung auf einer einzelnen Website wie beispielsweise Facebook funktioniert, sollten Sie [“https://facebook.com/*”] hinzufügen.

Seite Veranstaltungen

Ein Ereignis ist ein Objekt, mit dem Sie benachrichtigt werden können, wenn etwas Interessantes passiert. Sie können beispielsweise das Ereignis chrome.alarms.onAlarm verwenden, um benachrichtigt zu werden, wenn ein Alarm fällig ist.

chrome.alarms.onAlarm.addListener(Funktion(Alarm) {

appendToLog('alarms.onAlarm –'

+ 'name:' + alarm.name

+ 'geplanteZeit: ' + alarm.geplanteZeit);

});

Weitere Informationen zu Veranstaltungsseiten finden Sie in den Chrome-Dokumenten

Inhalt.js

Inhaltsskripte sind JavaScript-Dateien, die Teil von Browsererweiterungen sind. Inhaltsskripte haben mehr Rechte als normales Javascript.

Schritt 3: Öffnen Sie eine Popup-HTML-Datei aus dem Chrome-Erweiterungs-Popup

Wenn Sie eine Schaltfläche in Ihrer nativen Chrome-Erweiterung platzieren, können Sie beim Klicken auf diese Schaltfläche ein weiteres HTML-Popup mit anderem Inhalt erstellen. Hier ist ein Beispiel für StackOverflow:

Die manifest.json:

{

„Name“: „Spickzettel“,

„Beschreibung“: „Cheatsheet-Erweiterung“,

„Version“: „1.0“,

„manifest_version“: 3,

"Hintergrund": {

„service_worker“: „background.js“

},

„Berechtigungen“: [„Speicher“, „aktive Registerkarte“, „Skripting“, „Registerkarten“],

"Handlung": {

„default_popup“: „popup.html“,

„Standard_Symbol“: {

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

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

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

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

}

},

„Symbole“: {

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

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

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

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

}

}

Die popup.html:

<!DOCTYPE html>

<html>

<Kopf>

<link rel="stylesheet" href="style.css">

</head>

<Körper>

<button id="git_Sheet">Git-Sheet</button>

<script src="popup.js"></script>

</body>

</html>

Und die popup.js-Datei:

let gitSheet = document.getElementById("git_Sheet"); gitSheet.addEventListener(“click”, async() => { let

= warte auf chrome.tabs.query ({ aktiv: wahr, aktuelles Fenster: wahr }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: ShowGitSheet, }); }); function ShowGitSheet() { chrome.browserAction.openPopup({ popup: „git_popup.html“ }); }

Tipp: Verwenden Sie chrome.windows.create({url: '…', type: 'popup'}) anstelle von chrome.browserAction.openPopup, wenn Sie möchten, dass ein anderer Browser als Firefox Ihre Erweiterung ausführt.

Schritt 4: Suchen Sie nach der Installation Ihrer Erweiterung in Chrome nach Fehlern

Sobald Sie die Erstellungsphase abgeschlossen haben, ist es an der Zeit, die Erweiterung zu testen, um sicherzustellen, dass Chrome sie ausführt. Führen Sie die folgenden Schritte aus, um Ihre Erweiterung zu laden und mit dem Debuggen zu beginnen:

• Öffnen Sie chrome://extensions in Ihrem Google Chrome-Browser.
• Stellen Sie den Entwicklermodus ein, indem Sie das Kästchen Entwickler in der oberen rechten Ecke aktivieren.
• Klicken Sie auf „Entpackte Erweiterung laden“ und Sie sehen Ihre Datei mit einer Option, um sie auszuwählen.
• Wenn Ihre Erweiterung gültig ist, sollte sie sofort geladen werden, wenn Sie sie auswählen.
• Wenn es ungültig ist, sehen Sie eine Fehlermeldung.

Beim Schreiben von Code sind die häufigsten Fehler Syntaxfehler. Überprüfen Sie also zuerst noch einmal, ob alle Ihre Kommas und Klammern an der richtigen Stelle und im richtigen Format sind.

Stellen Sie dann sicher, dass Sie das Kontrollkästchen "Aktiviert" aktivieren, damit Sie sehen können, dass es ausgeführt wird.

Schritt 5: Fügen Sie der Aktion Logik hinzu.

Eine gute Faustregel ist, die API-Aufrufe im Hintergrundskript und die DOM-Manipulation im Inhaltsskript zu platzieren. Sehen wir uns ein Beispiel für das Hinzufügen eines Hintergrundskripts an:

1. Erstellen Sie die Datei namens background.js im Erweiterungsverzeichnis
2. Registrieren Sie das Hintergrundskript im Manifest

{

„name“: „Erste-Schritte-Beispiel“,

„description“: „Erstellen Sie eine Erweiterung!“,

„Version“: „1.0“,

„manifest_version“: 3,

"Hintergrund": {

„service_worker“: „background.js“

}

}

Chrome kann die Datei nach zusätzlichen Anweisungen scannen, wenn Sie die Erweiterung neu laden, z. B. Ereignisse.

1. Fügen Sie das Skript hinzu. Es wird je nach Zweck Ihrer Erweiterung unterschiedlich sein.

Damit Ihre Erweiterung nach der Installation Informationen erhält, sollten Sie ein Listening-Ereignis für runtime.onInstalled in das Hintergrundskript einfügen. Dann stellt der onInstalled-Listener mithilfe der Speicher-API einen Wert ein, damit die Erweiterungskomponenten auf den Wert zugreifen und ihn aktualisieren können.

// hintergrund.js

let color = '#3aa757';

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

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

console.log('Standard-Hintergrundfarbe auf %cgreen gesetzt', `color: ${color}`);

});

Erfahren Sie mehr über die nächsten Schritte auf der Entwicklerseite von Google Chrome. Dazu gehört, wie Sie Ihre Benutzeroberfläche und Ihr Symbol erstellen und eine Ebenenlogik einrichten, um die Benutzerinteraktion zu verbessern.

Um mit dem Entwerfen Ihrer Benutzeroberfläche zu beginnen, müssen Sie wie üblich eine Browseraktion in Ihrer Manifestdatei registrieren. Wenn Sie beispielsweise ein Popup verwenden, könnte der Code so aussehen:

<!DOCTYPE html>

<html>

<Kopf>

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

</head>

<Körper>

<button id="changeColor"></button>

</body>

</html>

Was sind die Anforderungen an ein Symbol? Für Bilder 16×16 und 32×32 Pixel. Alle Symbole sollten quadratisch sein.

Vergessen Sie nicht, Ihre Logikskripts hinzuzufügen, damit Ihre Erweiterung weiß, was zu tun ist. Sie können es beispielsweise am Ende des popup.js-Skripts hinzufügen.

// Wenn auf die Schaltfläche geklickt wird, fügen Sie setPageBackgroundColor in die aktuelle Seite ein

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

Lassen

= warte auf chrome.tabs.query ({ aktiv: wahr, aktuelles Fenster: wahr });

chrome.scripting.executeScript({

Ziel: { tabId: tab.id },

Funktion: setPageBackgroundColor,

});

});

// Der Körper dieser Funktion wird als Inhaltsskript innerhalb der ausgeführt

// aktuelle Seite

Funktion setPageBackgroundColor() {

chrome.storage.sync.get("Farbe", ({Farbe}) => {

document.body.style.backgroundColor = Farbe;

});

}

Funktion setPageBackgroundColor() {

chrome.storage.sync.get("Farbe", ({Farbe}) => {

document.body.style.backgroundColor = Farbe;

});

Schritt 6: Probieren Sie Ihre Erweiterung aus

Der nächste Schritt besteht logischerweise darin, die Erweiterung kontinuierlich zu testen, damit Sie sicherstellen können, dass alles so läuft, wie es sollte. Wenn Sie das Testen auslagern, nutzen Sie die Gelegenheit, um zu überprüfen, wie intuitiv die Benutzeroberfläche ist. Passen Sie Ihre Skripte gemäß den Testergebnissen an und testen Sie dann erneut.

Schritt 7: Senden Sie Ihre Erweiterung an den Chrome Web Store

Sobald Sie mit Ihrer Erweiterung zufrieden sind, können Sie zum Chrome Web Store gehen und sie einreichen.

Klicken Sie im Chrome Developer Store auf Neues Element und ziehen Sie dann die Projektdatei in den Uploader.

Chrome wird einige Fragen stellen, um Informationen zu seinen Berechtigungen anzufordern und warum sie benötigt werden.

Beispiele für Google Chrome-Erweiterungen

Es scheint für alles eine Erweiterung zu geben. Hier sind einige der nützlichsten:

• Auf Google Drive speichern
  Diese Erweiterung installiert ein kleines Symbol oben im Browser. Es sendet alles, was Sie durchsuchen, an Ihr Laufwerkskonto, damit Sie es später anzeigen können. Es funktioniert, indem Screenshots gemacht, Bilder, Audio oder Video gespeichert werden.
• Sortiert
  Dieses Plugin gibt Benutzern die Möglichkeit, ihre Posteingänge zu organisieren und zu priorisieren, was ihnen am wichtigsten ist. Es lässt sich in Google Mail integrieren und ermöglicht es Ihnen, Nachrichten per Drag-and-Drop in benutzerdefinierte Spalten zu verschieben.
• HTTPS überall
  Diese Erweiterung erhöht die Sicherheit Ihres Surfens, indem sie jede Website von http auf sicheres HTTPS ändert, daher ist sie verschlüsselt und sicher.
• Kekse sind mir egal
  Da jede Website Sie auffordert, den Cookies zuzustimmen, ist diese Erweiterung ein Lebensretter. Es mag nicht viel erscheinen, wird aber in Cookie-Popups auf die Schaltfläche „Zustimmen“ klicken. Es wird Ihnen Zeit sparen und Ihre Produktivität beschleunigen.
• Geschwindigkeitstest
  
  Mit dieser nützlichen Erweiterung können Sie unterwegs Ihre Verbindungsgeschwindigkeit überprüfen. Mit einer Desktop- und mobilen Version können Sie sicherstellen, dass Ihre Verbindung optimal ist, bevor Sie einen großen Anhang herunterladen oder ein Video streamen.
  Mit einem Klick führt Speedtest einen schnellen Verbindungstest in dem von Ihnen verwendeten Netzwerk durch.

Was kann Ihre Chrome-Erweiterung?

Benutzerdefinierte Erweiterungen sind Softwareprogramme, die eine einzelne Aufgabe ausführen. Davon abgesehen können Sie mehr als eine Funktionalität integrieren, aber denken Sie daran, dass alles funktionieren muss, um den gleichen Zweck zu erreichen.

Eine Chrome-Erweiterung funktioniert mithilfe von Seitenaktionen oder Browseraktionen:

Seitenaktion : Dies ist eine Aktion, die für bestimmte Seiten spezifisch ist.

Browseraktion : ist unabhängig davon relevant, auf welcher Seite Sie sich befinden.

Stellen Sie sicher, dass die Benutzeroberfläche benutzerfreundlich und einfach zu verstehen ist. Das endgültige Ergebnis wird ein Paket sein, das der Benutzer herunterladen und installieren kann.

5 erprobte Wege, um mit Ihrer Erweiterung Geld zu verdienen

Das Hauptziel Ihrer Erweiterung ist die Generierung von Einnahmen. Sobald Sie Ihre Zielgruppe definiert haben und wissen, wie sie die Erweiterung verwenden wird, können Sie eine Strategie entwickeln, wie Sie damit Geld verdienen können. Wir haben einen ausführlichen Leitfaden zur Monetarisierung von Erweiterungen geschrieben. Hier sind einige Höhepunkte:

1. In-App-Anzeigen

In-App-Werbung ist eine der häufigsten Möglichkeiten, Ihre Erweiterung zu monetarisieren. Dies sind Anzeigen, die einem Benutzer angezeigt werden, wenn er Ihre Erweiterung verwendet. Wenn Sie über In-App-Werbung über eine programmatische Lösung Geld verdienen, werden die Anzeigen rotiert. Im Gegensatz zu statischen Anzeigen hilft Ihnen diese Technik, Ihr Potenzial zu maximieren. Durch die Verwendung von Display-Werbung können Sie verschiedene Arten von Anzeigen mischen.

CodeFuel-Benutzer maximieren ihren Ertrag und vereinfachen ihre Monetarisierung, da der Dienst Anzeigen anzeigt, die für die Benutzerabsicht relevant sind.

2. Suchanzeigen

Dies ist eine Strategie, bei der Anzeigen auf einer Suchmaschinen-Ergebnisseite platziert werden. Da die Anzeigen erscheinen, wenn die Person nach etwas sucht, stört dies nicht die Benutzererfahrung. Sie können Suchanzeigen entsprechend der Benutzerabsicht anpassen, um die Benutzererfahrung zu verbessern.

3. In-App-Zahlungen und -Käufe

Bei diesem Modell ist die Erweiterung kostenlos, aber es gibt interne Funktionen, für die Sie Gebühren erheben. In-App-Käufe sind bei Spielanwendungen und Erweiterungen üblich. Der Benutzer entscheidet, ob er die zusätzlichen kostenpflichtigen Funktionen hinzufügen möchte.

4. Bezahlte Upgrades

In ähnlicher Weise wird bei diesem Modell die Basiserweiterung kostenlos angeboten, aber wenn der Benutzer eine Premium-Version wünscht, muss er für die aktualisierte Version bezahlen. Dies ist ein äußerst verbreitetes Modell, das von beliebten Erweiterungen wie Grammarly verwendet wird.

5. Freemium

Dies ist wahrscheinlich das beliebteste Monetarisierungsmodell für Erweiterungen und Anwendungen. Bei Freemium bieten Sie die Erweiterung kostenlos an. Wie verdient man damit Geld? Sie haben ein paar Möglichkeiten:

1. Sie können eine kostenlose Testversion für einen begrenzten Zeitraum anbieten.
2. Sie können eine kostenlose Basisversion mit eingeschränkten Funktionen anbieten.

Wenn Sie sich für dieses Modell entscheiden, sollten Sie dessen Einschränkungen berücksichtigen, da Google kostenpflichtige Erweiterungen eingestellt hat.

Die besten Sicherheitserweiterungen für Google Chrome:

Die meisten Menschen verwenden Chrome für alles, vom Einkaufen über die Suche bis hin zur Verwaltung ihrer Finanzkonten. All diese sensiblen Daten müssen geschützt werden. Es gibt mehrere Erweiterungen, die dafür sorgen können, dass diese Informationen sicher bleiben.

1. Avast Online-Sicherheit

Diese Erweiterung deckt die Sicherheit Ihres Surfens im Internet mit mehreren Funktionen ab. Sein Schutz vor Phishing-Angriffen scannt die Elemente jeder Webseite und erkennt, ob die Seite gefälscht oder verdächtig ist . Zu den weiteren wertvollen Funktionen gehört die Verwendung eines Community-Bewertungssystems zur Erkennung gefährlicher Websites.

2. Unschärfe

Es gibt eine Reihe von Passwort-Managern, die ein Muss sind, um sicherzustellen, dass alle Ihre Anmeldeinformationen sicher bleiben. Blur ist aufgrund seiner zusätzlichen Sicherheitsfunktionen eine der sichersten.

Blur verschlüsselt, speichert und verwaltet Ihre Passwörter . Es verbirgt auch Ihre Kreditkarteninformationen vor Einkaufsseiten und blockiert alle Arten von Trackern, einschließlich Nicht-Cookie-Trackern.

3. Klicken und reinigen

Es ist ein Reinigungstool, das alle Spuren Ihrer Online-Aktivitäten mit einem einzigen Klick löscht . Die Erweiterungsschaltfläche löscht den gesamten Online-Verlauf, Cookies, Cache, gespeicherte URLs, Web-SQL-Datenbanken und sogar temporäre Dateien. Click and Clean verfügt über eine integrierte Anti-Malware und kann sogar angepasst werden, um bestimmte Datentypen zu löschen.

4. Paniktaste

Diese Erweiterung hilft Ihnen, alles, was Sie geöffnet haben, mit einem einzigen Klick zu schließen. Dies ist hilfreich, wenn Sie an etwas Sensiblem arbeiten und sich eine unbefugte Person nähert. Wenn Sie auf die Panikschaltfläche klicken, werden alle Registerkarten sofort geschlossen und im Lesezeichenordner gespeichert.

5. Gespenster

Wenn Sie Ihre Online-Privatsphäre schützen oder die Kontrolle über Tracker erlangen möchten, kann diese Erweiterung die Lösung sein. Ghostery gibt Ihnen die Kontrolle über Tracker, sodass Sie entscheiden können, welche blockiert oder entblockt werden sollen. Es ermöglicht Ihnen auch, das Tracking eines bestimmten Typs zu blockieren.

Wie CodeFuel Ihnen helfen kann, den Ertrag Ihrer Erweiterung zu maximieren

Bringen Sie Ihre Erweiterungsmonetarisierung mit CodeFuel auf die nächste Stufe. Unsere vollständige Monetarisierungsplattform bietet absichtsbasierte Monetarisierung für Ihre digitalen Inhalte, einschließlich Browsererweiterungen.

Die Lösung nutzt maschinelles Lernen, um Benutzern hochrelevante Shopping- und Textanzeigen zu liefern, die je nach Absicht angepasst werden. Im Gegensatz zu anderen Lösungen bietet Ihnen CodeFuel die Flexibilität, mit mehreren Werbenetzwerken wie Bing und GoogleAdSense zu arbeiten. Beginnen Sie noch heute mit der Maximierung Ihres Extension-Ertrags mit CodeFuel.

Wie repariert man eine Chrome-Erweiterung, wenn sie einfriert?

Sie arbeiten mit Ihrer Chrome-Erweiterung und plötzlich friert der Browser ein. Wie frustrierend. Es ist nicht üblich, aber es passiert. Wenn Chrome abstürzt oder einfriert, erhalten Sie eine Fehlermeldung mit der Art des Fehlers, z. B. ein Proxy-Fehler oder die Webseite ist nicht verfügbar.

Die Chrome-Hilfe listet eine Reihe von Tipps zur Fehlerbehebung auf:

• Schließen Sie andere Tabs und Apps
• Starten Sie den Browser neu
• Auf Malware prüfen
• Testen Sie das Netzwerk auf Probleme
• Wenn Ihre Erweiterung einen Konflikt mit Chrome verursacht , befolgen Sie diese Anweisungen:

1. Klicken Sie oben rechts auf Mehr Einstellungen.
2. Klicken Sie unten auf Erweitert .
3. Klicken Sie auf Zurücksetzen und bereinigen Aktualisieren oder entfernen Sie inkompatible Anwendungen.
   Wenn Sie diese Option nicht sehen, gibt es keine problematische Anwendung.
4. Entscheiden Sie, ob Sie jede App aus der Liste aktualisieren oder entfernen möchten.
   Öffnen Sie den App Store Ihres Computers und suchen Sie nach einem Update.

FAQ