Gérer les onglets

Créez votre premier gestionnaire d'onglets.

Présentation

Ce tutoriel explique comment créer un gestionnaire d'onglets pour organiser les onglets de la documentation sur votre extension Chrome et le Chrome Web Store.

Pop-up de l'extension Tabs Manager
Extension Gestionnaire d'onglets

Dans ce guide, nous allons vous expliquer comment procéder comme suit :

  • Créer un pop-up d'extension à l'aide de l'API Action
  • Interroger des onglets spécifiques à l'aide de l'API Tabs
  • Protéger la confidentialité des utilisateurs grâce à des autorisations d'hôte limitées
  • Modifier le focus de l'onglet
  • Déplacer les onglets dans la même fenêtre et les regrouper
  • Renommer des groupes d'onglets à l'aide de l'API TabGroups

Avant de commencer

Ce guide part du principe que vous disposez d'une expérience de base en développement Web. Nous vous recommandons de consulter Hello World pour découvrir le workflow de développement d'extensions.

Créer l'extension

Pour commencer, créez un répertoire nommé tabs-manager pour contenir les fichiers de l'extension. Si vous préférez, vous pouvez télécharger le code source complet sur GitHub.

Étape 1 : Ajouter les données et les icônes de l'extension

Créez un fichier nommé manifest.json et ajoutez le code suivant :

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

Pour en savoir plus sur ces clés de fichier manifeste, consultez le tutoriel Temps de lecture qui explique plus en détail les métadonnées et les icônes de l'extension.

Créez un dossier images, puis téléchargez-y les icônes.

Étape 2 : Créer et styliser le pop-up

L'API Action contrôle l'action de l'extension (icône de la barre d'outils). Lorsque l'utilisateur clique sur l'action de l'extension, elle exécute du code ou ouvre un pop-up, comme dans ce cas. Commencez par déclarer le pop-up dans le fichier manifest.json :

{
  "action": {
    "default_popup": "popup.html"
  }
}

Un pop-up est semblable à une page Web, à une exception près : il ne peut pas exécuter de code JavaScript intégré. Créez un fichier popup.html et ajoutez le code suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./popup.css" />
  </head>
  <body>
    <template id="li_template">
      <li>
        <a>
          <h3 class="title">Tab Title</h3>
          <p class="pathname">Tab Pathname</p>
        </a>
      </li>
    </template>

    <h1>Google Dev Docs</h1>
    <button>Group Tabs</button>
    <ul></ul>

    <script src="./popup.js" type="module"></script>
  </body>
</html>

Ensuite, vous allez styliser le pop-up. Créez un fichier popup.css et ajoutez le code suivant :

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

Étape 3 : Gérer les onglets

L'API Tabs permet à une extension de créer, d'interroger, de modifier et de réorganiser les onglets du navigateur.

Demander une autorisation

De nombreuses méthodes de l'API Tabs peuvent être utilisées sans demander d'autorisation. Toutefois, nous avons besoin d'accéder au title et à l'URL des onglets. Ces propriétés sensibles nécessitent une autorisation. Nous pourrions demander l'autorisation "tabs", mais cela donnerait accès aux propriétés sensibles de tous les onglets. Comme nous ne gérons que les onglets d'un site spécifique, nous allons demander des autorisations d'hôte limitées.

Les autorisations d'hôte limitées nous permettent de protéger la confidentialité des utilisateurs en accordant une autorisation élevée à des sites spécifiques. Cela donnera accès aux propriétés title et URL, ainsi qu'à des fonctionnalités supplémentaires. Ajoutez le code mis en surbrillance au fichier manifest.json :

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 Quelles sont les principales différences entre l'autorisation "tabs" et les autorisations d'hôte ?

L'autorisation "tabs" et les autorisations d'hôte présentent toutes deux des inconvénients.

L'autorisation "tabs" permet à une extension de lire des données sensibles sur tous les onglets. Au fil du temps, ces informations pourraient être utilisées pour collecter l'historique de navigation d'un utilisateur. Par conséquent, si vous demandez cette autorisation, Chrome affichera le message d'avertissement suivant lors de l'installation :

Boîte de dialogue d&#39;avertissement concernant l&#39;autorisation des onglets

Les autorisations d'hôte permettent à une extension de lire et d'interroger les propriétés sensibles d'un onglet correspondant, et d'injecter des scripts dans ces onglets. Les utilisateurs verront le message d'avertissement suivant lors de l'installation :

Boîte de dialogue d&#39;avertissement concernant l&#39;autorisation d&#39;accès à l&#39;hôte

