So erstellen Sie Ihre eigene Chrome-Erweiterung

Was wäre, wenn Sie das Beste aus Ihrem Surfen herausholen könnten? Erfahren Sie, wie Sie Ihre eigenen Google Chrome-Erweiterungen erstellen.

Waren Sie schon einmal unzufrieden mit den Funktionen Ihres Webbrowsers? Auch wenn Sie Stunden damit verbracht haben, den Google Online Store zu erkunden, ist es nicht immer so einfach, auf „Herunterladen“ zu klicken, um Ihr Surferlebnis zu verbessern.

Hier kommen Browser-Add-Ons ins Spiel. In diesem Tutorial sehen wir uns an, wie Sie Ihre eigene Google Chrome-Erweiterung zum Selbermachen von Grund auf erstellen.

Was ist eine Google Chrome-Erweiterung?

Moderne Browser wie Google Chrome enthalten eine Fülle von Funktionen, die sie einfach zu verwenden machen und in der Lage sind, die Anforderungen der Mehrheit der Benutzer zu erfüllen. Die Erweiterung dieser grundlegenden Funktionen kann jedoch eine Reihe von Vorteilen haben. Aus diesem Grund erlauben Browserhersteller normalerweise die Erstellung von Erweiterungen, Add-Ons und Plug-Ins für sie.

Diese Funktion ist in Google Chrome verfügbar, sodass jeder mit Kenntnissen in der Webprogrammierung problemlos seine eigenen Chrome-Erweiterungen erstellen kann. Wie bei vielen Websites können Sie eine Erweiterung mit HTML, JavaScript und CSS erstellen.

Im Gegensatz zu Websites können Erweiterungen beim Surfen im Hintergrund arbeiten und manchmal sogar mit den von Ihnen besuchten Websites interagieren.

Welche Funktionen bietet unsere Google Chrome-Erweiterung?

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

Sie werden How-To entdecken

• Entwickeln Sie eine Google Chrome-Erweiterung
• Fügen Sie mithilfe einer Chrome-Erweiterung benutzerdefinierten Code in Webseiten ein.
• Simulieren Sie Klicks, indem Sie Ereignis-Listener erstellen.
• Zufallszahlen produzieren
• Verwenden Sie Arrays und Variablen.

Erstellen Sie Ihre eigene DIY-Chrome-Erweiterung

Google hat es erschreckend einfach gemacht, Ihre eigenen Chrome-Erweiterungen zu entwickeln, sodass Sie im Handumdrehen einsatzbereit sind. Die folgenden Anweisungen dauern nur 10 bis 15 Minuten, aber wir laden Sie ein, auch mit Ihrem eigenen Code zu experimentieren.

Schritt 1: Erstellen Sie die Dateien

Wenn Sie Ihre Nebenstelle nicht freigeben möchten, können Sie sie auf Ihrem lokalen System belassen. Um unsere Erweiterung zu erstellen, benötigen wir lediglich vier Dateien: eine HTML-Seite, eine CSS-Datei, eine JavaScript-Datei und eine JSON-Datei.

Index.html, style.css, script.js und manifest.json waren die Namen, die wir unseren Dateien gegeben haben. Die Manifestdatei muss diesen Namen haben, um richtig zu funktionieren, aber die anderen können einen beliebigen Namen haben, den Sie wählen, solange Sie Ihren Code entsprechend ändern.

Diese Dateien sollten im selben Stammordner abgelegt werden.

Schritt 2: Erstellen Sie die Manifestdatei

Jede Google Chrome-Erweiterung enthält eine Manifestdatei. Es informiert Chrome über die Erweiterung und implementiert gleichzeitig einige grundlegende Einstellungen. Diese Datei muss einen Namen, eine Versionsnummer, eine Beschreibung und eine Manifestversion enthalten. Wir haben auch Berechtigungen und eine Aktion bereitgestellt, die index.html als Popup der Erweiterung lädt.

 { "name": "MakeUseOf.com Automated Search", "version": "1.0.0", "description": "A search tool to find interesting articles", "manifest_version": 3, "author": "Samuel Garbett", "permissions": ["storage", "declarativeContent", "activeTab", "scripting"], "host_permissions": [""], "action":{ "default_popup": "index.html", "default_title": "MUO Auto Search" } }

Schritt 3: Erstellen Sie HTML und CSS

Bevor wir mit der Codierung unseres Skripts beginnen, müssen wir zunächst eine einfache Benutzeroberfläche (UI) mit HTML und CSS entwerfen. Sie können eine CSS-Bibliothek wie Bootstrap verwenden, um das Schreiben Ihrer eigenen zu vermeiden, aber unser Addon erfordert nur wenige Regeln.

Die HTML-, Head- und Body-Tags sind alle in unserer index.html-Datei vorhanden. Das Head-Tag enthält den Seitentitel und einen Link zu unserem Stylesheet, während der Body ein h1-Tag, einen Link zu MakeUseOf.com und eine weitere Schaltfläche enthält, die als Auslöser für ein Skript verwendet wird. Die script.js -Datei ist in einem script-Tag am Ende des Dokuments enthalten.

 <html> <head> <title>MUO Auto Search</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>MUO Auto Search</h1> <a href="https://www.makeuseof.com/" target="_blank"><button>Go to MakeUseOf.com</button></a> <button>Start Random Search</button> </body> <script src="script.js"></script> </html>

