Cómo crear tu propia extensión de Google Chrome

¿Alguna vez se ha encontrado insatisfecho con las características que vienen con su navegador web? Incluso con horas de recorrer Google Web Store en su haber, no siempre es una simple cuestión de presionar "descargar" para mejorar su experiencia de navegación web.

Aquí es donde entran las extensiones del navegador. En este artículo, exploraremos el proceso de creación de su propia extensión de Google Chrome DIY desde cero.

¿Qué es una extensión de Google Chrome?

Moderno navegadores web como Google Chrome Vienen con una serie de características que los hacen fáciles de usar y capaces de satisfacer las necesidades de la mayoría de los usuarios. Sin embargo, la extensión de estas características de stock puede traer muchos beneficios diferentes. Esta es la razón por la que los desarrolladores de navegadores suelen permitir la creación de extensiones, complementos y complementos para ellos.

Google Chrome ofrece esta función, lo que facilita que cualquier persona con experiencia en desarrollo web cree sus propias extensiones de Chrome. Puede crear una extensión usando HTML, JavaScript y CSS, al igual que muchos sitios web.

A diferencia de un sitio web, las extensiones pueden ejecutarse en segundo plano mientras navega, a veces incluso interactuando con los sitios que visita.

¿Qué hará nuestra extensión de Google Chrome?

Vamos a crear una extensión de Chrome simple que le permitirá visitar el sitio web Make Use Of y realizar una búsqueda aleatoria basada en las categorías de artículos que se encuentran en el sitio. Este es un proyecto rápido y fácil, pero aún aprenderá mucho.

Aprenderás a

• Crear una extensión de Google Chrome
• Inserte código personalizado en páginas web usando una extensión de Chrome
• Cree detectores de eventos y simule clics
• Genera números aleatorios
• Trabajar con arreglos y variables

Construyendo su propia extensión de Chrome de bricolaje

Google ha hecho que sea sorprendentemente fácil crear el tuyo propio. Extensiones de cromo, por lo que no pasará mucho tiempo antes de que algo funcione. Seguir los pasos a continuación solo le llevará de 10 a 15 minutos, pero lo alentamos a que también experimente con su propio código.

Paso 1: Creación de los archivos

Puede almacenar su extensión en su propia máquina local cuando no planee distribuirla. Solo necesitamos crear cuatro archivos diferentes para crear nuestra extensión; un archivo HTML, un archivo CSS, un archivo JavaScript y un archivo JSON.

Llamamos a nuestros archivos index.html, style.css, script.js y manifest.json. El archivo de manifiesto debe tener este nombre para funcionar correctamente, pero puede dar a los demás los nombres que desee, siempre que modifique su código en consecuencia.

Debe colocar estos archivos en la misma carpeta raíz.

Paso 2: Creación del archivo de manifiesto

El archivo de manifiesto viene con cada extensión de Google Chrome. Proporciona información sobre la extensión de Chrome al mismo tiempo que establece algunas configuraciones básicas. Este archivo debe contener un nombre, un número de versión, una descripción y una versión del manifiesto. También hemos incluido permisos y una acción que carga índice.html como la ventana emergente que aparece para la extensión.

{
"nombre": "MakeUseOf.com Búsqueda automática",
"versión": "1.0.0",
"descripción": "Una herramienta de búsqueda para encontrar artículos interesantes.",
"manifest_version": 3,
"autor": "samuel garbet",
"permisos": ["almacenamiento", "contenido declarativo", "ficha activa", "secuencias de comandos"],
"host_permissions": [""],
"acción":{
"ventana emergente_predeterminada": "índice.html",
"título_predeterminado": "Búsqueda automática de MUO"
 }
}

Paso 3: Construcción de HTML y CSS

Antes de que podamos comenzar a escribir nuestro script, debemos crear una interfaz de usuario básica usando HTML y CSS. Puedes usar un Biblioteca CSS como Bootstrap para evitar crear uno propio, pero solo necesitamos un par de reglas para nuestra extensión.

Nuestro archivo index.html incluye etiquetas html, head y body. La etiqueta principal contiene un título de página y un enlace a nuestra hoja de estilo, mientras que el cuerpo alberga una etiqueta h1, una botón que lo lleva a MakeUseOf.com, y otro botón que usaremos como disparador para un texto. Una etiqueta de guión justo al final del documento incluye el guión.js expediente.

<html>
<cabeza>
<título>Búsqueda automática de MUO</title>
<juego de caracteres meta="utf-8">
<enlace rel="hoja de estilo" href="estilo.css">
</head>
<cuerpo>
<h1>Búsqueda automática de MUO</h1>
<un href="https://www.makeuseof.com/" objetivo="_espacio en blanco"><identificación del botón ="botónUno">Ir a MakeUseOf.com</button></un>
<identificación del botón ="botónDos">Iniciar búsqueda aleatoria</button>
</body>
<secuencia de comandos src="guión.js"></script>
</html>

Nuestro archivo CSS es incluso más simple que nuestro HTML, cambiando el estilo de solo cinco elementos. Tenemos reglas para nuestras etiquetas html y body, así como para las etiquetas h1 y nuestros dos botones.

html {
 ancho: 400px;
}
cuerpo {
 familia tipográfica: Helvetica, sans-serif;
}
h1 {
 alineación de texto: centro;
}
#botonUno {
 borde-radio: 0px;
 ancho: 100%;
 relleno: 10px 0px;
}
#botónDos {
 borde-radio: 0px;
 ancho: 100%;
 relleno: 10px 0px;
 margen superior: 10px;
}

