Crea tu primera extensión que inserte un nuevo elemento en la página.
Descripción general
En este instructivo, se compila una extensión que agrega el tiempo de lectura esperado a cualquier extensión de Chrome y a la página de documentación de Chrome Web Store.
En esta guía, explicaremos los siguientes conceptos:
- Es el manifiesto de la extensión.
- El tamaño de los íconos que usa una extensión
- Cómo insertar código en páginas con secuencias de comandos de contenido
- Cómo usar los patrones de coincidencia
- Permisos de extensiones.
Antes de comenzar
En esta guía, se da por sentado que tienes experiencia básica en desarrollo web. Te recomendamos que consultes el instructivo 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 reading-time que contenga los archivos de la extensión. Si lo prefieres, puedes descargar el código fuente completo desde GitHub.
Paso 1: Agrega información sobre la extensión
El archivo JSON de manifiesto es el único archivo obligatorio. Contiene información importante sobre la extensión. Crea un archivo manifest.json en la raíz del proyecto y agrega el siguiente código:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
Estas claves contienen metadatos básicos de la extensión. Controlan cómo aparece la extensión en la página de extensiones y, cuando se publica, en Chrome Web Store. Para obtener más información, consulta las claves "name", "version" y "description" en la página de descripción general del Manifiesto.
💡 Otros datos sobre el manifiesto de la extensión
- Debe estar ubicado en la raíz del proyecto.
- Las únicas claves obligatorias son
"manifest_version","name"y"version". - Admite comentarios (
//) durante el desarrollo, pero debes quitarlos antes de subir tu código a Chrome Web Store.
Paso 2: Proporciona los íconos
Entonces, ¿por qué necesitas iconos? Aunque los íconos son opcionales durante el desarrollo, son obligatorios si planeas distribuir la extensión en Chrome Web Store. También aparecen en otros lugares, como la página Administración de extensiones.
Crea una carpeta images y coloca los íconos dentro. Puedes descargar los íconos en GitHub. Luego, agrega el código destacado a tu manifiesto para declarar íconos:
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Recomendamos usar archivos PNG, pero se permiten otros formatos de archivo, excepto los archivos SVG.
💡 ¿Dónde se muestran estos íconos con tamaños diferentes?
| Tamaño del ícono | Uso de íconos |
|---|---|
| 16x16 | Ícono de página en las páginas y el menú contextual de la extensión |
| 32 × 32 | Las computadoras con Windows suelen requerir este tamaño. |
| 48 × 48 | Se muestra en la página Extensiones. |
| 128 × 128 | Se muestra en la instalación y en Chrome Web Store. |
Paso 3: Declara la secuencia de comandos del contenido
Las extensiones pueden ejecutar secuencias de comandos que leen y modifican el contenido de una página. Estos se denominan secuencias de comandos de contenido. Viven en un mundo aislado, lo que significa que pueden realizar cambios en su entorno de JavaScript sin entrar en conflicto con la página de host ni con las secuencias de comandos del contenido de otras extensiones.
Agrega el siguiente código a manifest.json para registrar una secuencia de comandos de contenido llamada content.js.
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
El campo "matches" puede tener uno o más patrones de coincidencia. Esto permite que el navegador identifique en qué sitios insertar las secuencias de comandos de contenido. Los patrones de coincidencia constan de tres partes: <scheme>://<host><path>. Pueden contener los caracteres '*'.
💡 ¿Esta extensión muestra una advertencia de permisos?
Cuando un usuario instala una extensión, el navegador le informa qué puede hacer la extensión. Las secuencias de comandos de contenido solicitan permiso para ejecutarse en sitios que cumplen con los criterios del patrón de coincidencia.
En este ejemplo, el usuario vería la siguiente advertencia de permiso:
Para obtener más información sobre los permisos de extensiones, consulta Cómo declarar permisos y advertir a los usuarios.
Paso 4: Calcula e inserta el tiempo de lectura
Las secuencias de comandos de contenido pueden usar el Modelo de objetos del documento (DOM) estándar para leer y cambiar el contenido de una página. Primero, la extensión verificará si la página contiene el elemento <article>.
Luego, contará todas las palabras dentro de este elemento y creará un párrafo que muestra el tiempo total de lectura.
Crea un archivo llamado content.js dentro de una carpeta llamada scripts y agrega el siguiente código:
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge);
}
💡 Se usa JavaScript interesante en este código
- Expresiones regulares que se usan para contar solo las palabras dentro del elemento
<article>. insertAdjacentElement()se usa para insertar el nodo de tiempo de lectura después del elemento.- La propiedad classList que se usa para agregar nombres de clase CSS al atributo de clase de elemento.
- Encadenamiento opcional que se usa para acceder a una propiedad del objeto que puede ser indefinida o nula.
- Nullish coalescing muestra el
<heading>si<date>es nulo o indefinido.
Prueba que funcione
Verifica que la estructura de archivos de tu proyecto se vea de la siguiente manera:
Carga la extensión de forma local
Para cargar una extensión desempaquetada en modo de desarrollador, sigue los pasos que se indican en Conceptos básicos de desarrollo.
Abrir una extensión o la documentación de Chrome Web Store
A continuación, se indican algunas páginas que puedes abrir para ver cuánto tiempo tardará cada artículo en leerse.
Se verá de la siguiente manera:
🎯 Posibles mejoras
En función de lo que aprendiste hoy, intenta implementar cualquiera de las siguientes opciones:
- Agrega otro patrón de coincidencia en el archivo manifest.json para que sea compatible con otras páginas del desarrollador de Chrome, como las Herramientas para desarrolladores de Chrome o Workbox.
- Agrega una nueva secuencia de comandos de contenido que calcule el tiempo de lectura de cualquiera de tus blogs o sitios de documentación favoritos.
Seguir creando
Felicitaciones por terminar este instructivo 🎉. Para seguir desarrollando tus habilidades, completa otros instructivos de esta serie:
| Extensión | Qué aprenderás |
|---|---|
| Modo sin distracciones | Para ejecutar el código en la página actual después de hacer clic en la acción de la extensión. |
| Administrador de pestañas | Para crear una ventana emergente que administre las pestañas del navegador. |
Sigue explorando
Esperamos que hayas disfrutado de crear esta extensión de Chrome y nos entusiasma continuar tu recorrido de aprendizaje sobre el desarrollo de Chrome. Recomendamos la siguiente ruta de aprendizaje:
- La guía para desarrolladores contiene decenas de vínculos adicionales a documentación relevante para la creación avanzada de extensiones.
- Las extensiones tienen acceso a APIs potentes más allá de lo que está disponible en la Web abierta. En la documentación de las API de Chrome se explica cada API.