Cómo Crear una Extensión de Chrome

¿Alguna vez te has quedado atascado haciendo una tarea repetitiva y has deseado poder automatizar el proceso?

¿Estás cansado de perder tiempo buscando una extensión adecuada, solo para encontrarte con una página de resultados de búsqueda vacía?

Por suerte, si eres usuario de Chrome, puedes crear una extensión de Chrome en solo ocho sencillos pasos.

¿Cómo lo sabemos? Hemos creado nuestra propia extensión Ubersuggest para Google Chrome, para optimizar nuestros sistemas de investigación de palabras clave.

En esta publicación, te mostraremos cómo crear una extensión de Chrome para ayudarte a innovar en tus tareas y volver a un nivel de trabajo productivo.

¿Qué es una extensión de Chrome?

Las extensiones de Google Chrome son programas que puedes instalar en tu navegador Chrome para cambiar su funcionalidad.

Estas extensiones pueden ayudarte a automatizar ciertas funciones de tu navegador, modificar comportamientos existentes y mejorar la conveniencia de tu software. Incluso hay extensiones de Chrome que pueden mejorar tu SEO.

Las extensiones de Chrome se crean con scripts HTML, JavaScript y CSS y son esencialmente pequeños sitios web subidos a la tienda de Chrome.

La única diferencia entre una extensión de Chrome y un sitio web normal es que las extensiones contienen un archivo de manifiesto, que les permite ejecutar una función específica.

Otra forma de ver las extensiones es como un fragmento de código que cambia la experiencia en el navegador.

Por ejemplo, la extensión Grammarly te permite editar y modificar tu texto mientras escribes. La extensión LastPass te permitirá mantener tu administrador de contraseñas en tu navegador.

Aquí tienes 13 de nuestras extensiones favoritas de Google Chrome para que las tengas en cuenta.

¿Qué pueden hacer las extensiones de Chrome?

Una extensión personalizada puede realizar una única tarea. Esta tarea debe estar bien definida y ser fácil de entender para que funcione correctamente.

Puedes incluir más de un componente o funcionalidad, siempre que todo dirija la extensión hacia un objetivo singular.

Las extensiones de Chrome funcionan mediante acciones de página o acciones de navegador.

Una acción de página es una acción específica para determinadas páginas.

Una acción de navegador es relevante sin importar en qué parte del navegador te encuentres.

Además, las interfaces de usuario deben ser sencillas y fáciles de usar. Pueden ir desde un solo icono, como el de Gmail, hasta una página entera.

El resultado final será un paquete .crx comprimido que los usuarios descargarán e instalarán.

¿Por qué deberías crear una extensión de Chrome?

Google Chrome es el software de navegación más utilizado del mundo. Según W3Counter, Chrome tiene el 65,3% de la cuota de mercado total.

Deberías crear una extensión de Chrome si deseas añadir una acción sencilla a tu experiencia de navegación.

La ventaja de las extensiones de Chrome frente a las aplicaciones normales es que suelen ser más fáciles de crear y mantener. Dado que las extensiones de Chrome se crean en torno a una función específica, su creación requiere menos tiempo y conocimientos.

Crear una extensión suele llevar mucho menos tiempo que crear una página web completamente nueva.

Si quieres una forma sencilla y eficaz de modificar tu navegador, entonces crear una extensión es el camino a seguir.

Las extensiones de Chrome también pueden mejorar tu tráfico web, como puedes ver en el vídeo a continuación.

¿Qué hace que una extensión de Chrome tenga éxito?

Una extensión de Google Chrome de éxito simplificará una tarea o funcionalidad y mejorará tu productividad.

Imaginemos que tienes un creador de sitios web de comercio electrónico y estás investigando la competencia. Si instalas la extensión Koala Inspector, podrás ver si cualquier sitio web en el que entres se ha creado con Shopify. También podrás ver qué tema se utilizó, si se han realizado nuevas actualizaciones y ver las estadísticas de los productos.

