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 à côté du 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.
Mieux pour les utilisateurs, plus facile pour les développeurs
De nombreux développeurs ont déjà implémenté des expériences semblables à une barre latérale dans leur extension. C'est pourquoi nous sommes ravis de l'intégrer aux standards de la plate-forme. Avec la nouvelle API Side Panel, vous pouvez désormais proposer une UI persistante qui s'ouvre à côté de la page que l'utilisateur consulte. Les utilisateurs apprécieront un positionnement et une mise en page cohérents entre les extensions. De plus, la possibilité d'afficher l'UI sans demander d'autorisations à l'hôte est un avantage important en termes de confidentialité pour les utilisateurs, avec l'avantage supplémentaire de réduire le nombre d'avertissements affichés pour votre extension au moment de l'installation.
L'API Side Panel élimine les problèmes lié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 d'examiner 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 nouvelle expérience de panneau latéral dans le cadre de votre extension, vous devez garder une chose à l'esprit : comment aidez-vous les utilisateurs à effectuer des tâches sur le Web ? Voici quelques questions à vous poser :
- En quoi mon panneau latéral aide-t-il l'utilisateur ?
- Le règlement sur l'usage 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.
- Mon panneau latéral s'affiche-t-il uniquement lorsqu'il est pertinent ?
- L'API Side Panel vous permet de choisir les sites sur lesquels le panneau latéral s'affichera pour vos utilisateurs. Vous pouvez ainsi éviter de l'afficher lorsqu'il n'est pas pertinent pour l'utilisateur ou qu'il n'est pas lié au contenu qu'il consulte.
- La conception est-elle cohérente avec le reste de mon extension ?
- Le panneau latéral doit présenter une conception visuelle attrayante qui correspond au logo, aux couleurs, aux icônes et aux polices de votre extension et de votre fiche Play Store. Vous leur offrez ainsi 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 avis négatifs sur votre fiche Play Store. N'oubliez pas que vous pouvez commencer à expliquer aux utilisateurs comment fonctionne votre extension avant qu'ils ne l'installent en incluant une vidéo YouTube dans votre fiche Play Store.
Nous avons également mis à jour nos Règles du programme, en modifiant 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 accompagner l'expérience de navigation des utilisateurs en leur proposant des fonctionnalités complémentaires. Elles indiquent également clairement que votre panneau latéral ne doit pas comporter de distractions inutiles.
Présentation de l'API
Pour que votre extension s'affiche dans le panneau latéral, demandez l'autorisation "sidePanel" dans votre fichier manifeste, puis 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 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 issue de l'icône de votre extension. N'oubliez pas de la définir pour un peu plus de raffinement.
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 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ègles 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 de Vardan Papikyan, publiée sur Unsplash