¿Alguna vez se ha quedado atrapado en una tarea repetitiva y desea poder automatizar su proceso?

¿Está cansado de perder tiempo buscando una extensión adecuada, solo para encontrar una página de resultados de búsqueda en blanco?

Afortunadamente, si es un usuario de Chrome, puede crear una extensión de Chrome en solo ocho sencillos pasos.

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

En este artículo, le mostraremos cómo crear una extensión de Chrome para ayudarlo a innovar en sus tareas y volver al trabajo productivo.

¿Qué es una extensión de Chrome?

Las extensiones de Google Chrome son programas que puede instalar en su navegador Chrome para modificar su funcionalidad.

Las extensiones de Chrome pueden ayudarlo a automatizar ciertas funciones de su navegador, cambiar los comportamientos existentes y mejorar la conveniencia de su software. Incluso hay extensiones de Chrome que pueden mejorar tu SEO.

Las extensiones de Chrome están creadas con scripts HTML, JavaScript y CSS y son básicamente pequeños sitios web descargados de Chrome Store.

La única diferencia entre una extensión de Chrome y un sitio web estándar es que las extensiones de Chrome contienen un archivo de manifiesto, lo que les da una función específica para realizar.

Otra forma de pensar en las extensiones de Chrome es que son un fragmento de código que cambia la experiencia de su navegador.

Por ejemplo, la extensión Grammarly Chrome le permite editar y modificar su copia mientras escribe. La extensión de LastPass le permitirá mantener su administrador de contraseñas en su navegador.

Aquí hay 13 de nuestras extensiones favoritas de Google Chrome para considerar.

¿Qué pueden hacer las extensiones de Chrome?

Una extensión personalizada solo puede realizar una tarea. Esta tarea debe definirse de manera estricta y ser fácil de entender para que funcione correctamente.

Puede incluir varios componentes o funciones, siempre que todo apunte la extensión hacia un único objetivo.

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

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

Una acción del navegador es relevante sin importar dónde se encuentre en el navegador.

Además, sus interfaces de usuario deben ser sencillas y fáciles de usar. Estos pueden variar desde un solo ícono, considere el ícono de Gmail, o puede sustituir una página completa por su interfaz.

Su entrega final será un paquete .crx comprimido que los usuarios descargarán e instalarán.

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

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

También debe crear una extensión de Chrome si desea agregar una acción simple a la experiencia de su navegador.

La ventaja de las extensiones de Chrome sobre las aplicaciones normales es que a menudo son más fáciles de crear y mantener. Dado que las extensiones de Chrome se basan en una única función, crearlas requiere menos tiempo y habilidad.

A menudo, crear una extensión de Chrome lleva mucho menos tiempo que crear una página web nueva.

Si desea una forma fácil y eficiente de modificar su navegador, crear una extensión de Chrome es el camino a seguir.

Las extensiones de Chrome también pueden mejorar su tráfico web, vea más en el video a continuación.

¿Qué hace que una extensión de Chrome sea tan exitosa?

Una extensión de Google Chrome exitosa simplificará una tarea o función y mejorará su productividad.

Supongamos que es un creador de sitios web de comercio electrónico que busca tiendas de la competencia. Si instala la extensión Koala Inspector, podrá ver si Shopify ha creado un sitio web al que está accediendo. También puede ver qué tema se ha utilizado, si se han realizado nuevas actualizaciones y ver las estadísticas del producto.

Otra extensión de Chrome, News Feed Eradicator para Facebook, puede ayudarlo a mejorar su productividad al bloquear su fuente de noticias para que pueda concentrarse en sus tareas. Es una característica simple pero efectiva que puede ayudarlo a mejorar su flujo de trabajo diario.

Ambas extensiones realizan una funcionalidad simple que mejora la experiencia del usuario. Al crear una extensión de Chrome, tenga en cuenta la simplicidad. Este es el secreto para una expansión exitosa.

Su guía paso a paso para crear una extensión de Chrome

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

Es importante tener en cuenta que debe hacer esto en Google Chrome. Puede parecer obvio, pero no todos usan Chrome como su navegador predeterminado.

Si no es un usuario habitual de Chrome, asegúrese de instalarlo antes de comenzar con estos pasos.

Además, asegúrese de revisar su trabajo con frecuencia a medida que avanza en este proceso. Es mucho más fácil corregir los errores de codificación en el momento que después de haber terminado.

Cree una extensión de Chrome Paso 1: determine sus necesidades de extensión

El primer paso para crear su extensión de Chrome es elegir una función.

¿Qué es lo que va a hacer? ¿Como se verá esto?

Si desea crear una extensión para sus campañas de Google AdWords, ahora es el momento de decidir cómo funciona.

Se requiere un icono para que todas las extensiones de Chrome se descarguen desde Google Chrome Store. Asegúrese de crear o subcontratar un icono antes de comenzar.