Otro ejemplo, el News Feed Eradicator para Facebook puede ayudarte a mejorar tu productividad bloqueando tu feed de noticias para que puedas centrarte en tus tareas. Es una función sencilla pero eficaz que puede ayudarte a mejorar tu flujo de trabajo diario.

Ambas extensiones ejecutan una funcionalidad sencilla que mejora la experiencia del usuario. Cuando crees una extensión de Chrome, ten en cuenta la simplicidad. Ese es el secreto del éxito de una extensión.

Guía paso a paso para crear una extensión de Chrome

Ahora es el momento de crear tu extensión de Chrome.

Es importante tener en cuenta que debes hacerlo en Google Chrome. Esto puede parecer obvio, pero no todos utilizan Chrome como navegador predeterminado.

Si no eres usuario habitual de Chrome, asegúrate de instalarlo antes de comenzar con estos pasos.

Además, asegúrate de revisar tu trabajo con frecuencia a medida que avanzas en este proceso. Es mucho más fácil corregir errores de codificación en el momento que después de terminar.

Paso 1 para la creación de una extensión de Chrome: determinar qué necesita tu extensión

El primer paso para crear una extensión de Chrome es decidir cuál será su funcionalidad.

¿Qué hará? ¿Qué aspecto tendrá?

Si deseas crear una extensión para tus campañas de Google Ads, este es el momento de decidir cómo funcionará.

Se requiere un icono para que todas las extensiones se suban a la tienda de Google Chrome. Asegúrate de crear o subcontratar la creación de un icono antes de empezar.

A continuación, te mostraremos cómo crear una extensión que te permitirá cambiar el color de fondo de tu página actual.

Paso 2 para la creación de una extensión de Chrome: crear un directorio para la extensión

Para empezar a crear tu extensión de Chrome, necesitarás crear un nuevo directorio para alojar todos los archivos de tu extensión.

Esto es importante porque para que Chrome cargue tu plugin, debe ser dirigido a una carpeta que contenga los archivos de la extensión.

Puedes agregar todos los archivos que necesites para tu extensión en ese directorio.

Paso 3 para la creación de una extensión de Chrome: crear el archivo de manifiesto de la extensión

El siguiente paso es crear el archivo de manifiesto de tu extensión.

Este archivo indicará a Chrome cómo cargar la extensión correctamente.

Crea un archivo llamado manifest.json y añádelo a tu directorio.

Luego, añade cualquier código que puedas necesitar a tu archivo de manifiesto.

En este caso, el código se verá así:

{
“name”: “Getting Started Example”,
“description”: “Build an Extension!”,
“version”: “1.0”,
“manifest_version”: 3
}

Paso 4 para la creación de una extensión de Chrome: cargar la extensión en Chrome y comprobar si hay errores

Ahora es el momento de probar tu extensión para asegurarte de que Chrome la ejecutará.

Sigue los siguientes pasos:

1. Entra a chrome://extensions en tu navegador Google Chrome
2. Marca la casilla de verificación de Modo desarrollador en la esquina superior derecha.
3. Haz clic en “Cargar desempaquetado” para que aparezca un cuadro de diálogo de selección de archivos.
4. Selecciona el directorio de tu extensión

Si tu extensión es válida, debería cargarse inmediatamente.

Si no es válida, verás un mensaje de error en la parte superior de la página. Si este es el caso, busca errores, corrígelos e intenta cargar tu extensión nuevamente.

Los errores más comunes son los de sintaxis. Comprueba todas las comas y corchetes y asegúrate de que tengan el formato correcto.

Además, asegúrate de que la casilla Habilitada junto a tu extensión está marcada para que puedas verla funcionando.

Paso 5 para la creación de una extensión de Chrome: desarrollar tu background script

A continuación, deberás agregar un background script para indicarle a tu extensión qué hacer.

Primero, crea un archivo llamado background.js dentro de tu directorio de extensiones.

Luego, añade tu script.

Para nuestra extensión de cambio de color, utilizaremos el siguiente script:

