Tab Roulette – meine erste Erweiterung

Mein aktuelles Ziel ist es, eine einfache Chrome-Erweiterung zu erstellen, die die Hintergrundfunktionen des Erweiterungsframeworks nutzt.

Um es noch einmal zusammenzufassen: Das Hintergrundskript fungiert als Service-Worker und ist in erster Linie darauf ausgelegt, Aufgaben zu erledigen, die keine direkte Benutzerinteraktion erfordern.

Eine seiner Schlüsselaufgaben besteht darin, als Kommunikationsknotenpunkt oder Ereignishandler zu fungieren und als einzige dauerhafte und zuverlässige Komponente in der Browser-Erweiterungsarchitektur zu fungieren. Im Gegensatz zu Inhaltsskripten, Popups oder Optionsseiten, die kurzlebig sind, stellt der Hintergrunddienstmitarbeiter die Kontinuität sicher, indem er bei Beendigung automatisch neu startet, um eingehende Ereignisse zu verarbeiten.

Ich habe vor, diese Funktion des Hintergrundskripts als zentralen Controller für meine Erweiterung zu nutzen.

Der Anwendungsfall

Diese erste Chrome-Erweiterung wird recht unkompliziert sein. Es wartet auf Klicks auf das Aktionssymbol der Erweiterung und reagiert, indem es ein rouletteähnliches Verhalten auslöst. Das Roulette aktiviert nacheinander die aktuell im Browser des Benutzers geöffneten Tabs für kurze Zeit, bis ein Tab zufällig ausgewählt bleibt.

Wie Sie sehen, dient diese Erweiterung keinem praktischen Zweck, sondern ist lediglich als Lernübung gedacht.

Das Manifest

{
  "name": "TabRoulette",
  "version": "0.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon32.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_title": "Click to start",
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

Zusätzlich zu den im Manifest angegebenen Symbolen zur Verwendung im Chrome Web Store und in der Erweiterungsverwaltungsschnittstelle ist das Aktionsattribut die wichtigste Ergänzung. Dieses Attribut konfiguriert das Verhalten der Erweiterung, wenn auf das Symbolleistensymbol geklickt wird. In unserem Fall weist es den Servicemitarbeiter an, bei Benutzerinteraktion ein Tab-Roulette zu starten.

Zu berücksichtigen
Mein Code verwendet ES-Importe, aber wie bereits gezeigt, wurde service_worker nicht explizit als Modul deklariert. Wie hat es trotzdem funktioniert?

"background": {
  "service_worker": "service-worker.js",
  "type": "module"
}

Diese Importe werden von Vite während des Bündelungsprozesses abgewickelt und gelöst.

Hintergrund

Wie bereits erwähnt, wartet das Hintergrundskript auf Klicks auf das Aktionssymbol und initiiert als Reaktion ein Tab-Roulette.

chrome.action.onClicked.addListener(async () => {
 ...
})

Hervorzuhebende Hauptaspekte der Listener-Logik: Zuerst muss ich alle derzeit im aktiven Fenster geöffneten Registerkarten sammeln. Dies ist wichtig, da mein Code Verweise auf diese Registerkarten benötigt, um sie nacheinander zu durchlaufen.

const currentWindow = await chrome.windows.getCurrent();
const windowTabs = await chrome.tabs.query({
  windowId: currentWindow.id,
});

Anfangs war ich verwirrt, als ich chrome.tabs.query ohne Angabe einer Fenster-ID verwendete, da alle Tabs in allen geöffneten Browserfenstern zurückgegeben wurden, während ich nur die Tabs aus dem aktiven Fenster haben wollte. Dies führte aufgrund der größeren Anzahl von Registerkarten in der Liste zu unerwarteten Ergebnissen.

Nachdem ich dieses Verhalten verstanden hatte, war es einfach, die Registerkarten nacheinander zu aktivieren. Es geht lediglich darum, die Registerkarteneigenschaften zu aktualisieren, um jede einzelne nacheinander als aktiv festzulegen, bis schließlich eine zufällige Registerkarte ausgewählt wird.

{
  "name": "TabRoulette",
  "version": "0.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon32.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_title": "Click to start",
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

Ein weiteres Ziel, das ich erreichen wollte, bestand darin, die Geschwindigkeit anzupassen, mit der die Tabs aktiviert werden – schnell beginnen und gegen Ende langsamer werden. Um dies zu erreichen, reichte die native setInterval-Funktion, die ich im ersten Test verwendet habe, nicht aus. Stattdessen habe ich ein kleines Dienstprogramm implementiert, mit dem ich ein anpassbares Intervall erstellen und so dessen Zeitablauf je nach Bedarf dynamisch ändern konnte.

"background": {
  "service_worker": "service-worker.js",
  "type": "module"
}

Und das ist es – eine einfache Erweiterung mit einem spielerischen Anwendungsfall, die als Vorwand dient, tiefer in die Welt der Browser-Erweiterungen einzutauchen. Ich teile auch den Quellcode mit Ihnen, wenn Sie neugierig auf die Details sind.

Oh, und ich habe dieses Projekt auch genutzt, um den Veröffentlichungsprozess zu erkunden, der meiner Meinung nach recht unkompliziert war. Jetzt warte ich nur noch auf die Rezension und die endgültige Veröffentlichung.

https://github.com/ivaneffable/tabRoulette

Das obige ist der detaillierte Inhalt vonTab Roulette – meine erste Erweiterung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!