Una vez que sepa qué hará su extensión de Chrome y cómo desea que se vea, puede comenzar a compilarla.

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

Cree una extensión de Chrome Paso 2: cree un directorio para su extensión

Para comenzar a crear su extensión de Chrome, deberá crear un nuevo directorio para albergar todos los archivos de su extensión.

Esto es importante porque para que Chrome cargue su complemento, debe dirigirse a una carpeta que contenga sus archivos de extensión.

Puede agregar todos los archivos que necesitará para su extensión a este directorio.

Cree una extensión de Chrome Paso 3: cree el archivo de manifiesto para su extensión

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

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

Crea un archivo llamado manifest.json y agréguelo a su directorio.

Luego agregue cualquier código que pueda necesitar a su archivo de manifiesto.

Para nuestros propósitos, el código se verá así:

{

"Nombre": "Ejemplo de introducción",

"Descripción": "¡Crea una extensión!",

"Versión": "1.0",

"Manifest_version": 3

}

Cree la extensión de Chrome Paso 4: cargue su extensión en Chrome y verifique si hay errores

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

Sigue estos pasos:

1. Vaya a chrome: // extensiones en su navegador Google Chrome
2. Marque la casilla de modo de desarrollador en la esquina superior derecha
3. Haga clic en "Cargar descomprimido" para mostrar un cuadro de diálogo de selección de archivos
4. Seleccione su directorio de extensiones

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

Si no es válido, verá un mensaje de error en la parte superior de su página. Si es así, verifique si hay errores, corríjalos e intente cargar su extensión nuevamente.

Los errores más comunes que comete la gente aquí son errores de sintaxis. Verifique todas las comas y corchetes y asegúrese de que tengan el formato correcto.

También asegúrese de que el Activado La casilla junto a su extensión está marcada para que pueda verla ejecutándose en vivo.

Cree la extensión de Chrome Paso 5: desarrolle su secuencia de comandos de fondo

A continuación, deberá agregar una secuencia de comandos de fondo para indicarle a su extensión qué debe hacer.

Empiece por crear un archivo llamado background.js en su directorio de extensiones.

Luego agregue su secuencia de comandos.

Para nuestra extensión de cambio de color, usaremos este script:

{

"Nombre": "Ejemplo de introducción",

"Descripción": "¡Crea una extensión!",

"Versión": "1.0",

"Manifest_version": 3,

"Contexto": {

"Service_worker": "background.js"

}

}

Este archivo advertirá a Chrome que debe buscar más instrucciones.

La extensión que estamos creando también requerirá un evento de escucha para runtime.onInstalled en el script de fondo.

En el oyente onInstall, la extensión establecerá un valor con la API de almacenamiento. Esto permite que varios componentes de extensión se ejecuten y modifiquen este valor.

let color = "# 3aa757";

chrome.runtime.onInstalled.addListener (() => {

chrome.storage.sync.set ({color});

console.log ("Color de fondo predeterminado establecido en% cgreen", `color: $ {color}`);

});

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

{

"Nombre": "Ejemplo de introducción",

"Descripción": "¡Crea una extensión!",

"Versión": "1.0",

"Manifest_version": 3,

"Contexto": {

"Service_worker": "background.js"

},

"Permisos": ("almacenamiento")

}

Luego, regrese a la página de administración de sus extensiones y haga clic en Recargar.

Debería ver un nuevo campo para Inspecciona las vistas subir. También habrá un enlace azul adjunto que lee el página inferior.

Haga clic en el enlace y verá el registro de la consola del script en segundo plano, que dice "El color de fondo predeterminado se establece 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 su archivo de manifiesto.

Cree una extensión de Chrome Paso 6: cree su interfaz de usuario

Su extensión puede tener una variedad de interfaces de usuario, desde ventanas emergentes hasta información sobre herramientas y más.

Para comenzar a diseñar su interfaz, debe registrar una acción del navegador en su manifiesto.

Para nuestro ejemplo, usaremos una ventana emergente. El código tiene este aspecto:

Deberá declarar este código en su manifiesto para que funcione.

Para hacer esto, agregue una acción a su manifiesto y establezca popup.html como acción default_popup.

Su secuencia de comandos debería verse así:

{

"Nombre": "Ejemplo de introducción",

"Descripción": "¡Crea una extensión!",

"Versión": "1.0",

"Manifest_version": 3,

"Contexto": {

"Service_worker": "background.js"

},

"Permisos": ("almacenamiento"),

"acción": {

"Default_popup": "popup.html"

}

}

Esta ventana emergente específica se refiere a un script CSS, por lo que deberá agregar otro archivo a su directorio. Nómbrelo correctamente y agregue esto:

botón {

altura: 30px;

ancho: 30px;

esquema: ninguno;

margen: 10px;

borde: ninguno;

radio del borde: 2px;

}

