So erstellen Sie Chrome-Erweiterungen von Grund auf

Wenn du es wünschst Hinzufügen oder Ändern einiger Funktionen In Google Chrome müssen Sie eine Erweiterung verwenden. Sie können zwar eine Erweiterung aus dem Chrome Web Store herunterladen, benötigen jedoch manchmal eine bestimmte Funktionalität, die Sie in keiner vorhandenen Erweiterung finden können.

Die gute Nachricht ist, dass Sie eine eigene Erweiterung erstellen können, um die erforderliche Funktionalität hinzuzufügen oder zu ändern, oder ein neues Add-On oder eine neue App für Google Chrome erstellen können, die Sie später verwenden können an andere Benutzer verteilen den Chrome Web Store verwenden.

Im Folgenden zeige ich Ihnen das einfachste Möglichkeit, eine Erweiterung zu erstellen. Wenn Sie über Kenntnisse in der Webentwicklung (HTML, CSS und JS) verfügen, werden Sie sich wie zu Hause fühlen. Wenn nicht, schauen Sie sich zuerst diese Kanäle an lernen Sie die Grundlagen der Webentwicklung, dann weiter unten.

Voraussetzungen

Bevor Sie mit diesem Lernprogramm beginnen, müssen Sie die folgenden Voraussetzungen erfüllen.

1. Sie müssen mit vertraut sein HTML, CSS und JavaScript. [Ressourcen überprüfen]
2. Sie müssen eine haben Code-Editor die Erweiterung schreiben. [Editoren vergleichen]
3. (Optional) Wenn Sie Ihre Erweiterung an andere Benutzer verteilen möchten, müssen Sie über ein Entwicklerkonto im Chrome Web Store. [Ein Konto erstellen]

Hinweis: Google fordert Sie auf, eine geringe Gebühr für die Erstellung eines Entwicklerkontos im Chrome Web Store zu zahlen.

Erstellen Sie eine Erweiterung

In diesem Tutorial werde ich den Prozess der Erstellung einer To-Do-Erweiterung für Google Chrome. Es wird ein Dienstprogramm sein (wie unten gezeigt), um die wesentlichen Komponenten und die Fähigkeiten der Erweiterungen zu demonstrieren.

1. Holen Sie sich eine Vorlage

Google Chrome erfordert wie jede andere Plattform auch seine Erweiterungen, um eine festgelegte Struktur zu haben, was für Anfänger komplex erscheinen kann. Aus diesem Grund ist es gut, eine Boilerplate-Vorlage für eine Erweiterung zu erhalten, die alle Notwendigkeiten bietet.

Extensionizr ist der beste Boilerplate-Generator für Chromerweiterungen. Hier können Sie einen der angegebenen Erweiterungstypen auswählen - Browseraktion (eine Aktion für alle Seiten oder den Browser), Seitenaktion (eine Aktion für die aktuelle Seite) oder versteckte Erweiterung (eine Hintergrundaktion, die normalerweise in der vorderen Benutzeroberfläche verborgen ist).

Darüber hinaus bietet es verschiedene Feinabstimmungsoptionen an erforderliche Add-Ons, Berechtigungen einschließen / ausschließen, usw. Sie müssen auswählen “Browseraktion” als Erweiterungstyp und “Kein Hintergrund” als Hintergrundseite für dieses Tutorial.

Wenn Sie alle gewünschten Optionen zum Erstellen Ihrer Beispielerweiterung ausgewählt haben, drücken Sie die Taste “Lade es herunter!” Schaltfläche in Extensionizr. Endlich, entpacken Sie das Archiv (.zip) in ein Verzeichnis und öffnen Sie Ihren Code-Editor, um die Erweiterung zu schreiben.

2. Kodieren Sie die Erweiterung

Nachdem Sie die Vorlage heruntergeladen und extrahiert haben, wird eine Verzeichnisstruktur angezeigt (siehe Abbildung unten). Die Vorlage ist übersichtlich angeordnet, und Sie müssen wissen, dass die wichtigste Datei ist “manifest.json“.

Lernen Sie auch andere Dateien und Ordner in diesem Verzeichnis kennen:

1. _locales: Es ist gewohnt Sprachinformationen speichern für eine mehrsprachige App.
2. css: Es dient zum Speichern von Front-End-Bibliotheken von Drittanbietern wie Bootstrap 4.
3. Icons: Es ist entworfen, um Icons für Ihre Erweiterung in verschiedenen Größen zu haben.
4. js: Es ist praktisch zu speichern Back-End-Bibliotheken von Drittanbietern wie jQuery 3.
5. src: Es speichert den eigentlichen Code, den Sie für Ihre Erweiterung schreiben.

manifest.json

Es enthält die grundlegende Metadaten zu Ihrer App, Dies definiert die Details Ihrer App für den Browser. Sie können ihn bearbeiten, um den Namen, die Beschreibung, die Website, das Symbol usw. Ihrer Nebenstelle sowie bestimmte Details festzulegen Browseraktionen und Berechtigungen.

Im folgenden Code werden Sie beispielsweise feststellen, dass ich den Namen, die Beschreibung und die homepage_url zusammen mit default_title unter browser_action geändert habe. Außerdem habe ich hinzugefügt “Lager” unter Erlaubnis da wir Daten in unserer Erweiterung speichern müssen.

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "Einfache To-Do-App für alle.", "homepage_url": " https://go.aksingh.net/todoizr "," icons ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 .png "," default_locale ":" de "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - Vereinfachte Aufgaben "," default_popup ":" src / browser_action / browser_action.html "," Berechtigungen ": [" Speicher "] 

src \ browser_action

Dieses Verzeichnis enthält den Code für die Browseraktion. In unserem Fall werden wir kodieren Sie das Popup-Fenster Wird beim Klicken auf das Erweiterungssymbol im Browser angezeigt. Unsere Erweiterung ermöglicht Benutzern das Hinzufügen und Anzeigen von Aufgabenelementen im Popup.

Hinweis: Sie können jederzeit mit dem Code beginnen, indem Sie dieses Repository klonen.

Anfangscode aus der Vorlage

Obwohl dieses Verzeichnis nur aus einer HTML-Datei bestand, die über den gesamten Code verfügte, habe ich mich aus Gründen der Übersichtlichkeit in drei separate Dateien aufgeteilt. Das heißt, die HTML-Datei heißt “browser_action.html” hat jetzt folgenden Code:

Außerdem hat die Style-Datei den Namen “browser_action.css” hat den folgenden Inhalt während die JavaScript-Datei benannt wird “browser_action.js” ist momentan leer.

 #mainPopup padding: 10px; Höhe: 200px; Breite: 400px; Schriftfamilie: Helvetica, Ubuntu, Arial, Serifenlos;  h1 font-size: 2em;  

Entwerfen Sie die Popup-Oberfläche

Nachdem Sie das ursprüngliche Projekt eingerichtet haben, lassen Sie uns zunächst die Oberfläche des Popup-Fensters entwerfen. ich habe Richten Sie das Interface minimalistisch ein, Der Name wird oben angezeigt, gefolgt von einem Formular zum Hinzufügen von Aufgaben und einem Bereich darunter, um die hinzugefügten Elemente anzuzeigen. Es ist inspiriert von dem simplen Design von “Formularstil 5“.

Im folgenden Code habe ich zwei Divs hinzugefügt - eines für die Anzeige des Formulars zum Hinzufügen eines To-Do-Elements und das andere für die Anzeige der Liste der bereits hinzugefügten To-Do-Elemente. Das heißt, der neue Code für “browser_action.html” ist wie folgt:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Und die Stildatei “browser_action.css” hat jetzt folgenden Code:

 @import url ("./ form_style_5.css"); #mainPopup height: 200px; Breite: 300px; Schriftfamilie: Helvetica, Ubuntu, Arial, Serifenlos;  / * Aufgabenformular * / .form-style-5 margin: auto; Polsterung: 0px 20px;  .form-style-5: first-child background: none;  .form-style-5 h1 color: # 308ce3; Schriftgröße: 20px; Text ausrichten: Mitte;  .form-style-5 Eingabe [Typ = "Text"] Breite: Auto; Schwimmer: links; Rand unten: unset;  .form-style-5 input [type = "button"] background: # 308ce3; Breite: Auto; schweben rechts; Polsterung: 7px; Grenze: keine; Grenzradius: 4px; Schriftgröße: 14px;  .form-style-5 input [type = "button"]: hover background: # 3868d5;  / * To-Do-Artikelliste * / .form-style-5: last-child height: erben; Rand unten: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li font-size: 14px;  

