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 les rendre standards sur 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 votre panneau latéral propose des fonctionnalités directement liées au reste de votre extension et à 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 être visuellement attrayant et correspondre 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. Vous pourrez ainsi 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, ainsi que les sections Bonnes pratiques et Consignes relatives à la qualité pour refléter certaines de ces considérations. Ces changements soulignent que votre panneau latéral doit être un compagnon utile à l'expérience de navigation des utilisateurs en fournissant 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 une page de panneau latéral, vous pouvez charger des scripts et appeler des API d'extension 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 ne souhaitez que votre panneau latéral s'affiche sur des pages spécifiques, vous pouvez le contrôler et l'empêcher d'apparaître ailleurs, là 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 consulter dès aujourd'hui. Nous avons également ajouté des exemples au dépôt chrome-extensions-samples, qui est un excellent endroit pour voir comment l'API peut être utilisée dans la pratique.
Comme indiqué, nos pages de règles et nos bonnes pratiques ont également été révisées pour vous expliquer comment créer un panneau latéral qui offre la meilleure expérience possible à vos utilisateurs.
Pour vous tenir informé des dernières nouveautés concernant les extensions Chrome, consultez notre page des nouveautés. Si vous avez des questions ou avez besoin d'aide concernant l'API Side Panel, vous pouvez rejoindre le groupe Google Extensions Chromium.
Photo de Vardan Papikyan, publiée sur Unsplash