Paso 4: Construyendo el JavaScript

Como último paso en este proceso, es hora de construir nuestro archivo script.js.

La primera función en este archivo, llamada insertScript(), está en su lugar para insertar la otra función (auto búsqueda()) en la página actual. Esto nos permite manipular la página y utilizar las funciones de búsqueda que ya están presentes en el sitio MakeUseOf.com.

A esto le sigue un detector de eventos que espera hasta que se haga clic en el botón Iniciar búsqueda aleatoria antes de llamar a la función que exploramos anteriormente.

Él auto búsqueda() La función es un poco más complicada. Comienza con una matriz que contiene 20 de las categorías en el sitio web de MUO, lo que nos brinda una buena muestra para tomar cuando hacemos nuestras búsquedas aleatorias. A continuación, utilizamos el Matemáticas.aleatoria() función para generar un número aleatorio entre 0 y 19 para seleccionar una entrada de nuestra matriz.

Con nuestro término de búsqueda en la mano, ahora necesitamos simular un clic de botón para abrir la barra de búsqueda de MUO. Primero usamos la consola de desarrollo de Chrome para encontrar el ID del botón de búsqueda y luego lo agregamos a nuestro código JavaScript con el hacer clic() función.

Al igual que el botón de búsqueda, también necesitamos encontrar el ID de la barra de búsqueda que aparece, lo que nos permite insertar el término de búsqueda aleatorio que hemos seleccionado. Con esto completo, es una simple cuestión de enviar el formulario para realizar nuestra búsqueda.

// Esta función inserta nuestra función de búsqueda automática en el código de la página
funcióninsertScript() {
// Esto selecciona la pestaña enfocada para la operación y pasa la función de búsqueda automática
 cromo.pestañas.consulta({activo: verdadero, ventana actual: verdadero}, pestañas => {
cromo.secuencias de comandos.executeScript({objetivo: {tabId: pestañas[0].identificación}, función: auto búsqueda})
 })
// Esto cierra la ventana emergente de extensión para seleccionar la barra de búsqueda del sitio web
ventana.Cerrar();
}
// Este es un detector de eventos que detecta clics en nuestro "Comienzo Aleatorio Búsqueda" botón
documento.getElementById('botónDos').addEventListener('hacer clic', insertScript)
// Esta función selecciona un tema aleatorio de una matriz y 
funciónauto búsqueda() {
// Esta es una matriz para almacenar nuestros términos de búsqueda
 const términos de búsqueda = ["PC y móvil", "Estilo de vida", "Hardware", "ventanas", "Mac",
"linux", "Androide", "Manzana", "Internet", "Seguridad",
"Programación", "Entretenimiento", "Productividad", "Carrera", "Creativo",
"Juego de azar", "Medios de comunicación social", "Casa inteligente", "bricolaje", "Revisar"];
// Esto genera un número aleatorio entre 0 y 19
dejar numeroselector = Matemáticas.piso(Matemáticas.aleatorio() * 20);
// Esto usa el número aleatorio para seleccionar una entrada de la matriz
dejar selección = términos de búsqueda [número de selector];
// Esto simula un clic en el ícono de búsqueda del sitio web de MUO
 documento.getElementById("js-búsqueda").hacer clic();
// Esto establece la barra de búsqueda del sitio web de MUO como una variable
variable barra de búsqueda = documento.getElementById("js-búsqueda-entrada");
// Esto inserta nuestro término de búsqueda aleatorio en la barra de búsqueda
 searchBar.value = searchBar.value + selección;
// Esto finaliza el proceso activando el formulario del sitio web
 documento.getElementById("formulario de búsqueda2").entregar();
}

Paso 5: agregar sus archivos a Chrome://extensiones

A continuación, es hora de agregar los archivos que acaba de crear a la página de extensiones de Chrome. Una vez que haya hecho esto, se podrá acceder a la extensión en Chrome y se actualizará cada vez que realice cambios en sus archivos.

Abra Google Chrome, vaya a chrome://extensions y asegúrese de que el control deslizante del modo de desarrollador en la esquina superior derecha esté en la posición de encendido.

Hacer clic Cargar desempaquetado en la esquina superior izquierda, luego elija la carpeta en la que ha guardado sus archivos de extensión y haga clic en Seleccione la carpeta.

Ahora que su extensión está cargada, puede hacer clic en el icono de la pieza del rompecabezas en la esquina superior derecha y anclar su extensión a la barra de tareas principal para facilitar el acceso.

Ahora debería poder acceder a la extensión completa dentro de su navegador. Vale la pena tener en cuenta que esta extensión solo funcionará en el sitio web de MUO o sitios web con la misma ID para su botón y barra de búsqueda.

Construyendo una extensión de Google Chrome

Este artículo solo toca la superficie de las posibles funciones que podría incorporar en su propia extensión de Google Chrome. Vale la pena explorar tus propias ideas una vez que hayas aprendido los conceptos básicos.

Las extensiones de Chrome pueden ayudarlo a subir de nivel su navegación, pero intente mantenerse alejado de algunas de las extensiones de Chrome sospechosas conocidas para una navegación segura.

6 extensiones sospechosas de Google Chrome que debes desinstalar lo antes posible

Leer siguiente

Sobre el Autor