Hace un año, en mayo de 2022, agregamos el panel lateral a Chrome. Esta es una nueva plataforma complementaria que permite a los usuarios usar herramientas junto con el contenido que exploran. Hoy, nos complace anunciar que tu extensión puede comenzar a mostrar contenido en el panel lateral a partir de Chrome 114.
Mejor para los usuarios, más fácil para los desarrolladores
Ya vimos que muchos desarrolladores implementan experiencias similares a las de las barras laterales en sus extensiones, por lo que nos entusiasma convertirla en un estándar de la plataforma. Con la nueva API del panel lateral, ahora puedes ofrecer una IU persistente que se abre junto a una página que visita el usuario. Los usuarios se beneficiarán de un posicionamiento y diseño coherentes entre las extensiones. Además, la capacidad de mostrar la IU sin solicitar permisos de host es una victoria importante en cuanto a la privacidad para los usuarios, con el beneficio adicional de reducir la cantidad de advertencias que se muestran para tu extensión en el momento de la instalación.
La API del panel lateral elimina los inconvenientes asociados con inyectar contenido en una página que no es de confianza. También reduce significativamente el requisito de mantener la compatibilidad entre diferentes sitios y de examinar los informes de errores sobre las interrupciones accidentales causadas por la extensión.
Un complemento para los usuarios de toda la Web
Cuando compilas una experiencia nueva del panel lateral como parte de tu extensión, debes tener en cuenta una cosa: ¿cómo ayudas a los usuarios a completar tareas en la Web? Estas son algunas preguntas que debes tener en cuenta:
- ¿Cómo ayuda mi panel lateral al usuario?
- La política de un solo propósito también se aplica a tu panel lateral. Asegúrate de que el panel lateral proporcione una funcionalidad que se relacione directamente con el resto de tu extensión y con lo que el usuario intenta lograr.
- ¿Mi panel lateral solo aparece cuando es relevante?
- La API del panel lateral te permite elegir los sitios en los que tus usuarios verán el panel lateral. De esta manera, puedes evitar que se muestre cuando no sea relevante para el usuario o no esté relacionado con el contenido que está explorando.
- ¿El diseño es coherente con el resto de mi extensión?
- Tu panel lateral debe tener un diseño visualmente atractivo que coincida con el logotipo, los colores, los íconos y las fuentes de tu extensión y ficha de Play Store. Esto les brinda a los usuarios una experiencia coherente y reconocible dondequiera que usen tu extensión.
- ¿Cómo descubren los usuarios mi panel lateral?
- Proporciona suficiente documentación o capacitación dentro de la extensión para indicar a los usuarios nuevos cómo usar tu panel lateral. Esto te ayudará a retener usuarios y evitar opiniones negativas en tu ficha de Play Store. Recuerda que puedes comenzar a enseñarles a los usuarios antes de que instalen la extensión. Para ello, incluye un video de YouTube que muestre cómo funciona la extensión en la ficha de Play Store.
También actualizamos nuestras Políticas del Programa con actualizaciones de las secciones de Prácticas recomendadas y Lineamientos de calidad para reflejar algunas de estas consideraciones. Estos cambios resaltan que tu panel lateral debería proporcionar funciones complementarias para usar como complemento útil para las experiencias de navegación de los usuarios. También dejan claro que tu panel lateral no debería tener distracciones innecesarias.
Descripción general de la API
Para que tu extensión aparezca en el panel lateral, solicita el permiso "sidePanel" en tu manifiesto y agrega la clave "side_panel" con una "default_path" que dirija a una página dentro de tu extensión:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
En una página del panel lateral, puedes cargar secuencias de comandos y APIs de extensión de llamada como lo harías en cualquier otra página de extensión. El ícono del panel lateral se tomará del ícono de la extensión. No olvides configurarlo para perfeccionarlo un poco más.
Funciones adicionales
Puedes vincular el panel lateral a tu ícono de acción para que se pueda abrir fácilmente en cualquier momento:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Si solo quieres que tu panel lateral aparezca en páginas específicas, puedes controlar eso y evitar que aparezca en otra parte donde no sea relevante para el usuario:
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 });
}
});
Más información
Publicamos la documentación de la API del panel lateral que puedes comenzar a leer hoy. También agregamos samples al repositorio chrome-extensions-samples, que es un excelente lugar para ver cómo se puede usar la API en la práctica.
Como mencionamos, también revisaron nuestras páginas de políticas y prácticas recomendadas para compartir más información sobre cómo crear un panel lateral que brinde la mejor experiencia a sus usuarios.
Para mantenerte al tanto de las novedades sobre las extensiones de Chrome, visita nuestra página Novedades. Si tienes preguntas o necesitas ayuda con la API del panel lateral, puedes visitar el Grupo de Google sobre extensiones de Chromium.
Foto de Vardan Papikyan en Unsplash