Desarrollo de una extensión para la barra lateral de Microsoft Edge

Como desarrollador de extensiones de Microsoft Edge, puede hacer que la extensión de Microsoft Edge nueva o existente aparezca en la barra lateral. Cualquier extensión puede usar la barra lateral además de su otra interfaz de usuario.

Contenido detallado:

Introducción

Use la chrome.sidePanel API para hospedar contenido en la barra lateral de Microsoft Edge junto con el contenido principal de una página web.

Como desarrollador de extensiones de Microsoft Edge, puede hacer que la extensión de Microsoft Edge nueva o existente aparezca en la barra lateral. Cualquier extensión puede usar la barra lateral además de su otra interfaz de usuario.

Barra lateral de una extensión de Microsoft Edge

Mediante la API del panel lateral, puede mejorar la experiencia de exploración al permitir a los usuarios ver información adicional junto con el contenido principal de una página web.

La barra lateral es un panel persistente que se encuentra en el lado de Microsoft Edge. El panel de la barra lateral coexiste con el contenido principal del explorador. La barra lateral reduce la necesidad de cambiar constantemente entre pestañas, lo que da lugar a una experiencia de exploración más productiva.

Una extensión puede usar opcionalmente la API del panel lateral para mostrar una interfaz de usuario personalizada en la barra lateral de Microsoft Edge. Además, la extensión puede seguir apareciendo en la barra de herramientas de Microsoft Edge junto con una interfaz de usuario, como elementos emergentes, y puede insertar scripts.

Terminología

Término Definición
la API del panel lateral Nombre de la característica que puede usar en las extensiones de Microsoft Edge. La interfaz de usuario de Chrome usa el término panel lateral.
sidePanel o side_panel Nombre de la API y permiso para habilitar cualquier extensión como una extensión de barra lateral.
extensión de barra lateral Extensión de Microsoft Edge que tiene una interfaz de usuario en la barra lateral.

Conceptos y uso

La API del panel lateral permite que una extensión muestre su propia interfaz de usuario en la barra lateral de Microsoft Edge, lo que permite una experiencia persistente que complementa el recorrido de exploración del usuario.

Interfaz de usuario de la barra lateral del explorador Edge

