So erstellen Sie Ihre eigene Google Chrome-Erweiterung

Waren Sie jemals unzufrieden mit den Funktionen Ihres Webbrowsers? Selbst wenn Sie stundenlang den Google Web Store durchforstet haben, ist es nicht immer einfach, auf „Download“ zu klicken, um Ihr Surferlebnis im Internet zu verbessern.

Hier kommen Browsererweiterungen ins Spiel. In diesem Artikel werden wir den Prozess der Erstellung Ihrer eigenen Google Chrome-Erweiterung zum Selbermachen von Grund auf untersuchen.

Was ist eine Google Chrome-Erweiterung?

Modern Webbrowser wie Google Chrome kommen mit einer Reihe von Funktionen, die sie einfach zu bedienen machen und in der Lage sind, die Bedürfnisse der meisten Benutzer zu erfüllen. Die Erweiterung dieser Bestandsfunktionen kann jedoch viele verschiedene Vorteile mit sich bringen. Aus diesem Grund ermöglichen es Browserentwickler normalerweise, Erweiterungen, Add-Ons und Plug-Ins für sie zu erstellen.

Google Chrome bietet diese Funktion, die es jedem mit Erfahrung in der Webentwicklung leicht macht, seine eigenen Chrome-Erweiterungen zu erstellen. Sie können eine Erweiterung mit HTML, JavaScript und CSS erstellen, genau wie bei vielen Websites.

Im Gegensatz zu einer Website können Erweiterungen beim Surfen im Hintergrund ausgeführt werden und manchmal sogar mit den von Ihnen besuchten Websites interagieren.

Was wird unsere Google Chrome-Erweiterung tun?

Wir werden eine einfache Chrome-Erweiterung erstellen, mit der Sie die Make Use Of-Website besuchen und eine zufällige Suche basierend auf den auf der Website gefundenen Artikelkategorien durchführen können. Dies ist ein schnelles und einfaches Projekt, aber Sie werden trotzdem viel lernen.

Du wirst lernen wie

• Erstellen Sie eine Google Chrome-Erweiterung
• Fügen Sie mithilfe einer Chrome-Erweiterung benutzerdefinierten Code in Webseiten ein
• Erstellen Sie Ereignis-Listener und simulieren Sie Klicks
• Generieren Sie Zufallszahlen
• Arbeiten Sie mit Arrays und Variablen

Erstellen Sie Ihre eigene DIY-Chrome-Erweiterung

Google hat es überraschend einfach gemacht, eigene zu erstellen Chrome-Erweiterungen, so dass es nicht lange dauern wird, bis Sie etwas haben, das funktioniert. Das Befolgen der folgenden Schritte dauert nur 10 bis 15 Minuten, aber wir empfehlen Ihnen, auch mit Ihrem eigenen Code zu experimentieren.

Schritt 1: Erstellen der Dateien

Sie können Ihre Erweiterung auf Ihrem eigenen lokalen Computer speichern, wenn Sie nicht vorhaben, sie zu verteilen. Wir müssen nur vier verschiedene Dateien erstellen, um unsere Erweiterung zu erstellen; eine HTML-Datei, eine CSS-Datei, eine JavaScript-Datei und eine JSON-Datei.

Wir haben unsere Dateien index.html, style.css, script.js und manifest.json genannt. Die Manifestdatei muss diesen Namen haben, damit sie richtig funktioniert, aber Sie können den anderen beliebige Namen geben, solange Sie Ihren Code entsprechend ändern.

Sie sollten diese Dateien im selben Stammordner ablegen.

Schritt 2: Erstellen der Manifestdatei

Die Manifestdatei wird mit jeder Google Chrome-Erweiterung geliefert. Es bietet Informationen über die Erweiterung für Chrome und legt gleichzeitig einige grundlegende Einstellungen fest. Diese Datei muss einen Namen, eine Versionsnummer, eine Beschreibung und eine Manifestversion enthalten. Wir haben auch Berechtigungen und eine Aktion hinzugefügt, die geladen wird index.html wie das Popup, das für die Erweiterung angezeigt wird.