button.current {

cuadro de sombra: 0 0 0 2px blanco,

0 0 0 4px negro;

}

Para nuestro ejemplo, también querrá agregar algo de color a sus botones emergentes. Posteriormente, este color también se utilizará para el fondo de su página.

Crea y agrega un archivo llamado popup.js con el siguiente código en el directorio.

// Botón de inicialización con el color preferido del usuario

let changeColor = document.getElementById ("changeColor");

chrome.storage.sync.get ("color", ({color}) => {

changeColor.style.backgroundColor = color;

});

Esto tomará el botón de popup.html y pregunte por el valor del color. Incluya una etiqueta de secuencia de comandos para popup.js dentro popup.html así:

Desde allí, puede agregar insignias para mostrar el estado de su extensión. Por ejemplo, una insignia puede decirle a un usuario si la extensión está activada o desactivada, activada o desactivada.

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

Coloque las imágenes que desee en su directorio, luego dígale a la extensión cómo usar las imágenes.

{

"Nombre": "Ejemplo de introducción",

"Descripción": "¡Crea una extensión!",

"Versión": "1.0",

"Manifest_version": 3,

"Contexto": {

"Service_worker": "background.js"

},

"Permisos": ("almacenamiento"),

"acción": {

"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 imágenes, se recomiendan los formatos 16 × 16 y 32 × 32. Todos los iconos deben ser cuadrados, de lo contrario pueden distorsionarse.

Si no proporciona un icono, Chrome agregará uno de forma predeterminada.

Al diseñar la interfaz de usuario para su extensión de Chrome, manténgala simple y fácil de usar.

Google dice que todas las interfaces de extensión deben contribuir a la experiencia de navegación, no distraerla.

Antes de continuar, recargue su extensión y asegúrese de que todo se vea correcto.

Crear extensión de Chrome Paso 7: agregar lógica

Logic promueve la interacción de su interfaz de usuario.

Agregue scripts lógicos a las opciones de IU que ha incluido.

La lógica puede decirle a su extensión que realice ciertas acciones, como qué hacer cuando se hace clic en un botón.

Por ejemplo, si ha utilizado el script popup.js, querrá incluir su lógica al final.

Para nuestro ejemplo, puede utilizar este script:

// Cuando se hace clic en el botón, inyecta setPageBackgroundColor en la página actual

changeColor.addEventListener ("clic", async () => {

let (tab) = esperar chrome.tabs.query ({active: true, currentWindow: true});

chrome.scripting.executeScript ({

target: {tabId: tab.id},

función: setPageBackgroundColor,

});

});

// El cuerpo de esta función se ejecutará como un script de contenido dentro del

// página actual

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 una secuencia de comandos de contenido inyectada mediante programación. Esto convierte el color de fondo de la página en el mismo color que el botón agregado anteriormente.

A partir de ahí, su extensión debería ser completamente funcional. Todas las nuevas incorporaciones serán campanas y silbidos.

Cree una extensión de Chrome Paso 8: pruebe su extensión

Al igual que las pruebas A / B en marketing, es importante probar constantemente su complemento para asegurarse de que todo funcione.

Pruébelo usted mismo o pídale a otra persona que lo pruebe.

Si le pide a otra persona que lo pruebe, hágalo sin darle ninguna instrucción para asegurarse de que sea intuitivo de usar.

Realice los cambios necesarios y vuelva a probar su extensión.

Incluso después de lanzar su extensión, puede optimizarla y mejorarla continuamente. Así es como obtuvimos la extensión Ubersuggest Chrome 2.0.

Una vez que esté feliz, estará listo para comenzar.

¿Puedo practicar la creación de una extensión de Chrome?

Una vez que haya subido su extensión a Chrome Store, estará activa y utilizable.

Si no desea que su extensión de Chrome sea de acceso público, siempre puede crear un repositorio de GitHub desde el que las personas puedan clonar.

Esto requiere que las personas accedan a su código fuente, así que asegúrese de tener esto en cuenta antes de cargar cualquier cosa en GitHub.

También puede experimentar con muestras de código abierto antes de sumergirse en su extensión.

Hay ejemplos de extensiones de Chrome disponibles en GitHub de Google.

Conclusión

Crear una extensión personalizada de Google Chrome es una excelente manera de mejorar la funcionalidad de su navegador y crear experiencias de usuario óptimas.

Además, su herramienta puede generar tráfico a su sitio web. Por lo tanto, cambiar esta experiencia puede generar nuevos clientes potenciales para su negocio.

Recuerde que algunas de las extensiones de Chrome más poderosas han sido creadas por personas como usted.

Puede ser una curva de aprendizaje para llevar su extensión a donde lo desea, pero vale la pena cuando tiene una nueva característica emocionante para mostrar a sus amigos y clientes.

¿Qué tipo de extensiones de Chrome has creado?