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 plus du contenu qu'ils consultent. Aujourd'hui, nous avons le plaisir d'annoncer que votre extension peut commencer à afficher du contenu dans le panneau latéral à partir de Chrome 114.
Plus simple pour les utilisateurs et 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, ce qui explique pourquoi nous sommes ravis d'en faire une norme pour la plate-forme. Avec la nouvelle API du panneau latéral, vous pouvez proposer une UI persistante qui s'ouvre à côté d'une page consultée par l'utilisateur. Un positionnement et une mise en page cohérents entre les extensions seront bénéfiques aux utilisateurs. En outre, la possibilité d'afficher l'interface utilisateur sans demander d'autorisations d'hôte présente un avantage significatif pour la 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. Elle réduit également considérablement la nécessité de maintenir la compatibilité entre différents sites et de passer au crible les rapports de bug sur les perturbations accidentelles causées par votre extension.
Un compagnon de prédilection des utilisateurs sur le Web
Lorsque vous créez un panneau latéral dans le cadre de votre extension, vous devez garder à l'esprit une chose: comment aidez-vous les utilisateurs à effectuer des tâches sur le Web ? Voici quelques questions à prendre en compte:
- Comment 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 fournit des fonctionnalités en rapport direct avec le reste de votre extension et l'objectif de l'utilisateur.
- Mon panneau latéral ne s'affiche-t-il que lorsqu'il est pertinent ?
- L'API du panneau latéral vous permet de choisir les sites sur lesquels les utilisateurs pourront voir ce panneau. Vous éviterez ainsi de la présenter lorsqu'elle n'est pas pertinente pour l'utilisateur ou n'est pas en rapport avec le contenu qu'il consulte.
- Le design est-il cohérent avec le reste de mon extension ?
- Le panneau latéral doit présenter un design visuellement attrayant qui correspond 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, quel que soit l'endroit où 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 fournissant suffisamment de documentation ou de formation dans l'extension. Vous pourrez ainsi fidéliser vos utilisateurs et éviter les avis négatifs sur votre fiche Play Store. N'oubliez pas que vous pouvez commencer à former les utilisateurs avant qu'ils installent l'extension en incluant une vidéo YouTube qui leur explique le fonctionnement de l'extension dans votre fiche Play Store.
Nous avons également mis à jour le Règlement du programme en apportant des modifications aux sections Bonnes pratiques et Consignes relatives à la qualité pour tenir compte de certaines de ces considérations. Ces modifications indiquent que votre panneau latéral doit accompagner l'expérience de navigation des utilisateurs en proposant des fonctionnalités complémentaires. Il indique é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 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 le panneau latéral, vous pouvez charger des scripts et des API d'extension d'appel comme vous le feriez sur toute 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 la peaufiner davantage.
Fonctionnalités supplémentaires
Vous pouvez associer le panneau latéral à votre icône d'action afin de 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 contrôler et l'empêcher d'apparaître ailleurs que sur des pages qui ne sont pas pertinentes 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é de la documentation sur 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 utiliser l'API en pratique.
Comme indiqué précédemment, nos pages concernant nos règles et nos bonnes pratiques ont également été révisées pour vous indiquer comment créer un panneau latéral offrant la meilleure expérience utilisateur possible.
Pour suivre l'actualité de l'extension Chrome, consultez notre page de nouveautés. Si vous avez des questions ou besoin d'aide concernant l'API Side Panel, consultez le groupe Google Extensions Chromium.
Photo par Vardan Papikyan, publiée sur Unsplash