Zuletzt die Style-Datei eines Drittanbieters “form_style_5.css” hat den untenstehenden Inhalt. Es wird einfach von seiner Website übernommen, um das Design unserer Erweiterung zu inspirieren.

 / * Form Style 5 von Sanwebe.com * / / * https://www.sanwebe.com/2018/08/css-html-forms-designs * / .form-style-5 max-width: 500px; Polsterung: 10px 20px; Hintergrund: # f4f7f8; Marge: 10px auto; Polsterung: 20px; Hintergrund: # f4f7f8; Grenzradius: 8px; Schriftfamilie: Georgia, "Times New Roman", Times, Serife;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; Rand unten: 10px;  .form-style-5 label display: block; Rand unten: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], .form-style-5 input [type = "datetime"], .form-style -5 Eingabe [Typ = "E-Mail"], Form-Style-5 Eingabe [Typ = "Nummer"], Form-Style-5 Eingabe [Typ = "Suche"], Form-Style-5 Eingabe [Typ = "time"], .form-style-5 input [type = "url"], .form-style-5-Textbereich, .form-style-5 select font-family: Georgia, "Times New Roman", Times serif; Hintergrund: rgba (255, 255, 255, .1); Grenze: keine; Grenzradius: 4px; Schriftgröße: 16px; Marge: 0; Umriss: 0; Polsterung: 7px; Breite: 100%; Box-Dimensionierung: Border-Box; -webkit-box-dimensionierung: border-box; -moz-box-dimensionierung: border-box; Hintergrundfarbe: # e8eeef; Farbe: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) Einfügung; Box-Schatten: 0 1px 0 rgba (0,0,0,0,03) Einfügung; Rand unten: 30px;  .form-style-5 input [type = "text"]: focus, .form-style-5 input [type = "date"]: focus, .form-style-5 input [type = "datetime"]: focus, .form-style-5 Eingabe [type = "email"]: focus, .form-style-5 Eingabe [type = "number"]: Fokus, .form-style-5 Eingabe [type = "search"] : focus, .form-style-5 input [type = "time"]: focus, .form-style-5 input [type = "url"]: focus, .form-style-5 textarea: focus, .form- style-5 select: focus background: # d2d9dd;  .form-style-5 select -webkit-Aussehen: Menulist-Button; Höhe: 35px;  .form-style-5 .number background: # 1abc9c; Farbe: #fff; Höhe: 30px; Breite: 30px; Anzeige: Inline-Block; Schriftgröße: 0.8em; Rand rechts: 4px; Zeilenhöhe: 30px; Text ausrichten: Mitte; Textschatten: 0 1px 0 rgba (255,255,255,0,2); Grenzradius: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "button"] position: relative; Bildschirmsperre; Polsterung: 19px 39px 18px 39px; Farbe: #FFF; Marge: 0 auto; Hintergrund: # 1abc9c; Schriftgröße: 18px; Text ausrichten: Mitte; font-style: normal; Breite: 100%; Grenze: 1px fest # 16a085; Randbreite: 1px 1px 3px; Rand unten: 10px;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover background: # 109177;  

Schreiben Sie die Logik des Popups

Sobald wir mit dem Front-End der Erweiterung fertig sind, schreiben wir jetzt die Logik für das Funktionieren. Wir brauchen unsere Erweiterung, um es können zu können Fügen Sie Aufgaben hinzu und zeigen Sie sie auch an im Popup-Fenster. Wir fügen also einen Schaltflächen-Listener hinzu, um den Eingabetext als Aufgabenelement hinzuzufügen, und einen Seitenlade-Listener, um diese Elemente anzuzeigen.

Im folgenden Code werden wir zwei Funktionen verwenden - sync.get () und sync.set (), welche sind Teil von “Chromspeicher“. Wir brauchen den zweiten, um die zu erledigenden Aufgaben im Speicher zu speichern, und den ersten, um sie abzurufen und anzuzeigen.