{
"Name": "MakeUseOf.com Automatisierte Suche",
"Ausführung": "1.0.0",
"Bezeichnung": "Ein Suchwerkzeug, um interessante Artikel zu finden",
"manifest_version": 3,
"Autor": "Samuel Garbett",
"Berechtigungen": ["Lager", "deklarativer Inhalt", "aktivTab", "Skripterstellung"],
"host_permissions": [""],
"Handlung":{
"default_popup": "index.html",
"default_title": "Automatische MUO-Suche"
 }
}

Schritt 3: Aufbau von HTML & CSS

Bevor wir mit dem Schreiben unseres Skripts beginnen können, müssen wir eine grundlegende Benutzeroberfläche mit HTML und CSS erstellen. Sie können eine verwenden CSS-Bibliothek wie Bootstrap um zu vermeiden, dass Sie Ihre eigenen erstellen, aber wir benötigen nur ein paar Regeln für unsere Erweiterung.

Unsere index.html-Datei enthält HTML-, Head- und Body-Tags. Das Head-Tag enthält einen Seitentitel und einen Link zu unserem Stylesheet, während der Body ein h1-Tag enthält, a Schaltfläche, die Sie zu MakeUseOf.com führt, und eine weitere Schaltfläche, die wir als Auslöser für a verwenden werden Skript. Ein script-Tag direkt am Ende des Dokuments enthält die script.js Datei.

<html>
<Kopf>
<Titel>Automatische MUO-Suche</title>
<Metazeichensatz="utf-8">
<link rel="Stylesheet" href="style.css">
</head>
<Karosserie>
<h1>Automatische MUO-Suche</h1>
<ein href="https://www.makeuseof.com/" Ziel="_leer"><Schaltflächen-ID="KnopfEins">Gehen Sie zu MakeUseOf.com</button></a>
<Schaltflächen-ID="KnopfZwei">Zufallssuche starten</button>
</body>
<script src="script.js"></script>
</html>

Unsere CSS-Datei ist sogar noch einfacher als unser HTML und ändert den Stil von nur fünf Elementen. Wir haben Regeln für unsere html- und body-Tags sowie für h1-Tags und unsere beiden Schaltflächen.

html {
 Breite: 400px;
}
Karosserie {
 Schriftfamilie: Helvetica, serifenlos;
}
h1 {
 Textausrichtung: Mitte;
}
#buttonOne {
 Randradius: 0px;
 Breite: 100 %;
 Polsterung: 10px 0px;
}
#buttonZwei {
 Randradius: 0px;
 Breite: 100 %;
 Polsterung: 10px 0px;
 Rand oben: 10px;
}

Schritt 4: Erstellen des JavaScripts

Als letzten Schritt in diesem Prozess ist es an der Zeit, unsere script.js-Datei zu erstellen.

Die erste Funktion in dieser Datei namens insertScript(), ist vorhanden, um die andere Funktion einzufügen (automatische Suche()) in die aktuelle Seite. Dadurch können wir die Seite manipulieren und die Suchfunktionen verwenden, die bereits auf der Website MakeUseOf.com vorhanden sind.

Darauf folgt ein Ereignis-Listener, der wartet, bis auf die Schaltfläche Start Random Search geklickt wird, bevor er die oben untersuchte Funktion aufruft.

Das automatische Suche() Die Funktion ist etwas komplizierter. Es beginnt mit einem Array, das 20 der Kategorien auf der MUO-Website enthält, was uns eine gute Stichprobe gibt, aus der wir bei unseren zufälligen Suchen ziehen können. Anschließend verwenden wir die Math.random() Funktion, um eine Zufallszahl zwischen 0 und 19 zu generieren, um einen Eintrag aus unserem Array auszuwählen.

Mit unserem Suchbegriff in der Hand müssen wir nun einen Knopfdruck simulieren, um die MUO-Suchleiste zu öffnen. Wir verwenden zuerst die Chrome-Entwicklerkonsole, um die ID der Suchschaltfläche zu finden, und fügen diese dann mit dem unserem JavaScript-Code hinzu klicken() Funktion.

Wie bei der Suchschaltfläche müssen wir auch die ID der angezeigten Suchleiste finden, damit wir den zufällig ausgewählten Suchbegriff einfügen können. Wenn Sie damit fertig sind, müssen Sie nur noch das Formular absenden, um unsere Suche durchzuführen.

