Cómo crear una extensión en Chrome

Articulos tematica chrome

Suponiendo que está considerando cómo hacer una extensión de Chrome, la documentación de la extensión de Chrome es increíble para las ejecuciones fundamentales

Sin embargo, el uso de funciones más desarrolladas requiere mucho Google y Stack Overflow. ¿Qué tal si hacemos una extensión de Chrome en el medio de la ruta que se comunica con la página? ¿Rastreará la interfaz externa principal en la página y la abrirá en otra pestaña?

¿Qué es una extensión de Chrome?

  • Antes de comenzar a crear nuestra extensión, probablemente sea una buena idea tener un conocimiento básico de qué es una extensión de Chrome y cómo funcionan las extensiones de Chrome.
  • En un nivel muy básico, una extensión de Chrome es solo algo de HTML, CSS y JavaScript que le permite agregar algunas funciones a Chrome a través de algunas de las API de JavaScript que Chrome expone.
  • Una extensión es básicamente una página web que está alojada en Chrome y puede acceder a algunas API adicionales.
  • En este tutorial, le mostraré cómo crear una extensión básica de Chrome llamada extensión de acción del navegador. Este tipo de extensión coloca un botón en la barra de herramientas de Chrome que mostrará una página HTML al hacer clic y, opcionalmente, ejecutará algo de JavaScript.
  • Las extensiones de Chrome también se pueden crear para que funcionen solo en ciertas páginas mediante el uso de Acciones de página, pueden ejecutar código en segundo plano usando Páginas de fondo e incluso pueden modificar una página existente cargada en el navegador usando Scripts de contenido. Pero para este tutorial vamos a simplificar las cosas.
  • Si está interesado en obtener más información sobre las extensiones de Chrome en general, consulte la documentación de las extensiones de Chrome.

Crea el proyecto

  • Lo primero que debemos hacer es crear el proyecto y todos los archivos que necesitamos para nuestra extensión. Comencemos por crear un nuevo directorio que llamaremos “Extensión GTmetrix”.
  • Pondremos todos los archivos que necesitemos para nuestra extensión en esta nueva carpeta. Chrome nos permite cargar un complemento apuntándolo a una carpeta que contiene los archivos de extensión.
  • Todas las extensiones de Chrome requieren un archivo de manifiesto. El archivo de manifiesto le dice a Chrome todo lo que necesita saber para cargar correctamente la extensión en Chrome. Luego crearemos un archivo manifest.json y lo colocaremos en la carpeta que creamos. Puede dejar el archivo de manifiesto en blanco por ahora.
  • A continuación, necesitaremos un icono para nuestra extensión. Este solo debe ser un archivo PNG de 19x19px. Puede obtener un icono de muestra del proyecto de demostración de Google que puede modificar.
  • A continuación, necesitaremos una página HTML para mostrar cuando un usuario haga clic en nuestra Acción del navegador, por lo que crearemos un archivo popup.html y un archivo popup.js en nuestro directorio "Extensión GTmetrix".
  • Debido a restricciones de seguridad, no podemos poner JavaScript en línea en nuestros archivos HTML dentro de nuestras extensiones de Chrome, por lo que tenemos que crear un archivo separado que contenga cualquier código JavaScript que necesitemos y lo haremos referencia desde el archivo HTML.

Crea el archivo de manifiesto

Ahora que tenemos nuestra estructura de proyecto básica, necesitamos agregar el código a nuestro archivo de manifiesto para describir nuestro complemento a Chrome. Abra el archivo manifest.json e ingrese el siguiente código:

  • La mayoría de los campos en este archivo JSON se explican por sí mismos, por lo que no perderé su tiempo explicándolo todo, pero tome nota de la sección browser_action donde especificamos cuál es el ícono predeterminado y qué página HTML debe mostrarse cuando el navegador acciona el botón. se hace clic.
  • También notará que agregué una sección de permisos que especifica que necesitamos tener permiso para acceder a activeTab. Esto es necesario para que podamos obtener la URL de la pestaña actual para pasarla a GTmetrix. Muchas de las API que Chrome expone para que las use con sus extensiones requieren que especifique los permisos que necesita.

Crea la interfaz de usuario

  • El siguiente paso es crear la interfaz de usuario que mostrará nuestra Acción del navegador al hacer clic. Nuestra interfaz de usuario será muy sencilla y constará de un texto que dice “GTmetrix Analyzer”, seguido de un botón en el que el usuario puede hacer clic para realizar el análisis en la página actual.
  • Abra la página popup.html y agregue lo siguiente. Notarás que en este HTML he incluido el script popup.js. Aquí es donde pondremos la lógica para nuestra extensión que se ejecutará cuando se haga clic en el botón con el ID de checkPage.

Implementar la lógica

  • Lo último que debemos hacer para crear el complemento es implementar la lógica que debe ejecutarse cuando un usuario hace clic en "¡Revise esta página ahora!" dentro de una pestaña.
  • Queremos agregar un detector de eventos para escuchar el evento de clic en el botón checkPage. Cuando se hace clic en él, necesitaremos crear un nuevo formulario para enviar a GTmetrix que contiene la URL de la página actual, la envía y luego muestra el resultado.
  • Abra el archivo popup.js y agregue el siguiente código. Tomé prestado la mayor parte del código para crear y enviar el formulario del bookmarklet proporcionado en el sitio web de GTmetrix. Acabo de modificar el código para incorporar la URL de la pestaña actualmente activa.
  • Si examina el código anterior, verá que estamos registrando un controlador para el evento de clic del botón checkPage primero. Luego, cuando se hace clic en el botón, obtenemos la pestaña seleccionada actualmente y ejecutamos algo de JavaScript para crear un formulario con algunos campos ocultos que se envía a GTmetrix. Usamos la URL de la pestaña actual para decirle a GTmetrix en qué página ejecutar la prueba.

Sin usted, esta web no existiria. Gracias por visitarme, espero que le haya gustado y vuelva. Gracias ☺️

Fecha actualización el 2021-12-20. Fecha publicación el 2021-12-20. Categoria: chrome Autor: Oscar olg Mapa del sitio Fuente: bollyinside