Chrome-Erweiterung mit Vue.js erstellen

Blog

Die gute Nachricht ist, dass Browsererweiterungen nicht schwer zu schreiben sind. Sie können mit dem . erstellt werden Webtechnologien Sie kennen bereits – HTML , CSS und JavaScript — genau wie eine normale Webseite. Im Gegensatz zu normalen Webseiten haben Erweiterungen jedoch Zugriff auf eine Reihe von browserspezifischen APIs, und hier beginnt der Spaß.



Setzen eines Array-Elements mit einer Sequenz. Python

Die Grundlagen einer Chrome-Erweiterung

Das Herzstück eines jeden Chrome-Erweiterung ist ein Manifest-Datei und ein Hintergrundskript . Die Manifestdatei liegt im JSON-Format vor und enthält wichtige Informationen zu einer Erweiterung, z. B. deren Version, Ressourcen oder die erforderlichen Berechtigungen. Ein Hintergrundskript ermöglicht es der Erweiterung, auf bestimmte Browser-Ereignisse zu reagieren, beispielsweise das Anlegen eines neuen Tabs.

Um diese Konzepte zu demonstrieren, beginnen wir mit dem Schreiben eines Hello, World! Chrome-Erweiterung.



Erstellen Sie einen neuen Ordner namens |_+_| und zwei Dateien: |_+_| und |_+_|:

hello-world-chrome

Öffne |_+_| und fügen Sie den folgenden Code hinzu:



manifest.json

Die |_+_|, |_+_| und |_+_| sind alle Pflichtfelder. Die |_+_| und |_+_| Felder können beliebig sein; das Manifestversion sollte auf 2 gesetzt werden (ab Chrome 18).

Die |_+_| key ermöglicht es uns, ein Hintergrundskript zu registrieren, das in einem Array nach dem |_+_| Schlüssel. Die |_+_| Schlüssel sollte auf |_+_| . eingestellt sein es sei denn, die Erweiterung verwendet chrome.webRequest-API um Netzwerkanfragen zu blockieren oder zu ändern.

Fügen wir nun den folgenden Code zu |_+_| . hinzu damit der Browser Hallo sagt, wenn die Erweiterung installiert ist:

background.js

Abschließend installieren wir die Erweiterung. Offen Chrom und geben Sie |_+_| . ein in der Adressleiste. Sie sollten eine Seite sehen, auf der die von Ihnen installierten Erweiterungen angezeigt werden.

Da wir unsere Erweiterung aus einer Datei (und nicht aus dem Chrome Web Store) installieren möchten, müssen wir sie aktivieren Entwicklermodus mit dem Umschalter in der oberen rechten Ecke der Seite. Dies sollte eine zusätzliche Menüleiste mit der Option hinzufügen Ausgepackt laden . Klicken Sie auf diese Schaltfläche und wählen Sie |_+_| Ordner, den Sie zuvor erstellt haben. Klicken Offen und Sie sollten die installierte Erweiterung und ein Hallo, Welt! Popup-Fenster erscheinen.

Chrome-Erweiterung mit Vue.js erstellen

Herzliche Glückwünsche! Sie haben gerade eine Chrome-Erweiterung erstellt.

Überschreiben der neuen Registerkarte von Chrome

Der nächste Schritt besteht darin, dass unsere Erweiterung uns begrüßt, wenn wir einen neuen Tab öffnen. Wir können dies tun, indem wir die Seiten-API überschreiben .

Hinweis: Bevor Sie fortfahren, deaktivieren Sie bitte alle anderen Erweiterungen, die die neue Registerkarte von Chrome überschreiben. Nur eine Nebenstelle gleichzeitig kann dieses Verhalten ändern.

Wir beginnen damit, dass wir eine Seite erstellen, die anstelle der neuen Registerkarte angezeigt werden soll. Nennen wir es |_+_|. Dies sollte sich im selben Ordner wie Ihre Manifestdatei und Ihr Hintergrundskript befinden:

mkdir hello-world-chrome cd hello-world-chrome touch manifest.json background.js

Als nächstes müssen wir der Erweiterung diese Seite mitteilen. Wir können dies tun, indem wir ein |_+_| . angeben Geben Sie unsere Manifestdatei wie folgt ein:

manifest.json

