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 explique comment créer un gestionnaire d'onglets pour organiser les onglets de la documentation de l'extension Chrome et 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.
Recherchez 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é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

Dans ce guide, nous partons du principe que vous avez des connaissances de base en développement Web. Nous vous recommandons de vérifier Hello World pour obtenir une présentation du workflow de développement des extensions.

Créer l'extension

Pour commencer, créez un répertoire appelé tabs-manager qui contiendra les fichiers de l'extension. Si vous 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 du fichier manifeste, consultez le tutoriel Temps de lecture, qui explique 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éez le pop-up et appliquez-lui 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, elle exécutera du code ou ouvrira un pop-up, comme dans le cas présent. Commencez par déclarez le pop-up dans 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 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'option top level await en ajoutant type="module" au script. .

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érez 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 au 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. Étant donné que nous ne gérons que les onglets d'un site spécifique, nous demanderons 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 à certains sites. Cette action accordera l'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 les autorisations liées aux onglets et les autorisations d'accès à l'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 dans 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 affichera le message d'avertissement suivant au moment de l'installation:

Boîte de dialogue d'avertissement concernant l'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. Lors de l'installation, les utilisateurs verront le message d'avertissement suivant:

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

Cet avertissement peut inquiéter les utilisateurs. Pour faciliter le processus d'intégration, nous vous recommandons d'ajouter 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éer un 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 ?

Une fenêtre pop-up et d'autres pages d'extension peuvent appeler n'importe quelle API Chrome, car elles sont diffusées depuis la schéma Chrome. Exemple : chrome-extension://EXTENSION_ID/popup.html.

Sélectionner un onglet

Tout d'abord, l'extension trie les noms d'onglets (les titres des pages HTML qu'elles contiennent) par ordre alphabétique. Ensuite, lorsqu'un utilisateur clique sur un élément de la liste, sélectionner cet onglet avec tabs.update() et placer 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 d'onglets selon la 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.
Constructeur d'URL utilisé pour créer et analyser des URL.
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 un arrière-plan. couleur. Ajoutez l'autorisation "tabGroups" au fichier manifeste en insérant 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éplacer 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:

Contenu du dossier du gestionnaire d'onglets: manifest.json, popup.js, popup.css, popup.html et dossier "images".

Charger votre extension en local

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 la fenêtre pop-up. Elle devrait se présenter comme ceci :

Cliquez sur "Regrouper les onglets" . Elle devrait se présenter comme ceci :

🛍 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 de la fenêtre pop-up.
Modifiez la couleur et le titre du groupe d'onglets.
Gérez les onglets d'un autre site de documentation.
Ajout de la possibilité de dégrouper les onglets groupés.

Continuez à développer !

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

Extension	Objectifs de l'atelier
Temps de lecture	Insérer automatiquement un élément sur chaque page
Mode Sans distractions	Permet d'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 plu et sommes impatients de poursuivre votre d'apprentissage du développement d'applications. Nous vous recommandons de suivre le parcours de formation suivant:

Le guide du développeur contient des dizaines de liens supplémentaires vers de la documentation. pertinentes pour créer des extensions avancées.
Les extensions ont accès à des API puissantes, en plus de celles disponibles sur le Web ouvert. La documentation des API Chrome décrit chacune de ces API.