Tab Roulette - ma première extension

Mon objectif actuel est de créer une extension Chrome simple qui utilise les capacités d'arrière-plan du framework d'extension.

Pour récapituler, le script d'arrière-plan fonctionne comme un service worker, principalement conçu pour gérer des tâches qui ne nécessitent pas d'interaction directe de l'utilisateur.

L'un de ses rôles clés est d'agir en tant que centre de communication ou gestionnaire d'événements, servant de seul composant persistant et fiable dans l'architecture des extensions de navigateur. Contrairement aux scripts de contenu, aux popups ou aux pages d'options, qui sont éphémères, le service worker en arrière-plan assure la continuité en redémarrant automatiquement lorsqu'il est terminé pour gérer les événements entrants.

Je prévois d'exploiter cette capacité du script d'arrière-plan en tant que contrôleur central de mon extension.

Le cas d'utilisation

Cette première extension Chrome sera assez simple. Il écoutera les clics sur l'icône d'action de l'extension et répondra en déclenchant un comportement semblable à celui de la roulette. La roulette activera séquentiellement les onglets actuellement ouverts dans le navigateur de l'utilisateur pendant une courte période jusqu'à ce qu'un onglet soit sélectionné au hasard.

Comme vous pouvez le constater, cette extension n'a pas de fonction pratique mais est uniquement destinée à servir d'exercice d'apprentissage.

Le manifeste

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

En plus des icônes spécifiées dans le manifeste pour une utilisation dans le Chrome Web Store et l'interface de gestion des extensions, l'ajout le plus important est l'attribut action. Cet attribut configure le comportement de l'extension lorsque l'utilisateur clique sur l'icône de la barre d'outils. Dans notre cas, il demande au technicien de service de lancer une roulette à onglets lors de l'interaction de l'utilisateur.

A prendre en compte
Mon code utilise les importations ES, mais comme indiqué précédemment, le service_worker n'a pas été explicitement déclaré en tant que module. Comment ça fonctionnait encore ?

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

Ces importations sont traitées et résolues par Vite pendant le processus de regroupement.

Arrière-plan

Comme mentionné précédemment, le script d'arrière-plan écoutera les clics sur l'icône d'action et lancera une roulette à onglets en réponse.

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

Aspects clés de la logique d'écoute à souligner : Tout d'abord, je dois rassembler tous les onglets actuellement ouverts dans la fenêtre active. Ceci est essentiel car mon code nécessite des références à ces onglets pour les parcourir séquentiellement.

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

Au début, j'ai été confus en utilisant chrome.tabs.query sans spécifier de windowId, car il renvoyait tous les onglets de toutes les fenêtres ouvertes du navigateur, alors que je voulais uniquement les onglets de la fenêtre active. Cela a conduit à des résultats inattendus en raison du plus grand nombre d'onglets dans la liste.

Une fois que j'ai compris ce comportement, l'activation séquentielle des onglets est devenue simple. Cela implique simplement de mettre à jour les propriétés des onglets pour définir chacun d'eux comme actif dans l'ordre jusqu'à ce qu'un onglet aléatoire soit finalement sélectionné.

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

Un autre objectif que je voulais atteindre était d'ajuster le rythme auquel les onglets sont activés : en commençant rapidement et en ralentissant vers la fin. Pour ce faire, la fonction native setInterval que j'ai utilisée lors du test initial était insuffisante. Au lieu de cela, j'ai implémenté un petit utilitaire qui m'a permis de créer un intervalle réglable, offrant ainsi un moyen de modifier dynamiquement son timing selon les besoins.

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

Et c'est tout : une extension simple avec un cas d'utilisation ludique, servant d'excuse pour approfondir le monde des extensions de navigateur. Je partage également le code source avec vous si vous êtes curieux de connaître les détails.

Oh, et j'ai également utilisé ce projet pour explorer le processus de publication, que j'ai trouvé assez simple. Maintenant, j'attends juste la critique et la publication finale.

https://github.com/ivaneffable/tabRoulette

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!