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 Sprachwähler, der wichtige Konzepte für die Entwicklung von Schlüsselerweiterungen lernt.

Was Sie lernen:

• Aktivieren Sie den Entwicklermodus von Chrome zum Testen und Debuggen.
• Erstellen der manifest.json -Datei - das Steuerzentrum der Erweiterung.
• Einbeziehung von Flag -Symbolen für die Sprachauswahl.
• Erstellen eines Popup -Menüs für die Benutzerinteraktion.
• Hinzufügen und Verwalten von Sprachen innerhalb der Erweiterung.
• Veröffentlichung Ihrer Erweiterung im Chrome -Webladen (erfordert eine Registrierung und eine Gebühr).

1. Einrichten des Chrome -Entwicklermodus:

Beginnen Sie mit Aktivierung des Entwicklermodus in Chrome. 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, "Weitere Tools"> "Erweiterungen" auswählen und dann den Schalter "Developer -Modus" im oberen rechten Tippschalter aktivieren.

Weitere Informationen zu verfügbaren Funktionen finden Sie in der Dokumentation von Chrome Extension APIS.

2. Die manifest.json -Datei:

Erstellen Sie für Ihr Projekt einen neuen Ordner (z. B. "Sprachpicker"). Erstellen Sie manifest.json mit diesem Code:

 {
  "Name": "Sprachpicker",
  "Beschreibung": "Eine einfache Erweiterung der Sprachauswahl",
  "Version": "1.0",
  "Manifest_version": 3,
  "Hintergrund": {
    "service_worker": "Hintergrund.js"
  },
  "Berechtigungen": ["Speicher"],
  "Aktion": {
    "default_popup": "popup.html"
  }
}

Diese Datei gibt Chrome über Ihre Erweiterung mit: Name, Beschreibung, Version, Hintergrundskript ( background.js ), erforderliche Berechtigungen (Zugriff auf Speicher) und die Popup -HTML -Datei ( popup.html ).

3.. Hinzufügen von Sprachflag -Symbolen:

Erstellen Sie ein "Flags" -Subdadum in Ihrem Projektordner. Laden Sie fünf Flaggenbilder (z. B. Englisch, Chinesisch, Italienisch usw.) herunter und speichern Sie sie als english.png , chinese.png usw.

4. Der background.js Service Worker:

Erstellen Sie mit diesem Code background.js :

 lass LACHE = 'URL (Flags/Englisch.png)';

chrome.runtime.oninstalled.addListener (() => {
  chrome.storage.sync.set ({Sprache});
  console.log (`Standardsprache auf $ {Sprache}`);
});

Dies setzt die Standardsprache bei der Installation auf Englisch.

5. Erstellen des Popup -Menüs ( popup.html und popup.css ):

Erstellen Sie popup.html :

 


  <title>Sprachpflücker</title>
  <link rel="stylesheet" href="popup.css">


  <div id="flagOptions"></div>
  <script src="popup.js"></script>

Erstellen Sie popup.css :

 .Container {Breite: 300px; }
Taste {Höhe: 30px; Breite: 30px; Umriss: Keine; Grenze: Keine; Grenzradius: 50%; Rand: 10px; Hintergrundrepeat: No-Repeat; Hintergrundposition: Zentrum; Hintergrundgröße: enthalten; }
.

6. Popup JavaScript ( popup.js ):

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

// ... (JavaScript -Code zum dynamischen Erstellen von Schaltflächen für Sprachflags und Handle -Klicks, ähnlich dem ursprünglichen Beispiel, aber für die Kürze vereinfacht) ...
`` `` (Dieser Abschnitt würde das JavaScript enthalten, um die Sprachschaltflächen aus dem Array "OtherLangs" dynamisch zu generieren, Klick -Ereignisse zu behandeln, um die ausgewählte Sprache zu ändern, und die Benutzeroberfläche entsprechend zu aktualisieren. Aufgrund von Längenbeschränkungen wird dieser detaillierte Code weggelassen, kann jedoch aus dem ursprünglichen Beispiel abgeleitet werden.)


** 7. Laden und Tests: **

Klicken Sie in "Chrome: // Extensions/", klicken Sie auf "Auspacken", wählen Sie Ihren Projektordner und testen Sie Ihre Erweiterung.

** 8. Veröffentlichung (Fortgeschrittene): **

Registrieren Sie sich als Chrome Web Store Developer (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!