Cómo construir una extensión de Chrome
Publicado: 2022-02-24Si bien en estos días parece haber una extensión para todo, no es imposible que uno luche por encontrar una extensión de navegador para un propósito o necesidad en particular. ¿Qué tan complicado es construir uno? A continuación encontrará una guía paso a paso sobre cómo crear una extensión de Chrome:
Paso 1: Requisitos
Dos apuntes antes de empezar:
- Si bien esto puede parecer obvio para la mayoría, es importante crear su extensión dentro de Google Chrome.
- Pruebe su trabajo a medida que avanza en este proceso. Es más fácil corregir los errores de codificación a medida que avanza que retroceder una vez que haya terminado.
Antes de comenzar, deberá decidir la función de la extensión. ¿Para qué servirá? Concéntrese en los intereses y problemas de su audiencia, para que pueda definir claramente qué tipo de solución puede ofrecer.
Una vez que tenga esto cubierto, verifique el diseño. Cada extensión cargada en la tienda de Google Chrome requiere un ícono. Puede crearlo usted mismo o subcontratar el diseño. Una vez que tenga su ícono, puede comenzar a construir su extensión.
Paso 2: Bloques de construcción
Como todo software, la extensión constará de varios archivos. Entonces, lo primero que debe hacer es crear un directorio que aloje todos sus archivos de extensión.
Un directorio es una ubicación para almacenar archivos en su computadora. Cualquier sistema operativo con una estructura de archivos jerárquica, como MS-DOS, OS/2 o Linux, tiene un directorio de archivos.
¿Por qué necesitas un directorio? Entonces, cuando Chrome está cargando su extensión, puede extraer los archivos de la carpeta correcta.
archivo manifest.json
A continuación, debe crear el archivo de manifiesto de su extensión.
Un manifiesto es un archivo que informa al sistema operativo cómo iniciar un programa . La configuración en un archivo de manifiesto siempre se especifica mediante lenguaje XML. Los manifiestos a menudo se usan para incluir configuraciones como privilegios, informar al sistema operativo qué versión de una DLL usará el programa.
En el caso de su extensión, el archivo de manifiesto le dará a Chrome las instrucciones para cargar la extensión.
Crear su archivo de manifiesto
En Chrome, cree un archivo llamado manifest.json y agréguelo a su directorio. Agregue el código que necesita a su archivo de manifiesto. Luego agregue el siguiente código:
{
"nombre": "Ejemplo de introducción",
“description”: “¡Crea una extensión!”,
“versión”: “1.0”,
"manifest_version": 3
}
Los permisos de la extensión dependen de la función de extensión. Puede encontrar una lista de todos los permisos y su significado en los documentos de la extensión de Chrome.
Página emergente
Si su sitio necesita una ventana emergente, debe agregarla a su código.
- Asigne el nombre del archivo con
browser_action
en el archivo de manifiesto. - Cree la página emergente con HTML o CSS. Puede agregar imágenes con SVG.
- Use JavaScript para agregar funcionalidad a la ventana emergente. Designe el archivo JavaScript y vincúlelo en su archivo emergente. Por ejemplo:
- Puede crear funcionalidad y tener acceso al DOM emergente. Aquí hay un ejemplo de cómo hacerlo.
documento.addEventListener(“DOMContentLoaded”, () => {
botón var = document.getElementById(“enviar”)
button.addEventListener(“clic”, (e) => {
consola.log(e)
})
})
Guión de contenido
La sección content_script define dónde debería funcionar la extensión. Si desea que la extensión funcione en todos los sitios, debe escribir:
“guiones_de_contenido”: [
{
“coincidencias”: [“<todas_las_urls>”],
“css”: [“fondo.css”],
“js”: [“fondo.js”]
}
],
Si desea que la extensión funcione en un solo sitio, como Facebook, por ejemplo, debe agregar [“https://facebook.com/*”]
Página de eventos
Un evento es un objeto que le permite ser notificado cuando sucede algo interesante. Por ejemplo, puede usar el evento chrome.alarms.onAlarm para recibir una notificación cuando vence una alarma.
chrome.alarms.onAlarm.addListener(función(alarma) {
appendToLog('alarms.onAlarm –'
+ ' nombre: ' + alarma.nombre
+ ' horarioprogramado: ' + alarma.tiempoprogramado);
});
Puede obtener más información sobre las páginas de eventos en los documentos de Chrome.
Contenido.js
Los scripts de contenido son archivos JavaScript que forman parte de las extensiones del navegador. Los scripts de contenido tienen más privilegios que el javascript normal.
Paso 3: abra un archivo HTML emergente desde la ventana emergente de la extensión de Chrome
Si coloca un botón en su extensión nativa de Chrome, al hacer clic en este botón, puede crear otra ventana emergente HTML en un contenido diferente. Aquí hay un ejemplo en StackOverflow:
El manifiesto.json:
{
"nombre": "Hojas de trucos",
“descripción”: “extensión de la hoja de trucos”,
“versión”: “1.0”,
"manifest_version": 3,
"antecedentes": {
“trabajador_servicio”: “fondo.js”
},
"permisos": ["almacenamiento", "activeTab", "secuencias de comandos", "pestañas"],
"acción": {
“default_popup”: “popup.html”,
“icono_predeterminado”: {
“16”: “/images/get_started16.png”,
“32”: “/images/get_started32.png”,
“48”: “/images/get_started48.png”,
“128”: “/images/get_started128.png”
}
},
“iconos”: {
“16”: “/images/get_started16.png”,
“32”: “/images/get_started32.png”,
“48”: “/images/get_started48.png”,
“128”: “/images/get_started128.png”
}
}
El popup.html:
<!DOCTYPEhtml>
<html>
<cabeza>
<enlace rel=”hoja de estilo” href=”style.css”>
</cabeza>
<cuerpo>
<button id=”git_Sheet”>hoja de git</button>
<guión src=”popup.js”></guión>
</cuerpo>
</html>
Y el archivo popup.js:
let gitSheet = document.getElementById(“git_Sheet”); gitSheet.addEventListener(“clic”, asíncrono () => { dejar
= esperar chrome.tabs.query ({activo: verdadero, ventana actual: verdadero}); chrome.scripting.executeScript({ objetivo: { tabId: tab.id }, función: ShowGitSheet, }); }); función ShowGitSheet() { chrome.browserAction.openPopup({ ventana emergente: “git_popup.html” }); }
Sugerencia: use chrome.windows.create({url: '…', type: 'popup'}) en lugar de chrome.browserAction.openPopup si desea que otro navegador que no sea Firefox ejecute su extensión.
Paso 4: busque errores después de instalar su extensión en Chrome
Una vez que termine la etapa de construcción, es hora de probar la extensión para asegurarse de que Chrome la ejecutará. Para cargar su extensión y comenzar a depurar, siga estos pasos:
- Abra chrome://extensions en su navegador Google Chrome.
- Configure el modo desarrollador marcando la casilla Desarrollador en la esquina superior derecha.
- Haga clic en "Cargar extensión desempaquetada" y verá su archivo con una opción para seleccionarlo.
- Si su extensión es válida, debería cargarse inmediatamente cuando la seleccione.
- Si no es válido, verá un mensaje de error.
Al escribir código, los errores más comunes son los errores de sintaxis. Entonces, lo primero es verificar nuevamente que todas sus comas y corchetes estén en el lugar correcto y en el formato correcto.
Luego, asegúrese de marcar la casilla "habilitado" para que pueda verlo en ejecución.
Paso 5: Agregue la lógica a la acción.
Una buena regla general es colocar las llamadas a la API en el script de fondo y la manipulación de DOM en el script de contenido. Veamos un ejemplo de agregar un script de fondo:
- Cree el archivo llamado background.js dentro del directorio de extensiones
- Registre el script de fondo en el manifiesto
{
"nombre": "Ejemplo de introducción",
“description”: “¡Crea una extensión!”,
“versión”: “1.0”,
"manifest_version": 3,
"antecedentes": {
“trabajador_servicio”: “fondo.js”
}
}
Chrome puede escanear el archivo en busca de instrucciones adicionales cuando recargas la extensión, como eventos.
- Agrega el guión. Será diferente según el propósito de su extensión.
Para ayudar a que su extensión obtenga información cuando esté instalada, debe incluir un evento de escucha para runtime.onInstalled en el script de fondo. Luego, el agente de escucha onInstalled asigna un valor mediante la API de almacenamiento, de modo que los componentes de la extensión puedan acceder al valor y actualizarlo.
// fondo.js
let color = '#3aa757';
chrome.runtime.onInstalled.addListener(() => {
cromo.almacenamiento.sync.set({color});
console.log('Color de fondo predeterminado establecido en %cgreen', `color: ${color}`);
});
Obtén más información sobre los próximos pasos en el sitio para desarrolladores de Google Chrome. Esto incluye cómo crear su interfaz de usuario e icono y establecer alguna lógica de capa para mejorar la interacción del usuario.
Como de costumbre, para comenzar a diseñar su interfaz, debe registrar una acción del navegador en su archivo de manifiesto. Por ejemplo, si usa una ventana emergente, el código podría verse así:
<!DOCTYPEhtml>
<html>
<cabeza>
<enlace rel=”hoja de estilo” href=”button.css”>
</cabeza>
<cuerpo>
<botón id=”cambiarColor”></botón>
</cuerpo>
</html>
¿Cuáles son los requisitos de un icono? Para imágenes, 16×16 y 32×32 píxeles. Todos los iconos deben ser cuadrados.
No olvide agregar sus scripts lógicos para que su extensión sepa qué hacer. Por ejemplo, puede agregarlo al final del script popup.js.
// Cuando se hace clic en el botón, inyecta setPageBackgroundColor en la página actual
changeColor.addEventListener(“clic”, asíncrono () => {
dejar
= esperar chrome.tabs.query ({activo: verdadero, ventana actual: verdadero});cromo.scripting.executeScript({
objetivo: { tabId: tab.id },
función: establecer color de fondo de página,
});
});
// El cuerpo de esta función se ejecutará como un script de contenido dentro del
// página actual
función setPageBackgroundColor() {
cromo.almacenamiento.sync.get(“color”, ({ color }) => {
documento.cuerpo.estilo.backgroundColor = color;
});
}
función setPageBackgroundColor() {
cromo.almacenamiento.sync.get(“color”, ({ color }) => {
documento.cuerpo.estilo.backgroundColor = color;
});
Paso 6: prueba tu extensión
El siguiente paso es, lógicamente, probar continuamente la extensión para asegurarse de que todo funciona como debería. Si subcontratas las pruebas, aprovecha para comprobar lo intuitiva que es la interfaz. De acuerdo con los resultados de la prueba, ajuste sus scripts y luego vuelva a probar.
Paso 7: envíe su extensión a Chrome Web Store
Una vez que esté satisfecho con su extensión, puede dirigirse a la tienda web de Chrome y enviarla.
En la tienda para desarrolladores de Chrome, haga clic en Nuevo elemento y luego suelte el archivo del proyecto en el cargador.
Chrome hará algunas preguntas para solicitar información sobre sus permisos y por qué son necesarios.
Ejemplos de extensiones de Google Chrome
Parece que hay una extensión para todo. Estos son algunos de los más útiles:
- Guardar en Drive
Esta extensión instala un pequeño icono en la parte superior del navegador. Enviará todo lo que esté navegando a su cuenta de disco para que pueda verlo más tarde. Funciona tomando capturas de pantalla, guardando imágenes, audio o video. - ordenar
Este complemento brinda a los usuarios una forma de organizar sus bandejas de entrada y priorizar lo que más les importa. Se integra con Gmail y le permite arrastrar y soltar mensajes en columnas personalizadas. - HTTPS en todas partes
Esta extensión mejora la seguridad de su navegación al cambiar cualquier sitio web de http a HTTPS seguro, por lo que es encriptado y seguro. - no me importan las galletas
Con cada sitio web que le pide que acepte las cookies, esta extensión es un salvavidas. Puede que no parezca mucho, pero presionará el botón de acuerdo en las ventanas emergentes de cookies. Le ahorrará tiempo y acelerará su productividad. - Prueba rápida
Esta útil extensión te permite comprobar la velocidad de tu conexión sobre la marcha. Con una versión de escritorio y móvil, puede asegurarse de que su conexión sea óptima antes de descargar un archivo adjunto grande o transmitir un video.
Con un clic, Speedtest realizará una prueba de conexión rápida en la red que está utilizando.
¿Qué puede hacer tu extensión de Chrome?
Las extensiones personalizadas son programas de software que realizan una sola tarea. Dicho esto, puede incluir más de una funcionalidad, pero tenga en cuenta que todo debe funcionar para lograr el mismo propósito.
Una extensión de Chrome funciona mediante acciones de página o acciones del navegador:
Acción de página : esta es una acción específica para ciertas páginas.
Acción del navegador : es relevante independientemente de la página en la que se encuentre.
Asegúrese de que la interfaz de usuario sea fácil de usar y fácil de entender. El entregable final será un paquete que el usuario puede descargar e instalar.
5 formas probadas de ganar dinero con su extensión
El objetivo principal de su extensión es generar ingresos. Una vez que haya definido su público objetivo y cómo usarán la extensión, puede diseñar una estrategia para ganar dinero con ella. Escribimos una guía extensa sobre la monetización de extensiones. Aquí hay algunos aspectos destacados:
1. Anuncios en la aplicación
La publicidad en la aplicación es una de las formas más comunes de monetizar su extensión. Estos son anuncios que le aparecen a un usuario cuando está usando su extensión. Cuando monetiza a través de publicidad en la aplicación a través de una solución programática, rota los anuncios. A diferencia de los anuncios estáticos, esta técnica lo ayuda a maximizar su potencial. Mediante el uso de publicidad gráfica, puede mezclar diferentes tipos de anuncios.
Los usuarios de CodeFuel maximizan su rendimiento y simplifican su monetización porque el servicio muestra anuncios relevantes para la intención del usuario.
2. Anuncios de búsqueda
Esta es una estrategia en la que los anuncios se colocan en una página de resultados del motor de búsqueda. Debido a que los anuncios aparecen cuando la persona está buscando algo, no perturba la experiencia del usuario. Puede personalizar los anuncios de búsqueda de acuerdo con la intención del usuario, por lo que mejora la experiencia del usuario.
3. Pagos y compras desde la aplicación
En este modelo, la extensión es gratuita, pero hay funciones internas por las que cobra. Las compras dentro de la aplicación son comunes entre las aplicaciones y extensiones de juegos. El usuario elige si desea agregar las funciones adicionales de pago.
4. Actualizaciones pagas
Del mismo modo, en este modelo, la extensión básica se ofrece de forma gratuita, pero si el usuario desea una versión premium, debe pagar la versión mejorada. Este es un modelo extremadamente común, utilizado por extensiones populares como Grammarly.
5. Gratis
Este es probablemente el modelo de monetización más popular para extensiones y aplicaciones. Con freemium, ofrece la extensión de forma gratuita. ¿Cómo ganas dinero con eso? Tienes unas cuantas opciones:
- Puede ofrecer una prueba gratuita durante un período de tiempo limitado.
- Puede ofrecer una versión básica gratuita con funciones limitadas.
Si elige este modelo, considere sus limitaciones ya que Google descontinuó las extensiones pagas.
Las mejores extensiones de seguridad de Google Chrome:
La mayoría de las personas usan Chrome para todo, desde comprar y buscar hasta administrar sus cuentas financieras. Todos estos datos confidenciales deben protegerse. Hay varias extensiones que pueden hacer que esa información permanezca segura.
1. Seguridad en línea de Avast
Esta extensión cubrirá la seguridad de su navegación web con múltiples funciones. Su protección contra ataques de phishing escanea los elementos de cualquier página web y detecta si la página es falsa o sospechosa . Otras características valiosas incluyen el uso de un sistema de calificación de la comunidad para detectar sitios peligrosos.
2. Desenfoque
Hay una serie de administradores de contraseñas disponibles, lo cual es imprescindible para garantizar que todas sus credenciales permanezcan seguras. Blur es uno de los más seguros, debido a sus funciones de seguridad adicionales.
Blur encripta, guarda y administra sus contraseñas . También oculta la información de su tarjeta de crédito de los sitios de compras y bloquea todo tipo de rastreadores, incluidos los que no son cookies.
3. Haz clic y limpia
Es una herramienta de limpieza que borra todos los rastros de su actividad en línea con un solo clic . El botón de extensión borrará todo el historial en línea, las cookies, el caché, las URL guardadas, las bases de datos SQL web e incluso los archivos temporales. Click and Clean tiene un antimalware incorporado e incluso se puede personalizar para eliminar ciertos tipos de datos.
4. Botón de pánico
Esta extensión te ayuda a cerrar todo lo que tienes abierto con un solo clic. Esto es útil si está trabajando en algo delicado y se acerca una persona no autorizada. Al hacer clic en el botón de pánico, todas las pestañas se cerrarán inmediatamente y se almacenarán en la carpeta de marcadores.
5. Fantasma
Si desea proteger su privacidad en línea u obtener control sobre los rastreadores, esta extensión puede ser la solución. Ghostery te da control sobre los rastreadores para que puedas decidir cuáles bloquear o desbloquear. También le permite bloquear el seguimiento de un tipo específico.
Cómo CodeFuel puede ayudarlo a maximizar el rendimiento de su extensión
Lleve la monetización de su extensión al siguiente nivel con CodeFuel. Nuestra completa plataforma de monetización proporciona monetización basada en la intención para sus propiedades digitales, incluidas las extensiones del navegador.
La solución aprovecha el aprendizaje automático para ofrecer a los usuarios anuncios de compras y de texto muy relevantes, personalizados según la intención. A diferencia de otras soluciones, CodeFuel le brinda la flexibilidad de trabajar con múltiples redes publicitarias como Bing y GoogleAdSense. Comience a maximizar el rendimiento de su extensión con CodeFuel hoy.
¿Cómo arreglar una extensión de Chrome si se congela?
Estás trabajando con tu extensión de Chrome y de repente el navegador se congela. Que frustrante. No es común, pero sucede. Si Chrome falla o se congela, recibirá un mensaje de error que indica el tipo de error, por ejemplo, un error de proxy o la página web no está disponible.
La ayuda de Chrome enumera una serie de sugerencias para la solución de problemas:
- Cerrar otras pestañas y aplicaciones
- Reiniciar el navegador
- Comprobar si hay malware
- Probar la red en busca de problemas
- Si su extensión está causando un conflicto con Chrome , siga estas instrucciones:
- En la esquina superior derecha, haz clic en Más Ajustes.
- En la parte inferior, haz clic en Avanzado .
- Haga clic en Restablecer y limpiar Actualice o elimine aplicaciones incompatibles.
Si no ve esta opción, no hay una aplicación problemática. - Decide si quieres actualizar o eliminar cada aplicación de la lista.
Abre la tienda de aplicaciones de tu computadora y busca una actualización.
Preguntas más frecuentes
¿Se puede cobrar a los usuarios por una extensión de Chrome?
En 2020, Google cerró las extensiones de Chrome pagas en Chrome Web Store. Esto significa que ya no puede cobrar por sus extensiones en Chrome Store. Puedes usar otras plataformas.
¿Se pagan las extensiones de Chrome?
En 2020, Google cerró las extensiones de Chrome pagas en Chrome Web Store. Esto significa que ya no puede cobrar por sus extensiones en la tienda web. Puedes usar otras plataformas.
¿Cómo publico una extensión de Chrome?
Una vez que tengas tu extensión lista, sigue estas instrucciones para publicarla en Chrome Store:
- Crea tu archivo zip
- Crear y configurar una cuenta de desarrollador
- Sube la extensión
- Agregue activos para su listado
- Envíe su artículo para su publicación
¿Cómo mejorar la experiencia del usuario y obtener más conversiones?
Este es un tema amplio que está lejos del alcance de esta pregunta, pero aquí hay algunos principios básicos:
- Mantenga la navegación de su extensión simple
- Ofrecer una buena atención al cliente
- Haz que tu extensión sea fácil de usar
- Asegúrese de que no aumente el consumo de memoria del navegador
- Simplifique el inicio de sesión para los usuarios de Google
¿Qué tecnologías se utilizan para escribir extensiones para Chrome?
Las extensiones están hechas de diferentes componentes, creados con múltiples tecnologías de desarrollo web. Los más populares son HTML, CSS y JavaScript.
¿Pueden las extensiones crear una interfaz de usuario fuera de la página web renderizada?
Según la página del desarrollador de Chrome, sí, la extensión puede agregar botones a la interfaz del navegador. Las extensiones también pueden crear notificaciones emergentes.
¿Pueden las extensiones modificar las URL de chrome://?
Las extensiones, por definición, expanden el navegador mediante el uso de API para modificar el comportamiento del navegador. Dado que se basan en tecnologías web, se ejecutan en entornos de ejecución separados e interactúan con el navegador Chrome.
¿Cómo construyo una interfaz de usuario para mi extensión?