{
“name”: “Getting Started Example”,
“description”: “Build an Extension!”,
“version”: “1.0”,
“manifest_version”: 3,
“background”: {
“service_worker”: “background.js”
}
}

Este archivo alertará a Chrome de que necesita escanear para obtener instrucciones adicionales.

La extensión que estamos creando también requerirá un evento de escucha para runtime.onInstalled dentro del background script.

En la interfaz de escucha de onInstall, la extensión establecerá un valor con la API de almacenamiento. Esto permite que múltiples componentes de la extensión se ejecuten y editen ese valor.

let color = ‘#3aa757’;
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ color });
console.log(‘Default background color set to %cgreen’, `color: ${color}`);
});

La mayoría de las API deberán registrarse en el campo “permisos” de su manifiesto. Así:

{
“name”: “Getting Started Example”,
“description”: “Build an Extension!”,
“version”: “1.0”,
“manifest_version”: 3,
“background”: {
“service_worker”: “background.js”
},
“permissions”: [“storage”]
}

A continuación, regresa a la página de gestión de extensiones y haz clic en Recargar.

Deberías ver que aparece un nuevo campo para Inspeccionar vistas. También aparecerá un enlace azul que indica la página de fondo.

Haz clic en el enlace y verás el registro de la consola del background script, que dice “Color de fondo predeterminado establecido en verde”.

También se pueden agregar scripts de contenido para ejecutar scripts página por página.

Los scripts de contenido deben agregarse directamente a tu archivo de manifiesto.

Paso 6 para la creación de una extensión de Chrome: crear la interfaz de usuario

Tu extensión puede tener una amplia gama de interfaces de usuario, desde ventanas emergentes hasta información sobre herramientas, entre otras.

Para empezar a diseñar tu interfaz, debes registrar una acción del navegador en tu manifiesto.

Para nuestro ejemplo, usaremos una ventana emergente. El código es el siguiente:

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”button.css”>
</head>
<body>
<button id=”changeColor”></button>
</body>
</html>

Es necesario declarar ese código en tu manifiesto para que funcione.

Para ello, añade una acción a tu manifiesto y establece popup.html como default_popup de la acción.

Tu script debería tener este aspecto:

{
“name”: “Getting Started Example”,
“description”: “Build an Extension!”,
“version”: “1.0”,
“manifest_version”: 3,
“background”: {
“service_worker”: “background.js”
},
“permissions”: [“storage”],
“action”: {
“default_popup”: “popup.html”
}
}

Esta ventana emergente específica hace referencia a un script CSS, por lo que tendrás que añadir otro archivo a tu directorio. Nómbralo apropiadamente, y añade lo siguiente:

button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
border: none;
border-radius: 2px;
}
button.current {
box-shadow: 0 0 0 2px white,
0 0 0 4px black;
}

Para nuestro ejemplo, también añadirás color a los botones de la ventana emergente. Más tarde, este color se utilizará para el fondo de tu página también.

Crea y añade un archivo llamado popup.js con el siguiente código al directorio.

// Initialize button with user’s preferred color
let changeColor = document.getElementById(“changeColor”);
chrome.storage.sync.get(“color”, ({ color }) => {
changeColor.style.backgroundColor = color;
});

Esto tomará el botón de popup.html y solicitará el valor del color. Incluye una etiqueta de script para popup.js en popup.html de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”button.css”>
</head>
<body>
<button id=”changeColor”></button>
http://popup.js
</body>
</html>

A partir de ahí, puedes añadir insignias para mostrar el estado de tu extensión. Por ejemplo, una insignia puede indicar a un usuario si la extensión está funcionando o no, activada o desactivada.

Los iconos de la barra de herramientas entran en la acción en el campo default_icons.

Coloca las imágenes que desees dentro de tu directorio y luego indícale a la extensión cómo utilizar las imágenes.

