Hace un año, en mayo de 2022, agregamos el panel lateral a Chrome. Se trata de una nueva plataforma complementaria que permite a los usuarios utilizar 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 implementaron experiencias similares a las de la barra lateral en su extensión, lo cual por lo que nos entusiasma convertirla en un estándar de plataforma. Con la nueva API de Side Panel, puedes ahora puede ofrecer una IU persistente que se abra junto con una página que visita el usuario. Los usuarios se benefician de una posición y un diseño coherentes entre las extensiones. Además, la capacidad de mostrar IU sin solicitar permisos de host supone un gran logro en la privacidad de los usuarios, de reducir la cantidad de advertencias que se muestran para tu extensión en el momento de la instalación.
La API de Side Panel elimina los dolores de cabeza asociados con inyectar contenido en una página que no sea de confianza. También reduce significativamente el requisito de mantener la compatibilidad. en diferentes sitios y filtrando informes de errores sobre interrupciones accidentales causadas por tu .
Un complemento para los usuarios de toda la Web
Cuando compiles una nueva experiencia de panel lateral como parte de tu extensión, debes tener una cosa en mente: ¿cómo ayudas a los usuarios a completar tareas en la Web? Aquí hay algunas preguntas que debe considerar:
- ¿Cómo ayuda mi panel lateral al usuario?
- La política de solo propósito también se aplica al panel lateral. Asegúrate de que el panel lateral brinde funciones que se relacionen directamente con el resto de la extensión y con lo que el usuario intenta lograr.
- ¿Mi panel lateral solo aparece cuando es relevante?
- La API de Side Panel te permite elegir en qué sitios tus usuarios verán el panel lateral. De esta manera, puedes evitar que se muestre cuando no es relevante para el usuario o no está relacionada con el contenido que explora.
- ¿El diseño es coherente con el resto de mi extensión?
- El diseño del panel lateral debe ser visualmente atractivo y que coincida con el logotipo, los colores, los íconos y las fuentes de la extensión y la ficha de Play Store. Esto brinda a los usuarios una experiencia coherente y reconocible dondequiera que usen tu extensión.
- ¿Cómo descubren los usuarios mi panel lateral?
- Proporciona documentación o capacitación suficiente dentro de la extensión para que los usuarios nuevos sepan cómo usar tu panel lateral. Esto te ayudará a retener a los usuarios y evitar opiniones negativas en la ficha de Play Store. Recuerda que puedes comenzar a enseñarles a los usuarios antes de que instalen la extensión si incluyes 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 en las secciones Prácticas recomendadas y Lineamientos de calidad para reflejar algunas de estas consideraciones. Estos cambios destacan que tu panel lateral debe servir como complemento útil para las interacciones experiencias de navegación proporcionando funciones complementarias. También dejan en claro que el panel lateral no debe 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 un "default_path" que dirija a una página de tu extensión:
manifest.json:
{
...
"side_panel": {
"default_path": "sidepanel.html"
},
"permissions": [
"sidePanel"
]
...
}
En la página del panel lateral, puede cargar las secuencias de comandos y las API de extensión de llamada como lo haría en cualquier otra página de extensión. El ícono del panel lateral se obtendrá de la extensión de , no olvides definirlo para que perfecciones un poco más.
Capacidades adicionales
Puedes vincular el panel lateral a tu ícono de acción para que se abra fácilmente en cualquier momento:
service-worker.js:
await chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
Si solo quieres que el panel lateral aparezca en páginas específicas, puedes controlar esto y evitar para que no aparezca en ningún otro lugar 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 de Side Panel que puedes comenzar a leer hoy mismo. También agregamos muestras al repositorio de 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 revisamos nuestras páginas de políticas y prácticas recomendadas para compartir más información sobre cómo crear un panel lateral que proporcione la mejor experiencia para los usuarios.
Puedes conocer las novedades sobre las extensiones de Chrome visitando nuestra página de novedades y, si tienes preguntas o necesitas ayuda con la API del panel lateral, puedes visitar el Grupo de Google de las extensiones de Chromium.
Foto de Vardan Papikyan en Unsplash