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 en navegadores de escritorio a finales 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 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 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 de suma importancia («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í:
{ "manifest_version": 2, "name": "Hello World!", "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ] }
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 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.namemuestra el nombre que mostrará la extensión en la tienda de Chrome y «chrome: // extensions».descriptionmuestra 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. Echa un vistazo a un lista completa de todo lo que puede hacer «browser_action».default_iconmuestra la ruta al icono desde el directorio de la extensión.default_popupmuestra 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 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:
<!doctype html> <html> <head> <title>Hello World</title> </head> <style type="text/css"> body { margin: 5px; } h1 { font-size: 15px; text-align: center; } </style> <body> <h1>Hello World!</h1> </body> </html>
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, bajo el content_scripts llave. 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. Vaya 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 extensión para desarrolladores de Chrome.
Apoya nuestro trabajo ❤️
Si te ha gustado este artículo, considera dejar una propina para ayudarnos a seguir publicando contenido de calidad.
