Cómo crear una extensión de Chrome

Como Crear Una Extension De Chrome



“Dentro de nuestra vida actual, estamos más ansiosos por usar aplicaciones de redes sociales y el motor de búsqueda de Google para nuestro entretenimiento y fines de búsqueda, es decir, investigar algún tema educativo a través del motor de búsqueda “Google” y también adquirir conocimientos generales. Para usar el motor de búsqueda de Google para buscar algo, debemos tener algún navegador ya instalado en nuestros teléfonos móviles, computadoras portátiles o computadoras personales. Uno de los navegadores más utilizados y eficientes del siglo actual es el navegador 'Google Chrome', que presentó muchas buenas funcionalidades junto con la utilidad de la extensión. La “Extensión” es el complemento que se encuentra en cualquier navegador para restringir o permitir sitios web y diferentes funciones. Estas extensiones no suelen venir incorporadas; debe agregar cada extensión a su navegador por separado cuando sea necesario. Si es un poco experto en tecnología, entonces puede conocer el uso de archivos JSON de manifiesto para crear y agregar una extensión en unos pocos pasos. Por lo tanto, este artículo cubrirá todos los pasos para crear una nueva extensión en el navegador Google Chrome.

Antes de echar un vistazo al método para crear una extensión, debe asegurarse de que su navegador Google Chrome ya se haya iniciado y que el motor de búsqueda 'Google' no contenga ningún fondo. Puede ver que la imagen adjunta a continuación no tiene fondo para el motor de búsqueda 'Google.com', es decir, solo fondo blanco'.









Agregar carpeta de extensión



Abra su herramienta Visual Studio Code rápidamente desde las aplicaciones de su sistema Windows. Puede tomar hasta 1 minuto abrir correctamente Visual Studio Code y habilitarlo para nuestro uso. Una vez que se haya iniciado correctamente y esté listo para su uso, hemos agregado la carpeta 'Extensión' ya generada a través de la lista del menú 'Archivo' en la barra de tareas superior que se muestra a continuación. Después de crear la carpeta 'Extensión', hemos agregado otra carpeta llamada 'imagen' que contiene las imágenes que se utilizarán como ícono para la extensión en el navegador. Junto con eso, hemos agregado un archivo 'manifest.json' y un archivo javascript llamado 'script.js' para crear una nueva extensión y agregarla al navegador. Comencemos desde el archivo manifest.json haciendo doble clic en él para comenzar a trabajar en JSON para crear y usar una extensión para cambiar el fondo de 'Google'.





Crear archivo de manifiesto



Dentro del archivo manifest.json, debe agregar el código 'JSON' que se muestra a continuación. Este código es el script de configuración real para crear y agregar una extensión a nuestro navegador Google Chrome. Este código JSON se inició con la inicialización de la versión de manifiesto variable como '2' y el nombre de una extensión que se creará, es decir, 'Cambiar fondo'. Después de esto, agregamos la breve descripción de nuestra extensión dentro de la variable 'descripción'.

Junto con eso, hemos agregado la versión de una extensión como '1.0'. Después de crear todas las configuraciones básicas para la 'extensión', debemos agregar la ruta al ícono de la imagen para que se use como ícono para las extensiones. La variable 'navegador' se ha definido para configurar el icono de la extensión para la barra de tareas superior del navegador Google Chrome, es decir, donde se muestran todas las extensiones después de habilitarlas para su uso futuro en determinados sitios o en todos. Después de esto, hemos agregado la ruta a tres archivos de imagen de diferentes tamaños para que el navegador pueda usar archivos diferentes cada vez.

Junto con eso, la variable 'page_action' se ha utilizado para mostrar qué imagen se mostrará después de hacer clic en el icono de 'extensiones' de la barra de tareas superior de Google Chrome. Dentro de él se ha utilizado la variable “Default_icon”, junto con sus tres valores de ruta diferentes para que las imágenes se utilicen como iconos en cada recarga. Para este propósito se utilizan tres archivos de imagen diferentes. La última variable content_scripts toma un total de 2 nuevas variables, es decir, coincidencias y CSS. La variable 'coincidencias' contiene la ruta al sitio web que se modificará después de que se cree el uso de esta nueva extensión. Junto con eso, la variable 'CSS' contiene el nombre de un archivo CSS que se usará para diseñar Google.com después de solicitar la extensión, es decir, diseñar Google.com después de cada recarga al habilitar la extensión. Ahora que este código está completo y listo para usar, simplemente guárdelo rápidamente y muévase hacia el archivo 'main.css'.

Dentro del archivo CSS main.css, hemos estado agregando estilos para que se cree nuestra extensión de archivo de manifiesto. El estilo se aplicaría utilizando la etiqueta de 'cuerpo' html, es decir, se aplicaría en el área completa del 'cuerpo' del archivo de manifiesto. Hemos estado configurando el nuevo fondo para Google.com utilizando la 'URL' de un archivo de imagen del motor de búsqueda. Ahora, guarda tu código antes que nada.

Después de completar los códigos requeridos, es decir, el archivo manifest.json y main.css, debemos abrir la utilidad Extensiones en el navegador Google Chrome a través de la URL chrome://extensions” en la nueva pestaña. Se abre el área de utilidad Extensiones. Desde su modo de desarrollador, debe cargar la carpeta 'Extensión' desempaquetada de su sistema local para convertirla en una extensión a través del botón 'cargar sin empaquetar' que se muestra en la imagen a continuación. La extensión se ha agregado eficazmente al navegador Chrome, como se muestra. Elimine los errores para que funcione completamente.

Desde el ícono de 'extensión', elija la extensión 'Cambiar fondo' para mostrarla en la barra de tareas, es decir, la extensión del ícono 'C'.

Después de recargar Google.com, su fondo se actualizó usando esta extensión.

Conclusión

Partiendo de la explicación del uso de los navegadores en el sistema Windows, también hemos comentado la importancia de las extensiones en cualquier navegador. Después de la breve explicación de las extensiones, hemos explicado el método para usar el archivo JSON de manifiesto para crear una extensión para el navegador Google Chrome y cómo usarlo para cambiar el fondo del motor de búsqueda 'Google.com'. Después de cargar la extensión en Google Chrome, la hemos estado usando en Google.com para cambiar su fondo.