{
“name”: “Getting Started Example”,
“description”: “Build an Extension!”,
“version”: “1.0”,
“manifest_version”: 3,
“background”: {
“service_worker”: “background.js”
},
“permissions”: [“storage”],
“action”: {
“default_popup”: “popup.html”,
“default_icon”: {
“16”: “/images/get_started16.png”,
“32”: “/images/get_started32.png”,
“48”: “/images/get_started48.png”,
“128”: “/images/get_started128.png”
}
}
}

Para las imágenes, se recomiendan los tamaños 16×16 y 32×32. Todos los iconos deben ser cuadrados, de lo contrario pueden acabar distorsionados.

Si no proporcionas un icono, Chrome agregará uno predeterminado.

Al diseñar la interfaz de usuario de la extensión de Chrome, debes mantenerla sencilla y fácil de usar.

Google afirma que las interfaces de las extensiones deben contribuir a la experiencia de navegación, no ser una distracción.

Antes de continuar, vuelve a cargar la extensión y asegúrate de que todo funcione correctamente.

Paso 7 para la creación de una extensión de Chrome: agregar algo de lógica

La lógica favorece la interacción con la interfaz de usuario.

Agrega scripts lógicos a cualquier opción de interfaz de usuario que hayas incluido.

Instrucciones lógicas pueden indicar a tu extensión que realice determinadas acciones, como qué hacer cuando se hace clic en un botón.

Por ejemplo, si usaste el script popup.js, querrás incluir tu lógica al final del mismo.

Para nuestro ejemplo, puedes usar este script:

// When the button is clicked, inject setPageBackgroundColor into current page
changeColor.addEventListener(“click”, async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor,
  });
});
// The body of this function will be executed as a content script inside the
// current page
function setPageBackgroundColor() {
  chrome.storage.sync.get(“color”, ({ color }) => {
    document.body.style.backgroundColor = color;
  });
}
function setPageBackgroundColor() {
chrome.storage.sync.get(“color”, ({ color }) => {
document.body.style.backgroundColor = color;
});
}

Este código activa un script de contenido inyectado mediante programación. Esto convierte el color de fondo de la página al mismo color que el botón agregado anteriormente.

A partir de aquí, tu extensión debería ser completamente funcional. Cualquier nueva incorporación será un extra.

Paso 8 para la creación de una extensión de Chrome: probar tu extensión

Al igual que las pruebas A/B en el marketing, es importante probar continuamente la extensión para asegurarte de que todo funciona.

Pruébala tú mismo o pídele a otra persona que lo haga.

Si pides que lo pruebe otra persona, hazlo sin darle instrucciones para asegurarte de que su uso sea intuitivo.

Realiza los cambios necesarios y vuelve a probar la extensión.

Incluso después de lanzar tu extensión, puedes optimizarla y mejorarla continuamente. Así es como creamos la extensión Ubersuggest 2.0 para Chrome:

Una vez que estés contento, está lista para usar.

¿Puedo practicar la creación de extensiones de Chrome?

Una vez que subas tu extensión a la tienda de Chrome, ya está disponible y se puede utilizar.

Si no quieres que tu extensión sea accesible públicamente, siempre puedes crear un repositorio en GitHub desde el que se pueda clonar.

Esto requiere dar acceso al código fuente, así que tenlo en cuenta antes de subir algo a GitHub.

También puedes experimentar con muestras de código abierto antes de profundizarte en tu extensión.

Puedes encontrar muestras de extensiones de Chrome en GitHub de Google.

Conclusión

Crear una extensión personalizada de Google Chrome es una forma estupenda de mejorar la funcionalidad del navegador y crear experiencias de usuario óptimas.

Es más, tu herramienta puede generar tráfico a tu sitio web, por lo que modificar esa experiencia puede traducirse en nuevos clientes potenciales para tu negocio.

Recuerda que algunas de las mejores extensiones de Chrome han sido creadas por personas como tú.

Puede que tengas que aprender a llevar tu extensión hasta donde quieres, pero vale la pena cuando tienes una nueva e interesante función para mostrar a tus amigos y clientes potenciales.

¿Qué tipo de extensiones de Chrome has creado?