Skripts in den aktiven Tab einfügen

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“.

Wichtiger Begriff:Das Badge der Aktion ist ein farbiges Banner über der Erweiterungsaktion (Symbolleiste). Symbol.

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"],
  ...
}

Erfolgreich:Die Scripting API löst keine Berechtigungswarnung aus.

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">

</ph> <ph type="x-smartling-placeholder">

</ph> Erweiterung für Konzentrationsmodus deaktiviert

in

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Erweiterung „Konzentrationsmodus“ aktiviert

🎯 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.