Unsere CSS-Datei ist sogar noch einfacher als unsere HTML-Datei, da sie nur den Stil von fünf Komponenten ändert. Wir haben Richtlinien für HTML- und Body-Tags sowie für H1-Tags und beide Schaltflächen.

 html { width: 400px; } body { font-family: Helvetica, sans-serif; } h1 { text-align: center; } #buttonOne { border-radius: 0px; width: 100%; padding: 10px 0px; } #buttonTwo { border-radius: 0px; width: 100%; padding: 10px 0px; margin-top: 10px; }

Schritt 4: Erstellen Sie das JavaScript

Der letzte Schritt in diesem Verfahren besteht darin, unsere script.js-Datei zu erstellen.

Die Funktion insertScript() in dieser Datei wird verwendet, um die andere Funktion ( autoSearch() ) auf der aktuellen Seite einzufügen. Dies ermöglicht es uns, die Seite zu bearbeiten und die derzeit auf der MakeUseOf.com-Website verfügbaren Suchoptionen zu verwenden.

Darauf folgt ein Ereignis-Listener, der wartet, bis die Schaltfläche Start Random Search gedrückt wird, bevor er die zuvor besprochene Funktion ausführt.

Die Methode autoSearch() ist etwas kniffliger. Es beginnt mit einem Array, das 20 der Kategorien der MUO-Website enthält und uns eine anständige Stichprobe für die Durchführung zufälliger Suchen liefert. Danach verwenden wir die Funktion Math.random() , um eine zufällige Ganzzahl zwischen 0 und 19 zu erzeugen, um ein Element aus unserem Array auszuwählen.

Wir müssen jetzt einen Knopfdruck imitieren, um das MUO-Suchfeld mit unserem Suchwort in der Hand zu öffnen. Wir verwenden zunächst die Chrome-Entwicklerkonsole, um die ID der Suchschaltfläche abzurufen, die wir dann mit der Methode click() zu unserem JavaScript-Code hinzufügen.

 // This method incorporates our autoSearch functionality into the page's code function insertScript() { // This chooses the operation's focused tab and invokes the autoSearch function chrome.tabs.query({active: true, currentWindow: true}, tabs => { chrome.scripting.executeScript({target: {tabId: tabs[0].id}, function: autoSearch}) }) // This closes the extension pop-up window that allows you to pick the website search bar window.close(); } // This is an event listener that detects when our "Start Random Search" button is clicked document.getElementById('buttonTwo').addEventListener('click', insertScript) // This code chooses a topic at random from an array and function autoSearch() { // This is an array in which we will store our search keywords const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac", "Linux", "Android", "Apple", "Internet", "Security", "Programming", "Entertainment", "Productivity", "Career", "Creative", "Gaming", "Social Media", "Smart Home", "DIY", "Review"]; // This creates a number between 0 and 19 at random let selectorNumber = Math.floor(Math.random() * 20); // The random number is used to choose an element from the array let selection = searchTerms[selectorNumber]; // This mimics clicking on the MUO website search button document.getElementById("js-search").click(); // This variables the MUO website search bar var searchBar = document.getElementById("js-search-input"); // This enters our arbitrary search query into the search field searchBar.value = searchBar.value + selection; // The process is completed by activating the online form document.getElementById("searchform2").submit(); }

Schritt 5: Hochladen von Dateien in Chrome:/extensions

Die soeben erstellten Dateien sollten jetzt zur Chrome-Erweiterungsseite hinzugefügt werden. Danach ist die Erweiterung in Chrome verfügbar und wird automatisch aktualisiert, wenn Sie Änderungen an Ihren Dateien vornehmen.

Öffnen Sie Google Chrome, navigieren Sie zu chrome:/extensions und stellen Sie sicher, dass der Entwicklermodus-Schieberegler in der oberen rechten Ecke aktiviert ist.

Klicken Sie oben links auf „ Ungepackt laden “, wählen Sie dann den Ordner mit Ihren Erweiterungsdateien aus und klicken Sie auf „ Ordner auswählen“ .

Nachdem Ihre Erweiterung geladen wurde, klicken Sie auf das Puzzleteil-Symbol in der oberen rechten Ecke, um sie für einen schnelleren Zugriff an die Haupttaskleiste anzuheften.

Sie sollten nun die fertige Erweiterung in Ihrem Browser sehen können. Es ist wichtig zu beachten, dass diese Erweiterung nur auf der MUO-Website oder Websites funktioniert, die dieselbe ID für ihre Suchschaltfläche und -leiste verwenden.

Erstellen einer Google Chrome-Erweiterung

Dieser Beitrag berührt nur die Oberfläche der Funktionen, die Sie in Ihre eigene Google Chrome-Erweiterung integrieren können. Sobald Sie die Grundlagen beherrschen, lohnt es sich auf jeden Fall, mit Ihren eigenen Ideen zu experimentieren.

Chrome-Erweiterungen können Ihnen helfen, Ihr Surferlebnis zu verbessern, aber vermeiden Sie einige der bekannten skizzenhaften Chrome-Erweiterungen für ein sicheres Online-Erlebnis.