Hace una extensi贸n de chrome f谩cil 馃捇
Hace poco mirando extensi贸nes del estilo Mainichi pens茅, 驴Por qu茅 no tener en cada nuevo tab algo de mi gusto?
Soy Dragon Ball lover por lo que pens茅 en un personaje de la saga, con su foto y una frase que te lleve a recordarlo 馃悏馃А
Comenc茅 por hacer una single page con la funcionalidad que quer铆a para la extensi贸n, un personaje distinto cada vez que carge la p谩gina. Use Bootstrap porque todav铆a no soy muy amigo de CSS.
Despu茅s lleg贸 la hora de investigar c贸mo convertir eso en una extensi贸n de Chrome, lo cual result贸 ser un proceso sencillo.
En primer lugar, debemos agregar 3 archivos importantes al scaffolding de nuestro proyecto
- manifest.json
Se concentra b谩sicamente toda la informaci贸n de extensi贸n, como el nombre, elementos a cargar (archivos externos), permisos y acciones del navegador.
- popup.html
Ser谩 la acci贸n al dar click en el icono de nuestra extensi贸n, se situar谩 a la derecha de la barra de direcciones de chrome, las vemos en cada extension que usamos todos los d铆as.
Es un html com煤n, m谩s una l铆nea de c贸digo de chrome en un peque帽o script le podemos dar la acci贸n de abrir un link en una nueva tab a un bot贸n, as铆:
Yo agregue un bot贸n que te lleva al repo de la extensi贸n y otro por si tenes ganas de regalarme un cafecito 馃榿
- icon.png
Un icono representativo a nuestra extensi贸n, ser谩 visible en la p谩gina de extensiones de chrome y ser谩 el icono que tendr谩 la acci贸n de popup.
Con nuestra single page de wallpapers mas estos archivos agregados al proyecto, ya podemos ir a chrome y probar la extensi贸n.
En chrome, vamos a chrome://extensions y activamos el Modo de Desarrollador (arriba a la derecha)
despu茅s damos click en Cargar extensi贸n sin empaquetar, seleccionamos la carpeta de nuestro proyecto y vamos a ver cargada nuestra extensi贸n.
Al activarla ya podemos probarla, abriendo pesta帽as y dando click al icono viendo el popup que creamos.
Ya con el estilo depurado y luego de probar su funcionamiento localmente, podemos subir la extensi贸n a la tienda de chrome 馃捇
En la Chrome Web Store vamos al Panel de desarrolladores donde tenemos que pagar una cuota de registro de u$s5, y despues seguir unos sencillos pasos para enviar la extensi贸n a revisi贸n. Si les interesa que los ayude con eso pueden mandarme dm!
La extensi贸n del post la pueden usar, se llama HolaSoyGoku, pasen a probarla 馃惒 Tambi茅n pueden verla en la web https://holasoygokufrases.web.app
Gracias por leer, si gustan pueden invitarme un cafecito 鈽曪笍