Das heißt, unten ist der endgültige Code der “browser_action.js” Datei. Wie Sie unten sehen können, ist der Code stark kommentiert, damit Sie den Zweck besser verstehen können.

 function loadItems () / * Zuerst erhalten Sie die Daten aus dem Speicher * / chrome.storage.sync.get (['todo'], Funktion (Ergebnis) var todo = [] if (Ergebnis && result.todo && result.todo.trim ()! == ") / * Analysiert das Array und speichert es als String. * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) für (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Laden Sie die Erweiterung

Nachdem Sie die Erweiterung fertig geschrieben haben, können Sie sie mit der Google Chrome-Funktion testen, mit der nicht-gespeicherte, nicht gepackte Erweiterungen geladen werden können. Aber zuerst musst du Aktivieren Sie den Entwicklermodus In Ihrem Browser: Klicken Sie auf Optionen Taste > wählen “Mehr Werkzeuge” > Erweiterungen, und dann einschalten “Entwicklermodus“.

Jetzt sehen Sie weitere Schaltflächen unter der Suchleiste. Hier klicken Sie auf die “Laden Sie unverpackt” Taste. Sie werden nach dem Verzeichnis gefragt. Suchen Sie nach dem Verzeichnis Ihrer Nebenstelle und wählen Sie es aus. Es lädt die Erweiterung. Wenn Sie den Code Ihrer Erweiterung bearbeiten oder aktualisieren, können Sie auf klicken Schaltfläche zum erneuten Laden, um die neuesten Änderungen zu laden.

In unserem Beispiel, Sie sehen das Symbol der Erweiterung neben dem Profilsymbol, da in unserer Beispielerweiterung eine Browseraktion hinzugefügt wurde. Sie können auf dieses Symbol klicken Hinzufügen und Anzeigen von Aufgaben In unserer Erweiterung ist dies die angegebene Aktion.

Verteilen Sie eine Erweiterung

Obwohl es ist einfach, um eine Erweiterung hochzuladen In Chrome Web Store ist der Vorgang zu lang, um alle Details abzudecken. Kurz gesagt, Sie erstellen ein Entwicklerkonto, packen Ihre Erweiterung und senden sie dann zusammen mit ihren Inhaltsdetails (wie Name, Symbol, Screenshots usw.). wie in der Schritt-für-Schritt-Anleitung aufgeführt.

Was als nächstes? Lesen und Code

Wie Sie vielleicht erwartet haben, besteht der Zweck dieses Lernprogramms darin, Ihnen den Einstieg in die Erweiterungsentwicklung für Google Chrome zu erleichtern. Ich habe versucht, die Grundbegriffe abzudecken; jedoch, Sie müssen viel mehr wissen für ernsthafte Erweiterungsentwicklung.

Nachstehend sind einige meiner aufgeführt Lieblings-Go-to-Ressourcen Lernen Sie, Erweiterungen für Google Chrome und andere Chromium-basierte Browser zu entwickeln:

1. Alle Fähigkeiten, Komponenten und Funktionen von Erweiterungen.
2. Beispielerweiterungen vom Team hinter Google Chrome.

Wenn Sie diese Ressourcen bereits durchlaufen haben und bereit sind, einige Herausforderungen zu meistern, fügen Sie der gerade fertiggestellten Erweiterung folgende Funktionen hinzu:

1. Eine Option zum Löschen der gespeicherten Aufgaben.
2. Eine Funktion zum Anzeigen von Benachrichtigungen, wenn ein Element hinzugefügt wurde.

Es geht darum, Ihre erste Erweiterung für den beliebtesten Browser zu entwickeln. Welche Erweiterung hast du erstellt?? Bist du in ein Problem geraten? Bitte teilen Sie mir Ihre Geschichte mit, indem Sie unten einen Kommentar schreiben oder mich unter @aksinghnet benachrichtigen.

Beachten Sie außerdem, dass Sie Todoizr (die von uns erstellte Erweiterung) im Chrome Web Store ausprobieren und den vollständigen Code in diesem Repository prüfen können.