Crea tu primera extensión que inserte un elemento nuevo 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 Página de documentación de Chrome Web Store.
En esta guía, explicaremos los siguientes conceptos:
- 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 patrones de coincidencia
- Permisos de extensión.
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 de 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
(de preferencia, 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 el
. 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 para 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 la
Teclas "name", "version" y "description" en la
Página de resumen del manifiesto.
💡 Otros datos sobre el manifiesto de extensiones
- Debe estar ubicada 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? Si bien los íconos son opcionales durante el desarrollo, son este requisito si planeas distribuir tu extensión en Chrome Web Store. También aparecen en otras en lugares como la página Administración de extensiones.
Crea una carpeta images y coloca los íconos en ella. Puedes descargar los íconos en
GitHub: A continuación, 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 SVG.
💡 ¿Dónde se muestran estos íconos de diferentes tamaños?
| 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 de contenido
Las extensiones pueden ejecutar secuencias de comandos que leen y modifican el contenido de una página. Estos se denominan contenido secuencias de comandos. 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 donde se aloja el contenido ni con otras extensiones. los guiones de contenido.
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. Estas permiten que el navegador
identificar en qué sitios insertar las secuencias de comandos de contenido. Los patrones de coincidencia constan de tres partes:
<scheme>://<host><path> Pueden contener “*” caracteres.
💡 ¿Esta extensión muestra una advertencia de permisos?
Cuando un usuario instala una extensión, el navegador le informa lo que puede hacer. Las secuencias de comandos de contenido solicitan permiso para ejecutarse en sitios que cumplen con los criterios de patrones 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 la medición
Las secuencias de comandos de contenido pueden usar el Document Object Model (DOM) estándar para leer y cambiar la
el contenido de una página. La extensión verificará primero si la página contiene el elemento <article>.
Luego, contará todas las palabras dentro de este elemento y creará un párrafo que muestre el total
tiempo 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);
}
💡 JavaScript interesante que se usa en este código
- Normal
expresiones que se usan para contar solo las palabras dentro del elemento
<article>. insertAdjacentElement()se usa para insertar el nodo de hora de lectura después del elemento.- Es la propiedad classList que se usa para agregar nombres de clases de CSS al atributo de clase del elemento.
- Encadenamiento opcional que se usa para acceder a la propiedad de un objeto que puede ser indefinida o nula.
- La coalescente nula muestra el
<heading>si el<date>es nulo o indefinido.
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 Desarrollo Conceptos básicos
Abrir una extensión o la documentación de Chrome Web Store
Estas son algunas páginas que puedes abrir para ver cuánto tiempo tardará la lectura de cada artículo.
Se verá de la siguiente manera:
🎯 Mejoras potenciales
En función de lo que aprendiste hoy, intenta implementar cualquiera de las siguientes acciones:
- Agrega otro patrón de coincidencia en el archivo manifest.json para brindar asistencia a otros desarrolladores 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 favoritos. sitios de documentación.
Sigue creando
Felicitaciones por completar este instructivo 🎉. Sigue desarrollando tus habilidades completando otras instructivos de esta serie:
| Extensión | Qué aprenderás |
|---|---|
| Modo sin distracciones | Para ejecutar código en la página actual después de hacer clic en la acción de extensión. |
| Administrador de pestañas | Crear una ventana emergente que administre las pestañas del navegador |
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.