Para simplificar el estilo de la página actual, haz clic en el ícono de la barra de herramientas de extensiones.
Descripción general
En este tutorial, se crea una extensión que simplifica el estilo de la extensión de Chrome y las páginas de documentación de Chrome Web Store para que sean más fáciles de leer.
En esta guía, explicaremos cómo hacer lo siguiente:
- Usa el service worker de extensiones como coordinador de eventos.
- Preservar la privacidad del usuario mediante el permiso
"activeTab" - Ejecutar código cuando el usuario haga clic en el ícono de la barra de herramientas de extensiones
- Inserta y quita una hoja de estilo con la API de Scripting.
- Usa una combinación de teclas para ejecutar un código.
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 focus-mode que contendrá los archivos de la extensión. Si
(de preferencia, puedes descargar el código fuente completo desde GitHub).
Paso 1: Agrega los datos y los íconos de la extensión
Crea un archivo llamado manifest.json e incluye el siguiente código.
{
"manifest_version": 3,
"name": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"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 del manifiesto, consulta la sección "Run scripts on every tab" En este instructivo, 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: Inicializa la extensión
Las extensiones pueden supervisar los eventos del navegador en segundo plano a través del servicio de la extensión trabajador a la nube. Los service workers son entornos especiales de JavaScript que controlan y finalizan cuando no son necesarios.
Primero, registra el service worker en el archivo manifest.json:
{
...
"background": {
"service_worker": "background.js"
},
...
}
Crea un archivo llamado background.js y agrega el siguiente código:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
El primer evento que escuchará nuestro service worker
runtime.onInstalled() Este método permite que la extensión establezca
o completar algunas tareas durante la instalación. Las extensiones pueden usar la API de Storage y
IndexedDB para almacenar el estado de la aplicación. Sin embargo, en este caso, como solo manejamos dos estados, usaremos el texto de la insignia de acción para realizar un seguimiento de si la extensión está "ACTIVADA". o "DESACTIVADA".
Paso 3: Habilita la acción de extensión
La acción de extensión controla el ícono de la barra de herramientas de la extensión. Así, cuando el usuario haga clic
de extensión, ejecutará parte del código (como en este ejemplo) o mostrará una ventana emergente. Agrega el
El siguiente código para declarar la acción de extensión en el archivo manifest.json:
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
Usa el permiso activeTab para proteger la privacidad del usuario
El permiso activeTab otorga a la extensión la capacidad temporal de ejecutar código
en la pestaña activa. También permite el acceso a las propiedades sensibles de
la pestaña actual.
Este permiso se habilita cuando el usuario invoca la extensión. En este caso, el usuario invoca al extensión si haces clic en la acción de la extensión.
💡 ¿Qué otras interacciones del usuario habilitan el permiso activeTab en mi propia extensión?
- Presionar una combinación de combinación de teclas
- Seleccionar un elemento del menú contextual
- Aceptar una sugerencia del cuadro multifunción
- Abrir una ventana emergente de la extensión
El permiso "activeTab" permite a los usuarios elegir de forma intencional ejecutar la extensión en la
pestaña enfocada; de esta manera, protege la privacidad del usuario. Otro beneficio es que no
activar una advertencia de permiso.
Para usar el permiso "activeTab", agrégalo al array de permisos del manifiesto:
{
...
"permissions": ["activeTab"],
...
}
Paso 4: Realiza un seguimiento del estado de la pestaña actual
Después de que el usuario haga clic en la acción de la extensión, la extensión verificará si la URL coincide con una
en la página de documentación. A continuación, verificará el estado de la pestaña actual y establecerá el siguiente estado. Agrega el
el siguiente código a background.js:
const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON';
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
Paso 5: Agrega o quita la hoja de estilo
Ahora es el momento de cambiar el diseño de la página. Crea un archivo llamado focus-mode.css y, luego, incluye
siguiente código:
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
Inserta o quita la hoja de estilo con la API de Scripting. Inicio
mediante la declaración del permiso "scripting" en el manifiesto:
{
...
"permissions": ["activeTab", "scripting"],
...
}
Por último, en background.js, agrega el siguiente código para cambiar el diseño de la página:
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡 ¿Puedo usar la API de Scripting para insertar código en lugar de una hoja de estilo?
Sí. Puedes usar scripting.executeScript() para insertar JavaScript.
Opcional: Asigna una combinación de teclas
Solo por diversión, agrega una combinación de teclas para habilitar o inhabilitar el modo sin distracciones. Agrega el
"commands" al manifiesto.
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
La clave "_execute_action" ejecuta el mismo código que el evento action.onClicked(), por lo que no se necesitan
el código fuente.
Prueba que funcione
Verifica que la estructura de archivos de tu proyecto se vea de la siguiente manera:
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.
Prueba la extensión en una página de documentación
Primero, abre cualquiera de las siguientes páginas:
- Te damos la bienvenida a la documentación sobre extensiones de Chrome
- Cómo publicar en Chrome Web Store
- API de Scripting
Luego, haz clic en la acción de la extensión. Si configuraste una combinación de teclas, puedes presionar Ctrl + B o Cmd + B para probarla.
Debería ser lo siguiente:
A esto:
🎯 Mejoras potenciales
En función de lo que aprendiste hoy, intenta lograr cualquiera de los siguientes objetivos:
- Mejorar la hoja de estilo CSS
- Asigna otra combinación de teclas.
- Cambia el diseño de tu blog o sitio de documentación favorito.
Sigue creando.
Felicitaciones por completar este instructivo 🎉. Completa otros cursos para mejorar tus habilidades instructivos de esta serie:
| Extensión | Qué aprenderás |
|---|---|
| Tiempo de lectura | Para insertar un elemento en un conjunto específico de páginas automáticamente. |
| Administrador de pestañas | Crear una ventana emergente que administre las pestañas del navegador |
Sigue explorando
Esperamos que hayas disfrutado de compilar esta extensión de Chrome y nos complace continuar con el proceso de tu recorrido de aprendizaje. Te recomendamos las siguientes rutas 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.