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

Artículo
10/10/2023

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

Nota: La característica de extensiones de barra lateral se está implementando en una base de usuarios creciente para todos los canales de Microsoft Edge.

Mediante el uso de la API de barra lateral para las extensiones, puede mejorar la experiencia de exploración al permitir que los usuarios vean información adicional junto con el contenido principal de una página web.

La barra lateral es un panel persistente situado en el lado del explorador, que 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.

Las extensiones pueden usar opcionalmente la API de barra lateral para mostrar una interfaz de usuario personalizada en la barra lateral de Microsoft Edge. Las extensiones pueden seguir apareciendo en la barra de herramientas de Microsoft Edge junto con una interfaz de usuario, como los elementos emergentes, y pueden insertar scripts, por ejemplo.

Terminología

Término	Definición
API de barra lateral	Nombre de la característica que puede usar en las extensiones de Microsoft Edge. Los documentos de Chrome usan 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.

Entre las características de la API de barra lateral se incluyen:

La barra lateral permanece abierta mientras navega entre pestañas.
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.

Origen

Al igual que con otros recursos de extensión, la página de la barra lateral se confirma en un contexto de extensión de confianza en su origen (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.

Agregar el permiso sidePanel en el archivo de manifiesto de la extensión

Para usar la API de barra lateral, agregue un permiso en el manifest.json archivo. Incluya el sidePanel permiso en el archivo de la manifest.json extensión:

{
  ...
  "name": "My sidebar extension",
  ...
  "side_panel": {
    "default_path": "sidebar.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.

Vea también:

Formato de archivo de manifiesto para extensiones

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

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 "sidebar.html":

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>My Sidebar</title>
  </head>
  <body>
    <h1>Sidebar extension for all sites</h1>
    <p>This sidebar is enabled on all sites</p>
  </body>
</html>

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.

En service-worker.js, en addListener(), pruebe url.origin para ver si es la pestaña deseada y, a continuación, en , establezca enabledtrue en sidePanel.setOptions()o false:

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
    });
  }
});

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

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

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));

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 });
  }
});

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 });
  }
});

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

Hay varias maneras de que el usuario abra la extensión en la barra lateral:

Haciendo clic en un icono

Los usuarios pueden hacer clic en el 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 ():

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.

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 () situado junto al nombre de la extensión en el centro de extensiones.

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.

Para habilitar el comando de acción, consulte Comandos de acción en chrome.commands en la referencia de la API.
Para habilitar el icono de acción, consulte Abrir el panel lateral haciendo clic en el icono de barra de herramientas en chrome.sidePanel en la referencia de API.

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.

Abrir a través de un gesto

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

Abra la barra lateral mediante un gesto de usuario de extensión, como hacer clic en el icono de acción. Este enfoque usa sidePanel.open(). Consulte Apertura de la barra lateral tras la interacción del usuario, anteriormente.
Abra la barra lateral haciendo clic en el icono de la barra de herramientas. Este enfoque usa sidePanel.setPanelBehavior(). Consulte Haciendo clic en un icono en la sección "Apertura de la extensión en la barra lateral", anterior.

Ejemplos de extensión

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

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í.

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

Compartir vía

Terminología

Características de la API de barra lateral

Origen

Agregar el permiso sidePanel en el archivo de manifiesto de la extensión

Casos de uso de la API de barra lateral

Mostrar la misma barra lateral en cada sitio

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

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

Cambiar a otra barra lateral

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

Experiencia del usuario de extensiones de barra lateral

Abrir la extensión en la barra lateral