Gérer les onglets

Créez votre premier gestionnaire d'onglets.

Présentation

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

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

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

  • Créez un pop-up d'extension à l'aide de l'API Action.
  • Interrogez des onglets spécifiques à l'aide de l'API Tabs.
  • Préservez la confidentialité des utilisateurs grâce à des autorisations d'hôte restreintes.
  • Modifiez le curseur de l'onglet.
  • Déplacer les onglets dans la même fenêtre et les regrouper.
  • Renommer les groupes d'onglets à l'aide de l'API TabGroups

Avant de commencer

Ce guide suppose 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 des extensions.

Créer l'extension

Pour commencer, créez un répertoire nommé tabs-manager qui contiendra 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 la 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 les icônes dans celui-ci.

Étape 2: Créer le pop-up et lui appliquer un style

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, il exécute du code ou ouvre une fenêtre pop-up, comme dans ce cas. Commencez par déclarer le pop-up dans manifest.json:

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

Les fenêtres pop-up sont semblables à une page Web, à une exception près: elles ne peuvent 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>

Vous allez maintenant appliquer un style au 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 aux onglets title et URL, car 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 restreintes.

Les autorisations d'hôte restreintes 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 que des fonctionnalités supplémentaires. Ajoutez le code en surbrillance au fichier manifest.json:

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

💡 Quelles sont les principales différences entre l'autorisation d'accès aux onglets et les autorisations d'hôte ?

L'autorisation "tabs" et les autorisations d'hôte présentent 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 peuvent servir à 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&#39;avertissement sur 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, ainsi que d'injecter des scripts sur ces onglets. Le message d'avertissement suivant s'affichera au moment de l'installation:

Boîte de dialogue d&#39;avertissement sur l&#39;autorisation de 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 les API Chrome directement dans le pop-up ?

Un pop-up et d'autres pages d'extensions peuvent appeler n'importe quelle API Chrome, car elles sont diffusées à 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 (titres des pages HTML contenues) par ordre alphabétique. Ensuite, lorsque l'utilisateur clique sur un élément de la liste, il se concentre sur cet onglet à l'aide de tabs.update() et affiche la fenêtre au premier plan avec 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);
...

💡 Code 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 qui peut ê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.
  • La syntaxe de répartition 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 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" });
  }
});

Tester son fonctionnement

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

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

Charger l'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 la fenêtre pop-up. Votre écran devrait ressembler à ceci :

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

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

Onglets groupés du gestionnaire d&#39;onglets
Regroupement des onglets à l'aide de l'extension Gestionnaire d'onglets

💡 Améliorations potentielles

En vous basant sur ce que vous avez appris aujourd'hui, essayez de mettre en œuvre l'un des éléments suivants:

  • Personnalisez la feuille de style pop-up.
  • Modifiez la couleur et le titre du groupe d'onglets.
  • Gérer les onglets d'un autre site de documentation.
  • Ajouter la possibilité de dégrouper les onglets.

Continuez de vous développer !

Félicitations, vous avez 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 Pour insérer automatiquement un élément sur chaque page
Mode Sans distractions Pour exécuter du code sur la page actuelle après avoir cliqué sur l'action de l'extension.

Continuer à explorer

Nous espérons que cette extension Chrome vous a été utile et sommes impatients de poursuivre votre formation en matière de développement Chrome. Nous vous recommandons de suivre ce parcours de formation:

  • Le guide du développeur contient des dizaines de liens supplémentaires vers des documents liés à la création avancée d'extensions.
  • Les extensions ont accès à des API puissantes, en plus de celles disponibles sur le Web ouvert. La documentation des API Chrome présente chaque API.