Cette page a été traduite par l'API Cloud Translation.

Gérer les onglets

Créez votre premier gestionnaire d'onglets.

Présentation

Ce tutoriel crée un gestionnaire d'onglets pour organiser les onglets de votre extension Chrome et de la documentation du Chrome Web Store.

Dans ce guide, nous allons vous expliquer comment effectuer les opérations suivantes:

Créez une fenêtre pop-up d'extension à l'aide de l'API Action.
Interrogez des onglets spécifiques à l'aide de l'API Tabs.
Protégez la confidentialité des utilisateurs grâce à des autorisations d'hôte étroites.
Déplacez le focus de l'onglet.
Déplacez les onglets vers la même fenêtre et regroupez-les.
Renommez des groupes d'onglets à l'aide de l'API TabGroups.

Avant de commencer

Ce guide part du principe que vous avez 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 appelé tabs-manager pour stocker les fichiers de l'extension. Si vous préférez, vous pouvez télécharger le code source complet sur GitHub.

Étape 1: Ajoutez 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 sur le 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éez et stylisez 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, du code est exécuté ou une fenêtre pop-up s'ouvre, comme dans ce cas. Commencez par déclarer le pop-up dans le 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>

Conseil: Vous pouvez utiliser l'attente de premier niveau en ajoutant type="module" à la balise de script.

Vous allez maintenant 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 dans le 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 aux title et 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 étroites nous permettent de protéger la confidentialité des utilisateurs en accordant des autorisations élevées à des sites spécifiques. Vous aurez ainsi 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 des onglets et les autorisations de l'hôte ?

L'autorisation "tabs" et les autorisations de l'hôte présentent des inconvénients.

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

Boîte de dialogue d'avertissement sur les autorisations des onglets

Les autorisations d'hôte permettent à une extension de lire et d'interroger les propriétés sensibles d'un onglet correspondant, ainsi que d'injecter des scripts dans ces onglets. Le message d'avertissement suivant s'affiche au moment de l'installation:

Boîte de dialogue d'avertissement sur l'autorisation d'accès à l'hôte

Ces avertissements peuvent inquiéter 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 des API Chrome directement dans la fenêtre 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. Exemple : chrome-extension://EXTENSION_ID/popup.html.

Sélectionner un onglet

Tout d'abord, l'extension trie les noms des onglets (les titres des pages HTML qu'ils contiennent) par ordre alphabétique. Ensuite, lorsqu'un élément de liste est sélectionné, l'onglet correspondant est mis en surbrillance à l'aide de tabs.update() et la fenêtre est mise en avant à 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

Collator utilisé pour trier le tableau des onglets en fonction de la langue préférée de l'utilisateur.
La balise de modèle permet de définir un élément HTML pouvant être cloné au lieu d'utiliser document.createElement() pour créer chaque élément.
Constructeur d'URL utilisé pour créer et analyser des URL.
Syntaxe Spread 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 le code fonctionne

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

Le contenu du dossier du gestionnaire d'onglets: manifest.json, popup.js, popup.css, popup.html et le dossier images.

Charger votre extension en local

Pour charger une extension non empaquetée en mode développeur, suivez la procédure décrite dans Hello World.

Ouvrir quelques pages de documentation

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

Cliquez sur le pop-up. Elle devrait se présenter comme ceci :

Cliquez sur le bouton "Grouper les onglets". Elle devrait se présenter comme ceci :

🎯 Améliorations potentielles

Sur la base de ce que vous avez appris aujourd'hui, essayez d'appliquer l'une des solutions suivantes:

Personnalisez la feuille de style du pop-up.
Modifiez la couleur et le titre du groupe d'onglets.
Gérer les onglets d'un autre site de documentation
Possibilité de désagréger les onglets regroupés.

Continuez à créer !

Félicitations, vous avez terminé ce tutoriel 🎉. Poursuivez votre apprentissage en suivant les autres tutoriels de cette série:

Extension	Objectifs de l'atelier
Temps de lecture	Pour insérer automatiquement un élément sur chaque page :
Mode Sans distractions	Pour exécuter du code sur la page active après avoir cliqué sur l'action de l'extension.

Continuer à explorer

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

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