Il y a un an, en mai 2022, nous avons ajouté le panneau latéral à Chrome. Il s'agit d'une nouvelle surface associée qui permet aux utilisateurs d'utiliser des outils en même temps que le contenu qu'ils consultent. Aujourd'hui, nous sommes heureux de vous annoncer que votre extension peut commencer à afficher du contenu dans le panneau latéral à partir de Chrome 114.
Mieux pour les utilisateurs, plus facile pour les développeurs
Nous avons déjà vu de nombreux développeurs implémenter des expériences de type barre latérale dans leur extension. C'est pourquoi nous sommes ravis d'en faire une norme de plate-forme. Avec la nouvelle API Side Panel, vous pouvez désormais proposer une UI persistante qui s'ouvre à côté d'une page consultée par l'utilisateur. Les utilisateurs bénéficieront d'un positionnement et d'une mise en page cohérents entre les extensions. En outre, la possibilité d'afficher l'interface utilisateur sans demander d'autorisation d'hôte représente un avantage important en termes de confidentialité pour les utilisateurs, avec l'avantage supplémentaire de réduire le nombre d'avertissements qui s'affichent pour votre extension au moment de l'installation.
L'API Side Panel élimine les problèmes associés à l'injection de contenu sur une page non fiable. Elle réduit également considérablement les exigences liées au maintien de la compatibilité entre les différents sites et à la consultation des rapports de bugs concernant les perturbations accidentelles causées par votre extension.
Une aide pour les utilisateurs sur le Web
Lorsque vous créez un panneau latéral dans le cadre de votre extension, vous devez garder une chose à l'esprit: comment aidez-vous les utilisateurs à accomplir des tâches sur le Web ? Voici quelques questions à vous poser:
- En quoi mon panneau latéral aide-t-il l'utilisateur ?
- La règle d'objectif unique s'applique également à votre panneau latéral. Assurez-vous que le panneau latéral offre des fonctionnalités en rapport direct avec le reste de votre extension et avec ce que l'utilisateur essaie d'accomplir.
- Le panneau latéral ne s'affiche-t-il que lorsqu'il est pertinent ?
- L'API Side Panel vous permet de choisir les sites sur lesquels vos utilisateurs verront le panneau latéral. Vous éviterez ainsi de les diffuser lorsqu'elles ne sont pas pertinentes pour l'utilisateur ou qu'elles n'ont pas de rapport avec le contenu consulté par l'utilisateur.
- Le design est-il cohérent avec le reste de mon extension ?
- Le design de votre panneau latéral doit être attrayant et correspondre au logo, aux couleurs, aux icônes et aux polices de votre extension et de votre fiche Play Store. Les utilisateurs bénéficient ainsi d'une expérience cohérente et reconnaissable, où qu'ils se trouvent lorsqu'ils utilisent votre extension.
- Comment les utilisateurs découvrent-ils mon panneau latéral ?
- Indiquez aux nouveaux utilisateurs comment utiliser le panneau latéral en fournissant une documentation ou une formation suffisante dans l'extension. Cela vous aidera à fidéliser les utilisateurs et à éviter les avis négatifs sur votre fiche Play Store. N'oubliez pas que vous pouvez commencer à informer les utilisateurs avant qu'ils n'installent l'extension en incluant une vidéo YouTube qui leur montre comment fonctionne l'extension dans votre fiche Play Store.
Nous avons également mis à jour le Règlement du programme et les sections Bonnes pratiques et Consignes relatives à la qualité pour refléter certaines de ces considérations. Ces modifications soulignent que votre panneau latéral doit compléter l'expérience de navigation des utilisateurs en leur proposant des fonctionnalités complémentaires. Elles indiquent également clairement que le panneau latéral ne doit pas contenir de distractions inutiles.
Présentation de l'API
Pour que votre extension apparaisse dans le panneau latéral, demandez l'autorisation "sidePanel" dans votre fichier manifeste et ajoutez la clé "side_panel" avec un "default_path" qui renvoie vers une page de votre extension:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Sur un panneau latéral, vous pouvez charger des scripts et des API d'extensions d'appel comme vous le feriez sur n'importe quelle autre page d'extension. L'icône de votre panneau latéral sera basée sur l'icône de votre extension. N'oubliez pas de la définir pour la peaufiner encore plus.
Fonctionnalités supplémentaires
Vous pouvez lier le panneau latéral à votre icône d'action afin de pouvoir l'ouvrir facilement à tout moment:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Si vous souhaitez que votre panneau latéral ne s'affiche que sur des pages spécifiques, vous pouvez le modifier et l'empêcher de s'afficher ailleurs où il n'est pas pertinent pour l'utilisateur:
service-worker.js:
chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
if (!tab.url) return;
const url = new URL(tab.url);
if (url.origin === 'https://example.com') {
chrome.sidePanel.setOptions({ tabId, path: 'sidepanel.html', enabled: true });
} else {
chrome.sidePanel.setOptions({ tabId, enabled: false });
}
});
En savoir plus
Nous avons publié la documentation sur l'API Side Panel, que vous pouvez commencer à lire dès aujourd'hui. Nous avons également ajouté des exemples au dépôt chrome-extensions-samples, ce qui vous permet de voir comment utiliser l'API dans la pratique.
Comme indiqué précédemment, nos pages de règlement et nos bonnes pratiques ont également été modifiées pour vous expliquer comment créer un panneau latéral offrant la meilleure expérience utilisateur possible.
Pour vous tenir informé des actualités concernant les extensions Chrome, consultez notre page Nouveautés. Si vous avez des questions ou si vous avez besoin d'aide concernant l'API Side Panel, vous pouvez consulter le groupe Google sur les extensions Chromium.
Photo par Vardan Papikyan sur Unsplash