Schließlich müssen Sie die Erweiterung neu laden, damit die Änderungen wirksam werden. Sie können dies tun, indem Sie auf klicken neu laden Symbol für die Hello World-Erweiterung auf der Chrome-Erweiterungsseite.

Chrome-Erweiterung mit Vue.js erstellen

Wenn Sie nun eine neue Registerkarte öffnen, sollten Sie von Ihrer benutzerdefinierten Nachricht begrüßt werden.

Vue zur Erweiterung hinzufügen

Jetzt haben wir eine sehr grundlegende Implementierung unserer Erweiterung in Betrieb genommen und es ist an der Zeit, darüber nachzudenken, wie der Rest der gewünschten Funktionalität aussehen wird. Wenn ein Benutzer einen neuen Tab öffnet, möchte ich, dass die Erweiterung:

  • Holen Sie sich einen Witz von den wunderbaren icanhazdadjoke.com .
  • Zeigen Sie dem Benutzer diesen Witz in einer schön formatierten Weise an.
  • Zeigen Sie dem Benutzer eine Schaltfläche an, um den Witz zu favorisieren. Dadurch wird der Witz in |_+_| gespeichert.
  • Zeigen Sie dem Benutzer eine Schaltfläche zum Auflisten von Lieblingswitzen an.

All dies können Sie natürlich mit einfachem JavaScript oder einer Bibliothek wie jQuery tun – und wenn das Ihr Ding ist, fühlen Sie sich frei!

Für die Zwecke dieses Tutorials werde ich diese Funktionalität jedoch mit implementieren Gesehen und das tolle vue-web-Erweiterung Boilerplatte.

Die Verwendung von Vue ermöglicht es mir, schneller besseren, besser organisierten Code zu schreiben. Und wie wir sehen werden, bietet der Boilerplate mehrere Skripte, die einige der üblichen Aufgaben beim Erstellen einer Chrome-Erweiterung erleichtern (z. B. das erneute Laden der Erweiterung, wenn Sie Änderungen vornehmen).

vue-web-extension-kesselplatte

In diesem Abschnitt wird davon ausgegangen, dass Node und npm auf Ihrem Computer installiert sind. Wenn dies nicht der Fall ist, können Sie entweder zum Homepage des Projekts und holen Sie sich die relevanten Binärdateien für Ihr System. Ich würde empfehlen, einen Versionsmanager zu verwenden.

Wir brauchen auch CLI-Ansicht installiert und die @vue/cli-init-Paket :

{ 'name': 'Hello World Extension', 'version': '0.0.1', 'manifest_version': 2, 'background': { 'scripts': ['background.js'], 'persistent': false } }

Wenn das erledigt ist, holen wir uns eine Kopie des Boilerplates:

name

Dies öffnet einen Assistenten, der Ihnen eine Reihe von Fragen stellt. Um dieses Tutorial fokussiert zu halten, habe ich wie folgt geantwortet:

version

Sie können Ihre Antworten an Ihre Vorlieben anpassen, aber die Hauptsache ist, dass Sie sich für die Installation entscheiden Axios . Wir werden dies verwenden, um die Witze zu holen.

Wechseln Sie als nächstes in das Projektverzeichnis und installieren Sie die Abhängigkeiten:

manifest_version

Und dann können wir unsere neue Erweiterung mit einem der Skripte erstellen, die der Boilerplate bereitstellt:

name

Dadurch wird die Erweiterung zu einem |_+_| Ordner im Projektstammverzeichnis für die Entwicklung und achten Sie auf Änderungen.

wie man privates twitter ansieht

Um die Erweiterung zu Chrome hinzuzufügen, führen Sie den gleichen Vorgang wie oben beschrieben durch und stellen Sie sicher, dass Sie |_+_| . auswählen Ordner als Erweiterungsverzeichnis. Wenn alles nach Plan läuft, sollten Sie eine Hello world! Nachricht, wenn die Erweiterung initialisiert wird.

Projektaufbau

Nehmen wir uns eine Minute Zeit, um uns in unserem neuen Projekt umzusehen und zu sehen, was uns die Boilerplate gegeben hat. Die aktuelle Ordnerstruktur sollte so aussehen:

version

Öffne |_+_| und füge folgendes hinzu:

background

