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.
<ph type="x-smartling-placeholder">![Extension de dictionnaire qui affiche la définition d'un mot sélectionné](https://developer.chrome.com/static/blog/extension-side-panel-launch/image/a-dictionary-extension-s-0dc464c9781ec.png?authuser=9&hl=fr)
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, ce qui est pourquoi nous sommes ravis d'en faire une norme de la plate-forme. Avec la nouvelle API Side Panel, peut désormais proposer une interface utilisateur persistante qui s'ouvre à côté d'une page consultée par l'utilisateur. Les utilisateurs bénéficier d'un positionnement et d'une mise en page cohérents entre les extensions. De plus, la possibilité d'afficher une interface utilisateur sans demander d'autorisation d'hôte représente un avantage important en termes de confidentialité pour les utilisateurs, avec l'ajout vous pouvez réduire le nombre d'avertissements qui s'affichent pour votre extension au moment de l'installation.
Grâce à l'API Side Panel, vous n'avez plus à vous soucier de l'injection de contenu. une page non fiable. De plus, il réduit considérablement le besoin de maintenir la compatibilité sur différents sites et passer au crible les rapports de bugs relatifs aux perturbations accidentelles causées par votre .
Une aide pour les utilisateurs sur le Web
Lorsque vous créez un panneau latéral dans le cadre de votre extension, vous devez conserver un élément Comment aidez-vous les utilisateurs à accomplir leurs tâches sur le Web ? Voici quelques questions que vous devrait prendre en compte:
- 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 mettent en évidence le fait que votre panneau latéral doit accompagner au mieux les utilisateurs en 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 la page d'un panneau latéral, vous pouvez charger des scripts et des API d'extension d'appel comme vous le feriez sur n'importe quelle autre . L'icône du panneau latéral provient de l'extension de couleur. N'oubliez pas de la peaufiner un peu 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 le panneau latéral ne s'affiche que sur des pages spécifiques, vous pouvez le contrôler et empêcher d'apparaître ailleurs où elles 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é 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