Ces avertissements peuvent être alarmants pour les utilisateurs. Pour une meilleure expérience d'intégration, nous vous recommandons d'implémenter des autorisations facultatives.

Interroger les onglets

Vous pouvez récupérer les onglets à partir d'URL spécifiques à l'aide de la méthode tabs.query(). Créez un fichier popup.js et ajoutez le code suivant :

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 Puis-je utiliser directement les API Chrome dans le pop-up ?

Un pop-up et d'autres pages d'extension peuvent appeler n'importe quelle API Chrome, car ils sont diffusés à partir du schéma Chrome. Par exemple, chrome-extension://EXTENSION_ID/popup.html.

Se concentrer sur un onglet

Tout d'abord, l'extension trie les noms des onglets (les titres des pages HTML contenues) par ordre alphabétique. Ensuite, lorsqu'un élément de la liste est cliqué, il se concentre sur cet onglet à l'aide de tabs.update() et affiche la fenêtre au premier plan à l'aide de windows.update(). Ajoutez le code suivant au fichier popup.js :

...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));

const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title.split("-")[0].trim();
  const pathname = new URL(tab.url).pathname.slice("/docs".length);

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // need to focus window as well as the active tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}
document.querySelector("ul").append(...elements);
...

💡 JavaScript intéressant utilisé dans ce code

  • Le Collator utilisé pour trier le tableau d'onglets par langue préférée de l'utilisateur.
  • La balise de modèle utilisée pour définir un élément HTML qui peut être cloné au lieu d'utiliser document.createElement() pour créer chaque élément.
  • Le constructeur d'URL utilisé pour créer et analyser des URL.
  • La syntaxe de propagation utilisée pour convertir l'ensemble d'éléments en arguments dans l'appel append().

Regrouper les onglets

L'API TabGroups permet à l'extension de nommer le groupe et de choisir une couleur d'arrière-plan. Ajoutez l'autorisation "tabGroups" au fichier manifeste en ajoutant le code mis en surbrillance :

{
  "permissions": [
    "tabGroups"
  ]
}

Dans popup.js, ajoutez le code suivant pour créer un bouton qui regroupera tous les onglets à l'aide de tabs.group() et les déplacera dans la fenêtre actuelle.

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  if (tabIds.length) {
    const group = await chrome.tabs.group({ tabIds });
    await chrome.tabGroups.update(group, { title: "DOCS" });
  }
});

Vérifier que cela fonctionne

Vérifiez que la structure de fichiers de votre projet correspond à l'arborescence de répertoires suivante :

Contenu du dossier du gestionnaire d&#39;onglets : manifest.json, popup.js, popup.css, popup.html et le dossier &quot;images&quot;.

Charger votre extension localement

Pour charger une extension non empaquetée en mode développeur, suivez les étapes décrites dans Hello World.

Ouvrir quelques pages de documentation

Ouvrez les documents suivants dans différentes fenêtres :

Cliquez sur le pop-up. Votre écran devrait ressembler à ceci :

Pop-up de l&#39;extension Tabs Manager
Pop-up de l'extension Gestionnaire d'onglets

Cliquez sur le bouton "Regrouper les onglets". Votre écran devrait ressembler à ceci :

Gestionnaire d&#39;onglets : onglets regroupés
Onglets regroupés à l'aide de l'extension Gestionnaire d'onglets

🎯 Améliorations potentielles

En fonction de ce que vous avez appris aujourd'hui, essayez d'implémenter l'une des options suivantes :

  • Personnaliser la feuille de style du pop-up
  • Modifier la couleur et le titre du groupe d'onglets
  • Gérer les onglets d'un autre site de documentation
  • Ajouter la prise en charge du dégroupement des onglets regroupés

Continuez à créer !

Félicitations pour avoir terminé ce tutoriel 🎉. Continuez à développer vos compétences en suivant d'autres tutoriels de cette série :

Extension Objectifs de l'atelier
Temps de lecture Insérer automatiquement un élément sur chaque page.
Mode Sans distractions Exécuter du code sur la page actuelle après avoir cliqué sur l'action de l'extension.

Continuer à explorer

Nous espérons que vous avez apprécié la création de cette extension Chrome et que vous êtes impatient de poursuivre votre parcours d'apprentissage du développement Chrome. Nous vous recommandons le parcours de formation suivant :

  • Le guide du développeur contient des dizaines de liens supplémentaires vers des éléments de documentation pertinents pour la création d'extensions avancées.
  • Les extensions ont accès à des API puissantes au-delà de ce qui est disponible sur le Web ouvert. La documentation des API Chrome présente chaque API.