Entwicklung von Google Chrome Extensions

Dieses Tutorial führt Sie durch den Erstellen einer grundlegenden Google Chrome -Erweiterung mit HTML, CSS und JavaScript. Wir erstellen auf dem Weg einen einfachen Sprachpflücker, das wichtige Konzepte für die Entwicklung von Schlüsselerweiterungen lernt. Popup -Menü für die Benutzerinteraktion.

Hinzufügen und Verwalten von Sprachen in der Erweiterung. Einrichten des Chrom -Entwicklermodus:

Beginnen Sie mit dem Aktivieren des Entwicklermodus in Chrom. Auf diese Weise können Sie Ihre Erweiterung während der Entwicklung laden und testen. Greifen Sie darauf zu, indem Sie auf die drei vertikalen Punkte (mehr Tools) in der oberen rechten Ecke von Chrome klicken und "mehr Tools" & gt auswählen. "Erweiterungen" und dann den "Entwicklermodus" im oberen rechten Tippschalter aktivieren. Dokumentation für Details zu verfügbaren Funktionen.

2. Die Manifest.json Datei:

Erstellen Sie einen neuen Ordner (z. B. "LanguagePicker") für Ihr Projekt. Inneren erstellen Manifest.json mit diesem Code:

 {"name": "Sprachpicker", "Beschreibung": "Eine einfache Sprachauswahlerweiterung", "Version": "1.0", "Manifest_version": 3, "Hintergrund": {"service_worker": "Hintergrund.js", "permissions", "permission": "speicher", "speichung" "" ". "popup.html"}} 

Diese Datei sagt Chrome über Ihre Erweiterung: Ername, Beschreibung, Version, Hintergrundskript ( Hintergrund.js ), erforderliche Berechtigungen (Zugriff auf Speicher) und die Popup -HTML -Datei ( popup.html ). Hinzufügen von Sprachflag -Symbolen:

Erstellen Sie ein "Flags" -Subdadum in Ihrem Projektordner. Download five flag images (eg, English, Chinese, Italian, etc.) and save them as english.png, chinese.png, etc.

4. Der Hintergrund.js Service Worker:

Erstellen Hintergrund.js Mit diesem Code:

 let Language = 'url (flags/englisch.png)'; chrome.runtime.oninstalled.addListener (() = & gt; {chrome.storage.sync.set ({Sprache}); console.log (`Standardsprachensatz auf $ {Sprache}`);}); Erstellen des Popup -Menüs (<code> popup.html </code> und <code> popup.css </code>):   <p> erstellen <code> popup.html </code>: </p> <pre class="brush:php;toolbar:false"> & lt;! DocType html & gt;   <title>Language Picker</title> <link rel="stylesheet" href="popup.css">   <div id="flagOptions"></div> <script src="popup.js"></script>  

Create popup.css:

 .Container {width: 300px; } Taste {Höhe: 30px; Breite: 30px; Umriss: Keine; Grenze: Keine; Grenzradius: 50%; Rand: 10px; Hintergrundrepeat: No-Repeat; Hintergrundposition: Zentrum; Hintergrundgröße: enthalten; } .CurrentFlag {/ * Styling für das aktuell ausgewählte Flag */} 

6. Popup JavaScript ( popup.js ):

create popup.js (Dies ist eine vereinfachte Version, die eine weitere Entwicklung für die volle Funktionalität erfordert):

 // ... (JavaScript -Code, um dynamisch zu kreieren. Enthalten Sie das JavaScript, um die Sprachschaltflächen aus dem "Anderen Array" dynamisch zu generieren. Laden und Tests: ** In "Chrome: // Extensions/", klicken Sie auf "Auspacken", wählen Sie Ihren Projektordner und testen Sie Ihre Erweiterung. ** 8. Publishing (Fortgeschrittene): ** Registrieren Sie sich als Chrome -Web Store -Entwickler (erfordert eine Gebühr), um Ihre Erweiterung zu veröffentlichen. Diese optimierte Version bietet einen klareren, prägnanteren Weg zum Erstellen einer grundlegenden Chrome -Erweiterung. Denken Sie daran, den fehlenden `popup.js` -Code basierend auf der im ursprünglichen, detaillierten Beispiel dargestellten Logik auszufüllen. 

Das obige ist der detaillierte Inhalt vonEntwicklung von Google Chrome Extensions. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!