Hier ist nichts besonderes los. Dies ist eine einfache HTML-Seite, die unsere Vue-Instanz enthält.

Als nächstes in |_+_| hinzufügen:

scripts

Hier importieren wir Vue, übergeben einen Selektor für das Element, das wir durch unsere Anwendung ersetzen möchten, und weisen es dann an, unser |_+_| . zu rendern Komponente.

Schließlich in |_+_|:

persistent

Bevor wir diese neue Registerkarte verwenden können, müssen wir die Manifestdatei aktualisieren:

false

Und wir müssen auch die Boilerplate unsere Dateien kompilieren und sie in die |_+_| . kopieren Ordner, damit sie für die Erweiterung verfügbar sind.

|_+_| . ändern So aktualisieren Sie sowohl die |_+_| und |_+_| Schlüssel:

background.js chrome.runtime.onInstalled.addListener(() => { alert('Hello, World!'); });

Sie müssen das |_+_| . neu starten Aufgabe, damit diese Änderungen wirksam werden. Sobald Sie dies getan haben, laden Sie die Erweiterung neu und öffnen Sie einen neuen Tab. Die Seite Meine neue Registerkarte sollte angezeigt werden.

Chrome-Erweiterung mit Vue.js erstellen

Witze abrufen und anzeigen

Okay, wir haben die neue Registerkarte von Chrome überschrieben und durch eine Mini-Vue-App ersetzt. Lassen Sie uns jetzt mehr tun, als nur eine Nachricht anzuzeigen.

Ändern Sie den Vorlagenabschnitt in |_+_| wie folgt:

chrome://extensions/

Ändern Sie die |_+_| Abschnitt wie folgt zu lesen:

Wie erstelle ich ein Hangman-Spiel in Javascript?
hello-world-chrome

Und schließlich ändern Sie die |_+_| Abschnitt wie folgt zu lesen:

tab.html

Wenn Sie |_+_| . ausführen Aufgabe sollte die Erweiterung automatisch neu geladen werden und Sie sollten einen Witz sehen, wenn Sie eine neue Registerkarte öffnen.

Chrome-Erweiterung mit Vue.js erstellen

Nachdem Sie überprüft haben, dass es funktioniert, nehmen wir uns eine Minute Zeit, um zu verstehen, was wir getan haben.

In der Vorlage verwenden wir a v-wenn Block, um entweder eine Ladenachricht oder einen Witz anzuzeigen, abhängig vom Zustand des |_+_| Eigentum. Anfänglich wird dies auf |_+_| . gesetzt (die Ladenachricht wird angezeigt), dann wird unser Skript eine Ajax-Anfrage abfeuern, um den Witz abzurufen. Sobald die Ajax-Anfrage abgeschlossen ist, wird die |_+_| Die Eigenschaft wird auf |_+_| gesetzt, wodurch die Komponente neu gerendert und unser Witz angezeigt wird.

Im |_+_| Abschnitt importieren wir Axios und deklarieren dann einige Dateneigenschaften — die oben genannten |_+_| Eigentum und ein |_+_| Eigenschaft, den Witz zu halten. Wir verwenden dann die |_+_| Lebenszyklus-Haken , die ausgelöst wird, sobald unsere Vue-Instanz gemountet wurde, um eine Ajax-Anfrage an die Witz-API . Sobald die Anforderung abgeschlossen ist, aktualisieren wir unsere beiden Dateneigenschaften, damit die Komponente erneut gerendert wird.

So weit, ist es gut.

Anhaltende Witze im Speicher von Chrome

Als Nächstes fügen wir einige Schaltflächen hinzu, die es dem Benutzer ermöglichen, einen Witz zu favorisieren und bevorzugte Witze aufzulisten. Wie wir verwenden werden Speicher-API von Chrome Um die Witze beizubehalten, kann es sich lohnen, eine dritte Schaltfläche hinzuzufügen, um alle bevorzugten Witze aus dem Speicher zu löschen.

Fügen Sie die Schaltflächen zum v-else-Block hinzu:

My New Tab Page!

You can put any content here you like

Nichts Aufregendes hier. Beachten Sie die Art und Weise, wie wir die |_+_| . des Like-Buttons binden -Eigenschaft an eine Dateneigenschaft auf unserer Vue-Instanz, um ihren Zustand zu bestimmen. Dies liegt daran, dass ein Benutzer einen Witz nicht mehr als einmal mögen sollte.

