Hace un año, en mayo de 2022, agregamos el panel lateral a Chrome. Esta es una nueva superficie complementaria que permite a los usuarios usar herramientas junto con el contenido que están navegando. 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 y más fácil para los desarrolladores
Ya vimos que muchos desarrolladores implementan experiencias similares a la barra lateral en su extensión, por lo que nos complace convertirla en un estándar de la plataforma. Con la nueva API de Side Panel, ahora puedes ofrecer una IU persistente que se abre junto con una página que visita el usuario. Los usuarios se beneficiarán de la posición y el diseño coherentes entre las extensiones. Además, la capacidad de mostrar la IU sin solicitar permisos de host es una ventaja de privacidad significativa 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 de Side Panel elimina los dolores de cabeza asociados con la inserción de contenido en una página que no es de confianza. También reduce significativamente el requisito de mantener la compatibilidad en diferentes sitios y de analizar los informes de errores sobre las interrupciones accidentales causadas por tu extensión.
Un compañero para los usuarios en toda la Web
Cuando crees una nueva experiencia de panel lateral como parte de tu extensión, debes tener en cuenta lo siguiente: ¿cómo ayudas a los usuarios a completar tareas en la Web? Estas son algunas preguntas que debes considerar:
- ¿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 tu 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 de Side Panel te permite elegir en qué sitios verán tus usuarios el panel lateral. De esta manera, puedes evitar mostrarlo cuando no sea relevante para el usuario o no esté relacionado con el contenido que está navegando.
- ¿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 la 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?
- Informa a los usuarios nuevos cómo usar tu panel lateral proporcionando documentación o capacitación suficientes dentro de la extensión. Esto te ayudará a retener a los usuarios y evitar las opiniones negativas en la ficha de Play Store. Recuerda que puedes comenzar a enseñar a los usuarios antes de que instalen la extensión. Para ello, incluye un video de YouTube que muestre cómo funciona tu extensión en la ficha de Play Store.
También actualizamos nuestras Políticas del Programa, con actualizaciones en nuestras secciones de Prácticas recomendadas y Lineamientos de calidad para reflejar algunas de estas consideraciones. Estos cambios destacan que tu panel lateral debe actuar como un compañero útil para las experiencias de navegación de los usuarios, ya que proporciona una funcionalidad complementaria. También dejan en claro que tu 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 "sidePanel" permiso en tu manifiesto y agrega la clave "side_panel" con un "default_path" que apunte 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 llamar a las APIs de extensión como lo harías en cualquier otra página de extensión. El ícono de tu panel lateral se tomará del ícono de tu extensión . No olvides configurarlo para obtener un poco más de pulido.
Funciones adicionales
Puedes vincular el panel lateral al í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 controlarlo y evitar que aparezca en 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 chrome-extensions-samples, que es un excelente lugar para ver cómo se puede usar la API en la práctica.
Como se mencionó, también se 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 proporcione la mejor experiencia para tus usuarios.
Para mantenerte al tanto de las novedades de las extensiones de Chrome, visita nuestra página Novedades. Si tienes preguntas o necesitas ayuda con la API de Side Panel, puedes visitar el Grupo de Google de extensiones de Chromium.