Al igual que con otros recursos de extensión, la página HTML que se muestra en la barra lateral se ejecuta en un contexto de extensión de confianza en el origen de la extensión (extension://<id>). La barra lateral tiene el mismo acceso de API que otros contextos de extensión de confianza.

Todas las API de extensiones existentes están disponibles para las extensiones de barra lateral, por lo que puede aprovechar todas las funcionalidades actuales del marco de extensibilidad en la extensión habilitada para la barra lateral.

Algunas características de la barra lateral incluyen:

  • La barra lateral permanece abierta mientras navega entre pestañas.

    • Problema conocido: la barra lateral no se vuelve a mostrar automáticamente cuando el usuario cambia a una pestaña en la que la barra lateral estaba abierta anteriormente (Problema n.º 142).

  • Una extensión de la barra lateral puede estar disponible para sitios web específicos.

  • Una extensión de la barra lateral tiene acceso a todas las API admitidas para las extensiones de Microsoft Edge.

  • En la configuración de Microsoft Edge, el usuario puede especificar varias configuraciones de barra lateral.

Agregar el permiso sidePanel en el archivo de manifiesto

Para usar la API del panel lateral, agregue el permiso en el "sidePanel" archivo de manifiesto de la extensión (manifest.json):

{
  ...
  "name": "My sidebar extension",
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "permissions": [
    "sidePanel"
  ]
   ...
}

Cada extensión de Microsoft Edge tiene un archivo de manifiesto con formato JSON, denominado manifest.json. El archivo de manifiesto es el plano técnico de la extensión.

En cada ejemplo se incluye un archivo de manifiesto completo; consulte Ejemplos de extensión, a continuación.

Vea también:

Casos de uso de la API del panel lateral

En las secciones siguientes se muestran algunos casos de uso comunes para la API de Panel lateral.

Para ver ejemplos completos de extensiones, consulte Ejemplos de extensión, a continuación.

Mostrar la misma barra lateral en cada sitio

Se puede establecer una barra lateral como predeterminada para mostrar la misma extensión en todas las pestañas abiertas del explorador. Los valores predeterminados se conservan en las sesiones del explorador.

En manifest.json, defina la "default_path" clave, como "sidepanel.html":

{
  "name": "My sidebar extension",
  ...
  "side_panel": {
    "default_path": "sidepanel.html"
  }
  ...
}

El archivo que especificó como predeterminado, como sidepanel.html, aparece en todas las pestañas del explorador abiertas:

<!DOCTYPE html>
<html>
  <head>
    <title>Global side panel</title>
  </head>
  <body>
    <h1>All sites sidepanel extension</h1>
    <p>This side panel is enabled on all sites</p>
  </body>
</html>

Vea también:

Habilitación de una barra lateral solo para un sitio específico

Una extensión puede usar sidepanel.setOptions() para habilitar una barra lateral en una pestaña específica. Este puede ser un sitio web determinado, por lo que la extensión se abre en la barra lateral cuando el usuario va a este sitio web.

En este ejemplo se usa chrome.tabs.onUpdated() para escuchar las actualizaciones realizadas en la pestaña. Comprueba si la dirección URL es y, si es www.bing.com así, habilita la barra lateral. De lo contrario, deshabilita la barra lateral.

service-worker.js:

const BING_ORIGIN = 'https://www.bing.com';

chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
  if (!tab.url) return;
  const url = new URL(tab.url);
  // Enables the sidebar when at bing.com
  if (url.origin === BING_ORIGIN) {
    await chrome.sidePanel.setOptions({
      tabId,
      path: 'sidepanel.html',
      enabled: true
    });
  } else {
    // Disables the sidebar when at other sites
    await chrome.sidePanel.setOptions({
      tabId,
      enabled: false
    });
  }
});

En addListener(), hacemos lo siguiente:

  1. Pruebe url.origin para ver si es la pestaña deseada.
  2. En sidePanel.setOptions(), establezca en trueenabled o false.

Cuando un usuario cambia a una pestaña o sitio para el que la barra lateral no está habilitada, la barra lateral está oculta.

Problema conocido: la barra lateral no se vuelve a mostrar automáticamente cuando el usuario cambia a una pestaña en la que la barra lateral estaba abierta anteriormente (Problema n.º 142).

Para obtener un ejemplo completo, vea Ejemplo de panel lateral específico del sitio.

Habilitar el icono de acceso directo de la extensión para abrir la barra lateral

Para permitir que los usuarios abran la barra lateral haciendo clic en el icono de la barra de herramientas de acción, use sidePanel.setPanelBehavior(). En primer lugar, declare la "action" clave en manifest.json:

{
  "name": "My sidebar extension",
  ...
   "action": {
    "default_title": "Click to open sidebar"
  },
  ...
}

A continuación, agregue el código siguiente a la service-worker.js lista de código que se encuentra en Habilitar una barra lateral solo para un sitio específico, anteriormente:

// Allow users to open the sidebar by clicking the action toolbar icon
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

Apertura de la barra lateral tras la interacción del usuario

sidePanel.open() permite que las extensiones abran la barra lateral a través de un gesto del usuario, como hacer clic en el icono de acción o a través de cualquier interacción del usuario en una página de extensión o script de contenido, como hacer clic en un botón.

El código siguiente muestra cómo abrir una barra lateral global en la ventana actual cuando el usuario hace clic en un menú contextual. Al usar sidePanel.open(), elija el contexto en el que se debe abrir la barra lateral:

  • Use windowId para abrir una barra lateral global, como se muestra en el ejemplo siguiente.
  • O bien, establezca para tabId abrir la barra lateral solo en una pestaña específica.
