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.
<ph type="x-smartling-placeholder">![Pop-up de l'extension Gestionnaire d'onglets](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-725ac725aaa4d.png?authuser=9&hl=fr)
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>
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:
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:
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:
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:
- Concevoir l'interface utilisateur
- Visibilité sur le Chrome Web Store
- Présentation du développement des extensions
- Format du fichier manifeste
- Publier sur le Chrome Web Store
Cliquez sur la fenêtre pop-up. Elle devrait se présenter comme ceci :
<ph type="x-smartling-placeholder">![Pop-up de l'extension Gestionnaire d'onglets](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-f958d72e1a9ae.png?authuser=9&hl=fr)
Cliquez sur "Regrouper les onglets" . Elle devrait se présenter comme ceci :
<ph type="x-smartling-placeholder">![Onglets regroupés dans le gestionnaire d'onglets](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-grouped-tabs-65bdf282bdf98.png?authuser=9&hl=fr)
🛍 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.