¿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 agraciado 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 esencia.
En esta publicación, te mostraremos cómo crear una extensión de Chrome para ayudarte a innovar en tus tareas y retornar 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 natural 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á perseverar 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 aceptablemente definida y ser claro de entender para que funcione correctamente.
Puedes incluir más de un componente o funcionalidad, siempre que todo dirija la extensión en torno a un objetivo singular.
Las extensiones de Chrome funcionan mediante acciones de página o acciones de navegador.
Una energía de página es una energía específica para determinadas páginas.
Una energía de navegador es relevante sin importar en qué parte del navegador te encuentres.
Adicionalmente, las interfaces de agraciado 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 energía sencilla a tu experiencia de navegación.
La superioridad de las extensiones de Chrome frente a las aplicaciones normales es que suelen ser más fáciles de crear y perseverar. Transmitido 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 aceptar 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 igualmente 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. Además 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 noticiario 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 mejoramiento la experiencia del agraciado. Cuando crees una extensión de Chrome, ten en cuenta la simplicidad. Ese es el secreto del éxito de una extensión.
Tutor 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 agraciado habitual de Chrome, asegúrate de instalarlo ayer de comenzar con estos pasos.
Adicionalmente, asegúrate de revisar tu trabajo con frecuencia a medida que avanzas en este proceso. Es mucho más claro corregir errores de codificación en el momento que posteriormente 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 lanzarse 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 lanzarse 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 ayer de iniciar.
A continuación, te mostraremos cómo crear una extensión que te permitirá cambiar el color de fondo de tu página flagrante.
Paso 2 para la creación de una extensión de Chrome: crear un directorio para la extensión
Para iniciar a crear tu extensión de Chrome, necesitarás crear un nuevo directorio para introducir 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 unir 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 posterior 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 faltar 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:
- Entra a chrome://extensions en tu navegador Google Chrome
- Marca la casilla de comprobación de Modo desarrollador en la esquinazo superior derecha.
- Haz clic en “Cargar desempaquetado” para que aparezca un cuadro de diálogo de selección de archivos.
- 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, búsqueda 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.
Adicionalmente, asegúrate de que la casilla Habilitada cercano 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 unir un background script para indicarle a tu extensión qué hacer.
Primero, crea un archivo llamado background.js internamente de tu directorio de extensiones.
Luego, añade tu script.
Para nuestra extensión de cambio de color, utilizaremos el posterior 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 igualmente requerirá un evento de audición para runtime.onInstalled internamente del background script.
En la interfaz de audición de onInstall, la extensión establecerá un valía con la API de almacenamiento. Esto permite que múltiples componentes de la extensión se ejecuten y editen ese valía.
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 administración de extensiones y haz clic en Recargar.
Deberías ver que aparece un nuevo campo para Inspeccionar vistas. Además aparecerá un enlace cerúleo 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”.
Además se pueden unir 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 agraciado
Tu extensión puede tener una amplia matiz de interfaces de agraciado, desde ventanas emergentes hasta información sobre herramientas, entre otras.
Para iniciar a diseñar tu interfaz, debes registrar una energía del navegador en tu manifiesto.
Para nuestro ejemplo, usaremos una ventana emergente. El código es el posterior:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”button.css”>
</head>
<body>
<button id=”changeColor”></button>
</body>
</html>
Es necesario determinar ese código en tu manifiesto para que funcione.
Para ello, añade una energía a tu manifiesto y establece popup.html como default_popup de la energía.
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 relato a un script CSS, por lo que tendrás que añadir otro archivo a tu directorio. Nómbralo apropiadamente, y añade lo posterior:
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, igualmente añadirás color a los chico de la ventana emergente. Más tarde, este color se utilizará para el fondo de tu página igualmente.
Crea y añade un archivo llamado popup.js con el posterior 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 retoño de popup.html y solicitará el valía del color. Incluye una formalidad de script para popup.js en popup.html de la posterior modo:
<!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 agraciado si la extensión está funcionando o no, activada o desactivada.
Los iconos de la mostrador de herramientas entran en la energía en el campo default_icons.
Coloca las imágenes que desees internamente 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 arruinar distorsionados.
Si no proporcionas un icono, Chrome agregará uno predeterminado.
Al diseñar la interfaz de agraciado de la extensión de Chrome, debes mantenerla sencilla y claro de usar.
Google afirma que las interfaces de las extensiones deben contribuir a la experiencia de navegación, no ser una distracción.
Ayer 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: unir poco de método
La método favorece la interacción con la interfaz de agraciado.
Agrega scripts lógicos a cualquier opción de interfaz de agraciado 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 retoño.
Por ejemplo, si usaste el script popup.js, querrás incluir tu método 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 retoño adjunto anteriormente.
A partir de aquí, tu extensión debería ser completamente pragmático. 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 posteriormente de exhalar 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á inventario 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á arreglado 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 llegada al código fuente, así que tenlo en cuenta ayer de subir poco a GitHub.
Además puedes comprobar con muestras de código despejado ayer 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 cultivarse a aceptar 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?