// service-worker.js:
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'openSidePanel',
    title: 'Open sidebar',
    contexts: ['all']
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'openSidePanel') {
    // Open the sidebar in all the tabs of the current window.
    chrome.sidePanel.open({ windowId: tab.windowId });
  }
});

Para obtener una demostración completa, vea Abrir el panel lateral a través de una interacción del usuario.

Cambiar a otra barra lateral

Una extensión puede usar sidepanel.getOptions() para recuperar la barra lateral actual y, a continuación, habilitar una barra lateral diferente para una pestaña específica.

En este ejemplo se establece una barra lateral que contiene un mensaje de bienvenida en runtime.onInstalled(). Cuando el usuario navega a otra pestaña, la barra lateral se reemplaza por la barra lateral del nivel del explorador.

// service-worker.js:
const welcomePage = 'sidebar/welcome-sb.html';
const mainPage = 'sidebar/main-sb.html';

chrome.runtime.onInstalled.addListener(() => {
  chrome.sidePanel.setOptions({ path: welcomePage });
});

chrome.tabs.onActivated.addListener(async ({ tabId }) => {
  const { path } = await chrome.sidePanel.getOptions({ tabId });
  if (path === welcomePage) {
    chrome.sidePanel.setOptions({ path: mainPage });
  }
});

Para obtener el código completo, consulte el ejemplo De varios paneles laterales.

Desarrollar una extensión para la barra lateral de Microsoft Edge tiene estas características de experiencia de usuario (UX).

Abrir la extensión en la barra lateral

Para permitir que los usuarios abran la barra lateral, realice una de las siguientes acciones:

A continuación se detallan los detalles.

Haciendo clic en un icono

Los usuarios pueden hacer clic en el icono abrir en la barra lateral (icono Abrir en la barra lateral), que se muestra junto al nombre de la extensión en el centro de extensiones:

Cuadro de diálogo barra lateral

O bien, los usuarios pueden hacer clic en el icono personalizado de la extensión en la barra de herramientas, si está habilitada. Esta experiencia de usuario requiere que la extensión haya habilitado el icono de acceso directo para abrir la barra lateral, como se describe en Habilitar el icono de acceso directo de la extensión para abrir la barra lateral anterior. En este ejemplo, el icono personalizado de la extensión es un círculo (icono personalizado de la extensión):

Hacer clic en el icono de la extensión en la barra de herramientas

Vea también:

Haciendo clic con el botón derecho en el icono de la extensión

Los usuarios pueden hacer clic con el botón derecho en el icono de la extensión en la barra de herramientas y, a continuación, seleccionar Abrir en la barra lateral o Cerrar barra lateral:

Haga clic con el botón derecho en el acceso directo de la barra de herramientas para abrir la extensión.

Haga clic con el botón derecho en el acceso directo de la barra de herramientas para cerrar la extensión.

El icono de la extensión aparece en la barra de herramientas si el usuario ha hecho clic en el icono Mostrar en la barra de herramientas (Mostrar en la barra de herramientas) situado junto al nombre de la extensión en el centro de extensiones.

Vea también:

Presionando un método abreviado de teclado

Los usuarios pueden presionar un método abreviado de teclado si el comando de acción está habilitado y el icono de acción está habilitado para abrir la barra lateral.

Si la openPanelOnActionClick() propiedad del tipo PanelBehavior está establecida en true, el usuario puede abrir la barra lateral mediante un método abreviado de teclado. Para habilitarlo, especifique un comando de acción en el manifiesto.

Vea también:

Abrir a través de un gesto

La barra lateral también se puede abrir a través de las interacciones siguientes:

Ejemplos de extensión

Para obtener más demostraciones de extensiones de API de Panel lateral, explore cualquiera de las siguientes extensiones:

Vea también:

Tipos y métodos

Vea Tipos y métodos en la página de referencia de la API chrome.sidePanel en developer.chrome.com.

Vea también

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí.

Licencia de Creative Commons Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.

  • Last updated on