Vereinfachen Sie den Stil der aktuellen Seite, indem Sie auf das Symbol für die Erweiterung in der Symbolleiste klicken.
Übersicht
In dieser Anleitung wird eine Erweiterung erstellt, die das Gestalten der Chrome-Erweiterung vereinfacht und Dokumentationsseiten des Chrome Web Store, damit sie leichter zu lesen sind.
In diesem Leitfaden wird Folgendes erläutert:
- Verwenden Sie den Extension Service Worker als Veranstaltungskoordinator.
- Schützen Sie die Privatsphäre der Nutzer durch die Berechtigung
"activeTab"
. - Code ausführen, wenn der Nutzer auf das Symbol der Erweiterungssymbolleiste klickt.
- Verwenden Sie die Scripting API, um ein Stylesheet einzufügen und zu entfernen.
- Verwenden Sie eine Tastenkombination, um Code auszuführen.
Vorbereitung
In diesem Leitfaden wird davon ausgegangen, dass Sie über grundlegende Kenntnisse in der Webentwicklung verfügen. Wir empfehlen Ihnen, sich die Hello World ist eine Einführung in den Workflow zur Entwicklung von Erweiterungen.
Erweiterung erstellen
Erstellen Sie zuerst ein neues Verzeichnis mit dem Namen focus-mode
, in dem die Dateien der Erweiterung gespeichert werden. Wenn Sie
bevorzugt wird, können Sie den vollständigen Quellcode von GitHub herunterladen.
Schritt 1: Erweiterungsdaten und Symbole hinzufügen
Erstellen Sie eine Datei mit dem Namen manifest.json
und fügen Sie den folgenden Code ein.
{
"manifest_version": 3,
"name": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Weitere Informationen zu diesen Manifestschlüsseln finden Sie unter „Skripts auf jedem Tab ausführen“. in der die Metadaten und Symbole der Erweiterung ausführlicher erläutert werden.
Erstellen Sie einen images
-Ordner und laden Sie die Symbole herunter.
Schritt 2: Erweiterung initialisieren
Erweiterungen können Browserereignisse im Hintergrund über den Dienst der Erweiterung überwachen. Worker. Service Worker sind spezielle JavaScript-Umgebungen, und enden, wenn sie nicht benötigt werden.
Registrieren Sie zuerst den Service Worker in der Datei manifest.json
:
{
...
"background": {
"service_worker": "background.js"
},
...
}
Erstellen Sie eine Datei mit dem Namen background.js
und fügen Sie den folgenden Code hinzu:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
Das erste Ereignis, das unser Service Worker wartet,
runtime.onInstalled()
Mit dieser Methode kann die Erweiterung eine Initiale
oder bestimmte Aufgaben
bei der Installation ausführen. Erweiterungen können die Storage API und
IndexedDB zum Speichern des Anwendungsstatus. In diesem Fall verwenden wir jedoch nur zwei Statusangaben, daher verwenden wir den Text des Badges für die Aktion, um zu prüfen, ob die Erweiterung aktiviert ist. oder „AUS“.
Schritt 3: Erweiterungsaktion aktivieren
Mit der Erweiterungsaktion wird das Symbol der Erweiterung in der Symbolleiste gesteuert. Jedes Mal, wenn Nutzende auf die
Erweiterungssymbol, wird entweder Code ausgeführt (wie in diesem Beispiel) oder es wird ein Pop-up-Fenster angezeigt. Fügen Sie den
folgenden Code, um die Erweiterungsaktion in der Datei manifest.json
zu deklarieren:
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
Die „activeTab“-Berechtigung verwenden, um die Privatsphäre der Nutzer zu schützen
Die Berechtigung activeTab
gewährt der Erweiterung vorübergehend die Möglichkeit, Code auszuführen
auf dem aktiven Tab. Außerdem erhalten Sie Zugriff auf sensible Properties von
zum aktuellen Tab.
Diese Berechtigung wird aktiviert, wenn der Nutzer die Erweiterung auffordert. In diesem Fall ruft der Nutzer die Methode indem Sie auf die Erweiterungsaktion klicken.
💡 Durch welche anderen Nutzerinteraktionen wird die ActiveTab-Berechtigung in meiner eigenen Erweiterung aktiviert?
- Durch Drücken einer Tastenkombination.
- Auswählen eines Kontextmenüelements
- Ein Vorschlag von der Omnibox wird angenommen.
- Ein Pop-up-Fenster für eine Erweiterung wird geöffnet.
Mit der Berechtigung "activeTab"
können Nutzer die Erweiterung gezielt auf dem
Tab mit Fokus; So schützt es die Privatsphäre der Nutzenden. Ein weiterer Vorteil ist, dass es nicht
wird eine Berechtigungswarnung ausgelöst.
Wenn du die Berechtigung "activeTab"
verwenden möchtest, füge sie dem Berechtigungsarray des Manifests hinzu:
{
...
"permissions": ["activeTab"],
...
}
Schritt 4: Status des aktuellen Tabs verfolgen
Nachdem der Nutzer auf die Erweiterungsaktion geklickt hat, prüft die Erweiterung, ob die URL mit einer
Dokumentationsseite. Als Nächstes wird der Status des aktuellen Tabs geprüft und der nächste Status festgelegt. Fügen Sie den
folgenden Code an background.js
:
const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON';
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
Schritt 5: Stylesheet hinzufügen oder entfernen
Jetzt ist es an der Zeit, das Layout der Seite zu ändern. Erstellen Sie eine Datei mit dem Namen focus-mode.css
und fügen Sie den
folgenden Code:
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
Fügen oder entfernen Sie das Stylesheet mithilfe der Scripting API. Starten
So deklarieren Sie im Manifest die Berechtigung "scripting"
:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Fügen Sie abschließend in background.js
den folgenden Code hinzu, um das Layout der Seite zu ändern:
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡 Kann ich statt eines Stylesheets die Scripting API zum Einfügen von Code verwenden?
Ja. Sie können scripting.executeScript()
verwenden, um JavaScript einzuschleusen.
Optional: Tastenkombination zuweisen
Füge eine Verknüpfung hinzu, um das Aktivieren oder Deaktivieren des Fokusmodus zu vereinfachen. Fügen Sie den
"commands"
-Schlüssel für das Manifest.
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
Der Schlüssel "_execute_action"
führt denselben Code wie das action.onClicked()
-Ereignis aus, es werden also keine zusätzlichen
Code erforderlich.
Testen, ob es funktioniert
Überprüfen Sie, ob die Dateistruktur Ihres Projekts so aussieht:
Erweiterung lokal laden
Wenn Sie eine entpackte Erweiterung im Entwicklermodus laden möchten, folgen Sie der Anleitung unter Hello World.
Erweiterung auf einer Dokumentationsseite testen
Öffnen Sie zunächst eine der folgenden Seiten:
- Willkommen bei der Dokumentation zu Chrome-Erweiterungen
- Im Chrome Web Store veröffentlichen
- Scripting API
Klicken Sie dann auf die Erweiterungsaktion. Wenn Sie eine Tastenkombination eingerichtet haben, können Sie sie testen, indem Sie Ctrl + B
oder Cmd + B
drücken.
Dies sollte folgendermaßen aussehen:
<ph type="x-smartling-placeholder">in
<ph type="x-smartling-placeholder">🎯 Mögliche Verbesserungen
Basierend auf dem, was Sie heute gelernt haben, versuchen Sie Folgendes:
- Verbessern Sie das CSS-Style-Sheet.
- Anderes Tastenkürzel zuweisen.
- Ändern Sie das Layout Ihres bevorzugten Blogs oder Ihrer bevorzugten Dokumentationswebsite.
und erstelle weiter interessante Inhalte.
Sie haben diese Anleitung abgeschlossen 🎉. Verbessere deine Fähigkeiten weiter, indem du andere Tutorials zu dieser Reihe:
Erweiterung | Lerninhalte |
---|---|
Lesezeit | Wenn Sie ein Element automatisch in eine bestimmte Gruppe von Seiten einfügen möchten. |
Tabs-Manager | Zum Erstellen eines Pop-ups, über das Browsertabs verwaltet werden. |
Weiter erkunden
Wir hoffen, dass Ihnen die Entwicklung dieser Chrome-Erweiterung gefallen hat, und freuen uns, den Lernpfad der Entwicklung. Wir empfehlen die folgenden Lernpfade:
- Das Entwicklerhandbuch enthält Dutzende zusätzliche Links zu Dokumentationen. die für die Erstellung erweiterter Erweiterungen relevant sind.
- Erweiterungen haben Zugriff auf leistungsstarke APIs, die über das hinausgehen, was im offenen Web verfügbar ist. In der Dokumentation zu Chrome APIs werden die einzelnen APIs Schritt für Schritt beschrieben.