Crea tu primer administrador de pestañas.
Descripción general
Este instructivo crea un administrador de pestañas para organizar las pestañas de la documentación de Chrome Web Store y la extensión de Chrome.
![Ventana emergente de la extensión del Administrador de pestañas](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-725ac725aaa4d.png?authuser=19&hl=es)
En esta guía, explicaremos cómo hacer lo siguiente:
- Crea una ventana emergente de extensión con la API de Action.
- Consultar pestañas específicas con la API de Pestañas
- Preservar la privacidad del usuario a través de permisos de host limitados
- Cambia el enfoque de la pestaña.
- Mueve las pestañas a la misma ventana y agrúpalas.
- Cambia el nombre de los grupos de pestañas con la API de TabGroups.
Antes de comenzar
En esta guía, se da por sentado que tienes experiencia básica en desarrollo web. Te recomendamos que consultes Hello World para obtener una introducción al flujo de trabajo de desarrollo de extensiones.
Compila la extensión
Para comenzar, crea un directorio nuevo llamado tabs-manager
que contenga los archivos de la extensión. Si
Si lo prefieres, puedes descargar el código fuente completo en GitHub.
Paso 1: Agrega los datos y los íconos de la extensión
Crea un archivo llamado manifest.json
y agrega el siguiente código:
{
"manifest_version": 3,
"name": "Tab Manager for Chrome Dev Docs",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Para obtener más información sobre estas claves de manifiesto, consulta el instructivo de Tiempo de lectura, en el que se explican los metadatos y los íconos de la extensión con más detalle.
Crea una carpeta images
y, luego, descarga los íconos en ella.
Paso 2: Crea la ventana emergente y diseña su estilo
La API de Action controla la acción de extensión (ícono de la barra de herramientas). Cuando el usuario hace clic en
la acción de extensión, ejecutará algún código o abrirá una ventana emergente, como en este caso. Inicio
Declara la ventana emergente en manifest.json
:
{
"action": {
"default_popup": "popup.html"
}
}
Una ventana emergente es similar a una página web, con una excepción: no puede ejecutar JavaScript intercalado. Crea un archivo popup.html
y agrega el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./popup.css" />
</head>
<body>
<template id="li_template">
<li>
<a>
<h3 class="title">Tab Title</h3>
<p class="pathname">Tab Pathname</p>
</a>
</li>
</template>
<h1>Google Dev Docs</h1>
<button>Group Tabs</button>
<ul></ul>
<script src="./popup.js" type="module"></script>
</body>
</html>
A continuación, modificarás el estilo de la ventana emergente. Crea un archivo popup.css
y agrega el siguiente código:
body {
width: 20rem;
}
ul {
list-style-type: none;
padding-inline-start: 0;
margin: 1rem 0;
}
li {
padding: 0.25rem;
}
li:nth-child(odd) {
background: #80808030;
}
li:nth-child(even) {
background: #ffffff;
}
h3,
p {
margin: 0;
}
Paso 3: Administra las pestañas
La API de Tabs permite que una extensión cree, consulte, modifique y reorganice pestañas en la navegador.
Cómo solicitar un permiso
Muchos métodos de la API de Tabs se pueden usar sin solicitar ningún permiso. Sin embargo, necesitamos acceso a title
y URL
de las pestañas. estas propiedades sensibles requieren permiso. Podríamos solicitar el permiso "tabs"
, pero esto otorgaría acceso a las propiedades sensibles de todas las pestañas. Como solo administramos pestañas de un sitio específico, solicitaremos permisos limitados de host.
Los permisos del host limitados nos permiten proteger la privacidad del usuario otorgando permisos elevados a sitios específicos. De esta manera, se otorgará acceso a las propiedades title
y URL
, así como a funciones adicionales. Agrega el código destacado al archivo manifest.json
:
{
"host_permissions": [
"https://developer.chrome.com/*"
]
}
💡 ¿Cuáles son las principales diferencias entre el permiso de pestañas y los permisos de host?
Tanto los permisos "tabs"
como los permisos de host tienen desventajas.
El permiso "tabs"
otorga a una extensión la capacidad de leer datos sensibles en todas las pestañas. Con el tiempo, esta información podría usarse para recopilar el historial de navegación de un usuario. Por lo tanto, si solicitas este permiso, Chrome mostrará el siguiente mensaje de advertencia durante la instalación:
Los permisos de host permiten que una extensión lea y consulte las propiedades sensibles de una pestaña coincidente, además de insertar secuencias de comandos en ellas. Los usuarios verán el siguiente mensaje de advertencia durante la instalación:
Estas advertencias pueden ser alarmantes para los usuarios. Para una mejor experiencia de integración, recomendamos implementar permisos opcionales.
Consulta las pestañas
Puedes recuperar las pestañas de URLs específicas con el método tabs.query()
. Crea un popup.js
y agrega el siguiente código:
const tabs = await chrome.tabs.query({
url: [
"https://developer.chrome.com/docs/webstore/*",
"https://developer.chrome.com/docs/extensions/*",
]
});
💡 ¿Puedo usar las APIs de Chrome directamente en la ventana emergente?
Una ventana emergente y otras páginas de extensión pueden llamar a cualquier API de Chrome porque se entregan desde la
. Por ejemplo, chrome-extension://EXTENSION_ID/popup.html
.
Enfocar una pestaña
Primero, la extensión ordenará alfabéticamente los nombres de las pestañas (los títulos de las páginas HTML que contienen). Luego, cuando se haga clic en un elemento de la lista,
Para enfocarte en esa pestaña, usa tabs.update()
y coloca la ventana en primer plano con windows.update()
.
Agrega el siguiente código al archivo popup.js
:
...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));
const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
const element = template.content.firstElementChild.cloneNode(true);
const title = tab.title.split("-")[0].trim();
const pathname = new URL(tab.url).pathname.slice("/docs".length);
element.querySelector(".title").textContent = title;
element.querySelector(".pathname").textContent = pathname;
element.querySelector("a").addEventListener("click", async () => {
// need to focus window as well as the active tab
await chrome.tabs.update(tab.id, { active: true });
await chrome.windows.update(tab.windowId, { focused: true });
});
elements.add(element);
}
document.querySelector("ul").append(...elements);
...
💡 JavaScript interesante que se usa en este código
- El Collator que se usa para ordenar el array de pestañas según el idioma preferido del usuario.
- La etiqueta de plantilla que se usa para
definen un elemento HTML que se puede clonar en lugar de usar
document.createElement()
para crear cada elemento. - El constructor de URLs que se usa para crear y analizar URLs.
- Es la sintaxis de distribución que se usa para convertir el conjunto de elementos en argumentos en la llamada a
append()
.
Agrupa las pestañas
La API de TabGroups permite que la extensión asigne un nombre al grupo y elija un fondo.
color. Para agregar el permiso "tabGroups"
al manifiesto, agrega el código destacado:
{
"permissions": [
"tabGroups"
]
}
En popup.js
, agrega el siguiente código para crear un botón que agrupe todas las pestañas con tabs.group()
y
moverlos a la ventana actual.
const button = document.querySelector("button");
button.addEventListener("click", async () => {
const tabIds = tabs.map(({ id }) => id);
if (tabIds.length) {
const group = await chrome.tabs.group({ tabIds });
await chrome.tabGroups.update(group, { title: "DOCS" });
}
});
Prueba que funcione
Verifica que la estructura de archivos de tu proyecto coincida con el siguiente árbol de directorios:
Carga tu extensión de forma local
Para cargar una extensión sin empaquetar en modo de desarrollador, sigue los pasos que se indican en Hello World.
Abre algunas páginas de documentación
Abre los siguientes documentos en diferentes ventanas:
- Cómo diseñar la interfaz de usuario
- Descubrimiento en Chrome Web Store
- Descripción general del desarrollo de extensiones
- Formato de archivo de manifiesto
- Cómo publicar en Chrome Web Store
Haz clic en la ventana emergente. Se verá de la siguiente manera:
![Ventana emergente de la extensión del Administrador de pestañas](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-extension-po-f958d72e1a9ae.png?authuser=19&hl=es)
Haz clic en “Agrupar pestañas” . Se verá de la siguiente manera:
![Pestañas agrupadas por el administrador](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/popup-tabs-manager/image/tabs-manager-grouped-tabs-65bdf282bdf98.png?authuser=19&hl=es)
🎯 Mejoras potenciales
En función de lo que aprendiste hoy, intenta implementar cualquiera de las siguientes acciones:
- Personaliza la hoja de estilo emergente.
- Cambia el color y el título del grupo de pestañas.
- Administrar las pestañas de otro sitio de documentación
- Se agregó compatibilidad para desagrupar las pestañas agrupadas.
¡Sigue creando!
Felicitaciones por completar este instructivo 🎉. Sigue desarrollando tus habilidades completando otras instructivos de esta serie:
Extensión | Qué aprenderás |
---|---|
Tiempo de lectura | Para insertar un elemento en todas las páginas automáticamente. |
Modo sin distracciones | Para ejecutar código en la página actual después de hacer clic en la acción de extensión. |
Sigue explorando
Esperamos que hayas disfrutado del desarrollo de esta extensión de Chrome. Nos entusiasma que podamos continuar con la de tu recorrido de aprendizaje. Te recomendamos la siguiente ruta de aprendizaje:
- La guía para desarrolladores tiene decenas de vínculos adicionales a documentación. relevantes para la creación avanzada de extensiones.
- Las extensiones tienen acceso a potentes APIs además de las que están disponibles en la Web abierta. En la documentación de las APIs de Chrome, se explica cada API.