// Diese Funktion fügt unsere autoSearch-Funktion in den Code der Seite ein
FunktionSkript einfügen() {
// Dies wählt die fokussierte Registerkarte für die Operation aus und übergibt die Funktion autoSearch
 chrome.tabs.query({aktiv: wahr, aktuellesFenster: wahr}, Tabulatoren => {
Chrom.Skripterstellung.executeScript({Ziel: {tabId: Registerkarten[0].Ich würde}, Funktion: automatische Suche})
 })
// Dies schließt das Erweiterungs-Popup zur Auswahl der Website-Suchleiste
Fenster.schließen();
}
// Dies ist ein Ereignis-Listener, der Klicks auf unsere "Start Zufällig Suche" Taste
document.getElementById('KnopfZwei').addEventListener('klicken', insertScript)
// Diese Funktion wählt ein zufälliges Thema aus einem Array aus und 
Funktionautomatische Suche() {
// Dies ist ein Array zum Speichern unserer Suchbegriffe
 const searchTerms = ["PC und Handy", "Lebensstil", "Hardware", "Windows", "Mac",
"Linux", "Android", "Apfel", "Internet", "Sicherheit",
"Programmierung", "Unterhaltung", "Produktivität", "Karriere", "Kreativ",
"Spielen", "Sozialen Medien", "Intelligentes Zuhause", "DIY", "Überprüfung"];
// Dies erzeugt eine Zufallszahl zwischen 0 und 19
Lassen SelektorNummer = Mathematik.Boden(Mathematik.zufällig() * 20);
// Dies verwendet die Zufallszahl, um einen Eintrag aus dem Array auszuwählen
Lassen selection = searchTerms[selectorNumber];
// Dies simuliert einen Klick auf das Suchsymbol der MUO-Website
 document.getElementById("js-Suche").klicken();
// Dies setzt die Suchleiste der MUO-Website als Variable
Var Suchleiste = dokumentieren.getElementById("js-Sucheingabe");
// Dies fügt unseren zufälligen Suchbegriff in die Suchleiste ein
 searchBar.value = searchBar.value + Auswahl;
// Dies schließt den Vorgang ab, indem das Website-Formular aktiviert wird
 document.getElementById("Suchformular2").einreichen();
}

Schritt 5: Hinzufügen Ihrer Dateien zu Chrome://extensions

Als nächstes ist es an der Zeit, die gerade erstellten Dateien zur Chrome-Erweiterungsseite hinzuzufügen. Sobald Sie dies getan haben, ist die Erweiterung in Chrome verfügbar und aktualisiert sich selbst, wenn Sie Änderungen an Ihren Dateien vornehmen.

Öffnen Sie Google Chrome, gehen Sie zu chrome://extensions und vergewissern Sie sich, dass der Entwicklermodus-Schieberegler in der oberen rechten Ecke eingeschaltet ist.

Klicken Ausgepackt laden in der oberen linken Ecke, wählen Sie dann den Ordner aus, in dem Sie Ihre Erweiterungsdateien gespeichert haben, und klicken Sie auf Ordner auswählen.

Nachdem Ihre Erweiterung geladen wurde, können Sie auf das Puzzleteil-Symbol in der oberen rechten Ecke klicken und Ihre Erweiterung für einen einfacheren Zugriff an die Haupttaskleiste anheften.

Sie sollten jetzt in Ihrem Browser auf die fertige Erweiterung zugreifen können. Beachten Sie, dass diese Erweiterung nur auf der MUO-Website oder Websites mit derselben ID für ihre Suchschaltfläche und -leiste funktioniert.

Erstellen einer Google Chrome-Erweiterung

Dieser Artikel kratzt nur an der Oberfläche der möglichen Funktionen, die Sie in Ihre eigene Google Chrome-Erweiterung einbauen könnten. Es lohnt sich, eigene Ideen zu erforschen, sobald man die Grundlagen erlernt hat.

Chrome-Erweiterungen können Ihnen helfen, Ihr Surfen zu verbessern, aber versuchen Sie, sich von einigen der bekannten zwielichtigen Chrome-Erweiterungen fernzuhalten, um sicher und geschützt zu surfen.

6 zwielichtige Google Chrome-Erweiterungen, die Sie so schnell wie möglich deinstallieren sollten

Lesen Sie weiter

Über den Autor