Cómo escribir y crear una extensión básica de Chrome

Chrome es fácilmente el navegador web más popular del planeta. Según la encuesta de participación de mercado de navegadores de escritorio de Statcounter, Chrome se lleva a casa un enorme 65% del mercado de navegadores de escritorio a fines de 2017.

Con ese tipo de poder que define el mercado, diseñar para Chrome se ha convertido en una prioridad. Lo mismo ocurre con las extensiones: Chrome ofrece la base de usuarios más grande para las extensiones, con decenas de miles de extensiones, temas y aplicaciones que pueblan Chrome Web Store.

Si desea sacar provecho de la tendencia, puede crear su propia extensión básica de Chrome. Solo necesitará algunas habilidades básicas de desarrollo web (HTML, CSS y Javascript), así como una cucharadita de JSON para unirlo todo.

Revisaremos la estructura más básica necesaria para crear una extensión básica de Chrome en esta publicación. Para obtener una vista en profundidad de las posibilidades disponibles, consulte la Guía de extensión para desarrolladores de Chrome.

Escribir una extensión básica de Chrome: destino manifiesto

Para este tutorial, crearemos una extensión básica de Chrome que muestra un mensaje emergente simple cuando se hace clic. Necesitaremos un par de archivos importantes: un icono (“icon.png”), un archivo HTML (“popup.html”) y el manifiesto más importante (“manifest.json”). Todos estos archivos vivirán dentro de un directorio con el nombre de su extensión. En este caso, se llama “Hola mundo”.

Una extensión de Chrome se define por su manifiesto. Este fragmento de JSON muestra a Chrome cómo interpretar la extensión, qué archivos cargar y cómo interactuar con el usuario.

El archivo de manifiesto para nuestra extensión muy básica se ve así:

Este archivo de manifiesto colocará un icono en la barra de herramientas del usuario que, cuando se hace clic, carga el contenido del archivo llamado “popup.html”. Lo siguiente es el meollo del asunto del resto del contenido:

  • manifest_versionle dice a Chrome con qué versión del marcado de manifiesto está trabajando. Para las extensiones modernas, deberá configurarlo en2.
  • name muestra el nombre que mostrará la extensión en la tienda de Chrome y “chrome: // extensions”.
  • description muestra el texto descriptivo que se muestra en “chrome: // extensions”.
  • browser actioncarga el icono en la barra de herramientas. También permite que la extensión responda a la entrada del usuario mostrando una información sobre herramientas, una ventana emergente o una insignia. Consulte una lista completa de todo lo que puede hacer “browser_action” .
  • default_icon muestra la ruta al icono desde el directorio de la extensión.
  • default_popup muestra la ruta al archivo que se cargará cuando se haga clic en el icono de la extensión.
  • permissionslimita la región funcional de la extensión. activeTabes el más común, lo que permite que la extensión acceda a la pestaña más frontal. Google proporciona una lista de todos los permisos que puede solicitar una extensión .

Si desea profundizar en todo lo que puede declarar el manifiesto de una extensión de Chrome, consulte los documentos de Google sobre manifiestos de extensión .

Escribir una extensión básica de Chrome: ventanas emergentes

Ahora que hemos escrito nuestro manifiesto, podemos averiguar qué mostrará nuestra extensión. Eso depende de nuestro archivo “popup.html”, que se mostrará cuando se cargue la extensión. Esto es lo que usaremos para este proyecto:

Como puede ver, esto generará texto con estilo con CSS. Si desea agregar Javascript o CSS externo a su extensión, eso requiere declarar los scripts en el manifiesto, debajo de la content_scriptsclave. Una vez que tenga eso referenciado en el manifiesto, puede cargar esos scripts como lo haría normalmente.

Escribir una extensión básica de Chrome: cargar en Chrome

Una vez que hayamos escrito el código básico para nuestra extensión y encontramos un ícono adecuado, podemos cargarlo en Chrome.

1. Navegue a “chrome: // extensions” y active el “Modo de desarrollador” marcando la casilla de verificación en la parte superior derecha.

2. Haga clic en el botón “Cargar extensión descomprimida …” y seleccione el directorio de la extensión.

3. Una vez que se cargue la extensión, verá su icono en la barra de menú.

4. Haga clic en la extensión para ver su efecto (muy simple).

Conclusión: expandiendo su extensión de Chrome

Una vez que haya terminado con su extensión y esté listo para publicar, deberá crear una cuenta de desarrollador de Chrome. Ese no es un proceso exactamente sencillo, pero Google proporciona  instrucciones completas para publicar su extensión de Chrome aquí .

Obviamente, hay mucho más que puedes hacer con tu extensión de Chrome, pero eso está más allá del alcance de esta publicación. Si desea obtener más información sobre todo lo que pueden hacer las extensiones de Chrome, consulte la Guía de extensiones para desarrolladores de Chrome de Google .

¡Si te ha gustado vota con 5 Estrellas!
(Votos: 0 Promedio: 0)

Escribe Aquí Tu Comentario