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. Nous avons le plaisir de vous annoncer que votre extension peut désormais afficher du contenu dans le panneau latéral, à partir de Chrome 114.
Un avantage pour les utilisateurs, une simplicité 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. Grâce à la nouvelle API du panneau latéral, vous pouvez désormais proposer une UI persistante qui s'ouvre à côté d'une page que l'utilisateur consulte. Les utilisateurs bénéficieront d'un positionnement et d'une mise en page cohérents entre les extensions. De plus, la possibilité d'afficher l'UI sans demander d'autorisations d'hôte est un avantage considérable pour la confidentialité des utilisateurs, avec l'avantage supplémentaire de réduire le nombre d'avertissements affichés pour votre extension lors de l'installation.
L'API Side Panel élimine les maux de tête associés à l'injection de contenu dans une page non fiable. Cela réduit également considérablement la nécessité de maintenir la compatibilité entre différents sites et de passer au crible les rapports de bugs concernant les perturbations accidentelles causées par votre extension.
Un compagnon pour les utilisateurs sur le Web
Lorsque vous créez une expérience de panneau latéral dans votre extension, vous devez garder une chose à l'esprit : comment aidez-vous les utilisateurs à accomplir des tâches sur le Web ? Voici quelques questions que vous devriez vous poser :
- Comment le panneau latéral aide-t-il l'utilisateur ?
- Le règlement sur les applications à usage unique s'applique également à votre panneau latéral. Assurez-vous que votre panneau latéral offre des fonctionnalités directement liées au reste de votre extension et à ce que l'utilisateur essaie d'accomplir.
- Mon 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 pouvez ainsi éviter de l'afficher lorsqu'elle n'est pas pertinente pour l'utilisateur ou qu'elle n'est pas liée au contenu qu'il consulte.
- La conception est-elle cohérente avec le reste de mon extension ?
- Votre panneau latéral doit avoir un design visuellement attrayant qui correspond au logo, aux couleurs, aux icônes et aux polices de votre extension et de votre fiche sur la boutique. Les utilisateurs bénéficient ainsi d'une expérience cohérente et reconnaissable, où qu'ils utilisent votre extension.
- Comment les utilisateurs découvrent-ils mon panneau latéral ?
- Indiquez aux nouveaux utilisateurs comment utiliser votre panneau latéral en leur fournissant suffisamment de documentation ou de formation dans l'extension. Cela vous aidera à fidéliser les utilisateurs et à éviter les mauvais avis sur votre fiche Play Store. N'oubliez pas que vous pouvez commencer à expliquer aux utilisateurs comment utiliser votre extension avant qu'ils ne l'installent. Pour cela, incluez une vidéo YouTube qui montre comment elle fonctionne dans la fiche de votre boutique.
Nous avons également mis à jour notre Règlement du programme, ainsi que les sections Bonnes pratiques et Consignes relatives à la qualité pour tenir compte de certaines de ces considérations. Ces modifications soulignent que votre panneau latéral doit servir de complément utile à l'expérience de navigation des utilisateurs en fournissant des fonctionnalités complémentaires. Ils indiquent également clairement que votre panneau latéral ne doit pas comporter d'éléments de distraction inutiles.
Présentation de l'API
Pour que votre extension s'affiche dans le panneau latéral, demandez l'autorisation "sidePanel" dans votre manifeste et ajoutez la clé "side_panel" avec un "default_path" pointant vers une page de votre extension :
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
Sur une page du panneau latéral, vous pouvez charger des scripts et appeler des API d'extension comme sur n'importe quelle autre page d'extension. L'icône de votre panneau latéral sera celle de votre extension. N'oubliez pas de la définir pour une touche de finition.
Fonctionnalités supplémentaires
Vous pouvez associer le panneau latéral à votre icône d'action pour 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 certaines pages, vous pouvez le contrôler et l'empêcher d'apparaître 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 de 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, qui est un excellent moyen de voir comment l'API peut être utilisée en pratique.
Comme indiqué précédemment, nous avons également révisé nos pages sur les règles et les bonnes pratiques pour vous expliquer comment créer un panneau latéral qui offre la meilleure expérience à vos utilisateurs.
Pour vous tenir informé des nouveautés concernant les extensions Chrome, consultez notre page Nouveautés. Si vous avez des questions ou besoin d'aide concernant l'API Side Panel, vous pouvez consulter le groupe Google Chromium Extensions.