Heim >Web-Frontend >js-Tutorial >Vue Chrome Extension: Erstellen Sie ein Browser-Add-On mit Vue.js

Vue Chrome Extension: Erstellen Sie ein Browser-Add-On mit Vue.js

Joseph Gordon-LevittOriginal: 2025-02-14 09:54:11968Durchsuche

Dieses Tutorial zeigt, dass eine einfache Vue -Chrome -Erweiterung erstellt wird, die die neue Registerkartenseite verändert. Wir werden Vue.js für die schnelle Entwicklung und die angenehme Codierung verwenden.

Vue Chrome Extension: Build a Browser Add-on with Vue.js

Browser -Erweiterungen verbessern die Browserfunktionalität und führen Aufgaben wie Anzeigenblockierung, Kennwortverwaltung und TAB -Organisation aus. Sie sind mit bekannten Web-Technologien (HTML, CSS, JavaScript) erstellt, aber auf Browser-spezifische APIs zugreifen. Der Code für dieses Tutorial ist auf Github verfügbar.

Schlüsselkonzepte:

Nutzen Sie Vue.js für eine effiziente Entwicklung der Chromerweiterung.
Erstellen Sie eine grundlegende Erweiterung mit einer Manifest -Datei und einem Hintergrundskript, um sie im Entwicklermodus zu installieren.
Überschreiben Sie die neue Registerkarte mit chrome_url_overrides in der Manifest -Datei.
Integrieren Sie den VUE mit der vue-web-extension -Kesselplatte für Funktionen wie heißes Nachladen.
Fetch und anzeigen dynamischen Inhalt (z. B. Witze aus einer API) mit VUE -Komponenten.
Chrome Speicher aktualisieren, um Benutzerinteraktionen zu speichern (wie Favoriten -Witze).
Verbessern Sie die Benutzeroberfläche mit Bibliotheken wie vue-awesome für Symbole.

Erstellen einer grundlegenden Erweiterung:

Die Kernkomponenten sind eine Manifest -Datei (JSON) und ein Hintergrundskript. Das Manifest bietet Erweiterungsinformationen (Version, Ressourcen, Berechtigungen), während das Hintergrundskript Browserereignisse (wie neue Registerkartenerstellung) übernimmt.

Lassen Sie uns eine "Hallo, Welt!" Erstellen Erweiterung:

Erstellen Sie einen Ordner (hello-world-chrome) und Dateien (manifest.json, background.js).
manifest.json:

<code class="language-json">{
  "name": "Hello World Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}</code>

background.js:

<code class="language-javascript">chrome.runtime.onInstalled.addListener(() => {
  alert('Hello, World!');
});</code>

Installieren Sie die Erweiterung: Aktivieren Sie den Entwicklermodus in Chrome (chrome://extensions/). Klicken Sie auf "Auspacken", wählen Sie den Ordner hello-world-chrome und klicken Sie auf "Öffnen". Eine "Hallo, Welt!" Alarm sollte erscheinen.

Vue Chrome Extension: Build a Browser Add-on with Vue.js

Überschreiben Sie die neue Registerkarte:

Um die neue Registerkarte anzupassen, erstellen Sie tab.html:

<code class="language-html"><!DOCTYPE html>


  <meta charset="UTF-8">
  <title>My New Tab Page!</title>


  <h1>My New Tab Page!</h1>
  <p>You can put any content here you like</p>

</code>

update manifest.json einschließen:

<code class="language-json">"chrome_url_overrides": {
  "newtab": "tab.html"
}</code>

laden Sie die Erweiterung neu, um die Änderungen zu sehen.

Vue Chrome Extension: Build a Browser Add-on with Vue.js

Integrieren Sie Vue:

Verwenden Sie die vue-web-extension -Kesselplatte (benötigt Node.js und NPM):

vue init kocal/vue-web-extension new-tab-page (Beantworten Sie die Eingabeaufforderungen, installieren Sie Axios).
cd new-tab-page
npm install
npm run watch:dev (baut zum dist -Fordner).

Diese Kesselplatte vereinfacht die Entwicklung mit heißem Nachladen und Skriptbündelung. Die Struktur umfasst src/tab/App.vue, in der Sie Ihre Vue -Komponente für die neue Registerkartenseite erstellen können. Denken Sie daran, manifest.json und webpack.config.js wie im Originalartikel beschrieben anzupassen, um korrekt auf die HTML- und JavaScript -Dateien Ihrer neuen Registerkarte zu verweisen. Der Rest der Tutorial -Details, die Witze abrufen, Daten mithilfe von Chrome -Speicher und Styling -Verbesserungen unter Verwendung von vue-awesome im Rahmen dieser Vue -Komponente bestehen. Schließlich wird der Prozess der Verpackung und Hochladen in den Chrome -Webladen beschrieben.

Das obige ist der detaillierte Inhalt vonVue Chrome Extension: Erstellen Sie ein Browser-Add-On mit Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript json css chrome html npm webpack for while select include using finally JS this alert display background github ui Access axios

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So bauen Sie ein Vue -Frontend für ein kopfloses CMSNächster Artikel：So bauen Sie ein Vue -Frontend für ein kopfloses CMS

In Verbindung stehende Artikel

Mehr sehen