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 observamos que muchos desarrolladores implementaron experiencias similares a las de la barra lateral en su extensión, motivo por el cual nos entusiasma convertirla en un estándar de 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 un posicionamiento y un diseño coherentes entre las extensiones. Además, la capacidad de mostrar la IU sin solicitar permisos de host es una ventaja significativa en cuanto a la privacidad para los usuarios, con el beneficio adicional de reducir la cantidad de advertencias que se muestran sobre tu extensión en el momento de la instalación.
La API de Side Panel elimina los inconvenientes asociados con la inyección de contenido en una página que no es de confianza. También reduce significativamente el requisito de mantener la compatibilidad entre diferentes sitios y filtrar los informes de errores sobre interrupciones accidentales que causa la extensión.
Un complemento para los usuarios de toda la Web
Cuando compilas una nueva experiencia del panel lateral como parte de tu extensión, debes tener en cuenta un aspecto: ¿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 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 ser un complemento útil para la experiencia de navegación de los usuarios, ya que proporciona funcionalidades 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 una página del panel lateral, puedes cargar las secuencias de comandos y las APIs de extensión de llamada como lo harías en cualquier otra página de extensión. El ícono del panel lateral se obtendrá del ícono de la extensión. No olvides definirlo para que le refines 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 tu panel lateral aparezca en páginas específicas, puedes controlar esto y evitar que aparezca en otros lugares 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