Fügen Sie als Nächstes die Klickhandler und die |_+_| . hinzu zu unserem Skriptbereich:

chrome_url_overrides

Hier haben wir drei neue Methoden deklariert, um mit den drei neuen Schaltflächen umzugehen.

Die |_+_| Methode sucht nach einem |_+_| -Eigenschaft im Chrome-Speicher. Wenn es fehlt (das heißt, der Benutzer muss noch einen Witz mögen), initialisiert es es in ein leeres Array. Dann schiebt es den aktuellen Witz auf dieses Array und speichert ihn zurück im Speicher. Schließlich setzt es die |_+_| data-Eigenschaft auf |_+_|, wodurch der Like-Button deaktiviert wird.

Die |_+_| Methode sucht auch nach einem |_+_| -Eigenschaft im Chrome-Speicher. Wenn es einen findet, durchläuft es alle seine Einträge und protokolliert sie in der Konsole.

Hoffentlich was zum |_+_| Methode ist klar.

Probieren Sie diese neue Funktionalität in der Erweiterung aus und überzeugen Sie sich selbst, dass sie funktioniert.

Chrome-Erweiterung mit Vue.js erstellen

Der Erweiterung etwas Polnisch hinzufügen

Okay, das scheint zu funktionieren, aber die Schaltflächen sind hässlich und die Seite ist ein wenig schlicht. Lassen Sie uns diesen Abschnitt abschließen, indem wir der Erweiterung etwas Glanz hinzufügen.

Als nächsten Schritt installieren Sie die sehen-super Bücherei. Dadurch können wir einige Font Awesome-Symbole auf unserer Seite verwenden und diese Schaltflächen etwas schöner aussehen lassen:

'chrome_url_overrides': { 'newtab': 'tab.html' }

Registrieren Sie die Bibliothek mit unserer Vue-App in |_+_|:

chrome.storage

Ändern Sie nun die Vorlage wie folgt:

npm install -g @vue/cli npm install -g @vue/cli-init

Zum Schluss fügen wir den Schaltflächen etwas mehr Styling hinzu und fügen ein Bild von . hinzu Jedermanns Lieblingsvater :

|_+_|. Dadurch wird ein |_+_| . erstellt Ordner in Ihrem Projektstamm, der eine ZIP-Datei enthält, die zum Hochladen in den Web Store bereit ist.

Für eine minimale Erweiterung ist dies alles, was Sie wirklich tun müssen. Bevor Sie jedoch etwas hochladen, lohnt es sich, das offizielle zu lesen Im Chrome Web Store veröffentlichen Handbuch.

Abschluss

Und damit sind wir fertig. In diesem Tutorial habe ich die Hauptteile einer Chrome-Erweiterung hervorgehoben und gezeigt, wie man sie verwendet vue-web-Erweiterung Boilerplate zum Erstellen einer Erweiterung mit Vue.js. Zum Abschluss haben wir uns angesehen, wie man eine Erweiterung in den Web Store hochlädt und alles, was dazu gehört.

Ich hoffe, Ihnen hat dieses Tutorial gefallen und Sie können es verwenden, um eigene Chrome-Erweiterungen zu erstellen

Den Code für dieses Tutorial finden Sie auf GitHub .

Danke fürs Lesen

bellsouth net anmelden

Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden!

Folge uns auf Facebook | Twitter

Weiterlesen

Vue JS 2 - Das komplette Handbuch (inkl. Vue Router & Vuex)

Nuxt.js - Vue.js auf Steroiden

Erstellen Sie Web-Apps mit Vue JS 2 und Firebase

Erstellen Sie eine progressive Web-App in VueJs

Erstellen Sie eine grundlegende CRUD-App mit Vue.js und Node

☞ Beste JavaScript-Frameworks, Bibliotheken und Tools für 2019

# vue-js # google-chrome # Webentwicklung

codequs.com

Chrome-Erweiterung mit Vue.js erstellen

In diesem Tutorial zeige ich Ihnen, wie Sie eine einfache Erweiterung für Chrome erstellen, die das Verhalten der neuen Registerkarte ändert. Für den JavaScript-Teil der Erweiterung verwende ich das Vue.js-Framework,