¿Alguna vez se preguntó cómo sería crear una extensión de Chrome? Bueno, estoy aquí para decirte lo fácil que es. Sigue estos pasos y tu idea se convertirá en realidad y podrás publicar una extensión real en Chrome Web Store en poco tiempo.

¿Qué es una extensión de Chrome?

Las extensiones de Chrome le permiten agregar funcionalidad al navegador web Chrome sin profundizar en el código nativo. Eso es increíble porque puede crear nuevas extensiones para Chrome con tecnologías centrales con las que los desarrolladores web están muy familiarizados: HTML, CSS y JavaScript. Si alguna vez ha creado una página web, podrá crear una extensión más rápido de lo que puede almorzar. Lo único que necesita aprender es cómo agregar algunas funciones a Chrome a través de algunas de las API de JavaScript que expone Chrome.

Si aún no tiene experiencia en la creación de páginas web, le recomiendo que primero se sumerja en algunos recursos gratuitos para aprender a codificar, como freeCodeCamp.

¿Qué quieres construir?

Antes de comenzar, debe tener una idea aproximada de lo que desea construir. No es necesario que sea una idea nueva e innovadora, solo podemos hacer esto por diversión. En este artículo, les contaré mi idea y cómo la implementé en una extensión de Chrome.

El plan

He usado la extensión Unsplash de Chrome por un tiempo, lo que me permite tener buenas imágenes de fondo de Unsplash en mi pestaña predeterminada. Más tarde lo reemplacé con la extensión Muzli Chrome que convierte la pestaña predeterminada en una fuente de noticias de diseño y tomas de toda la web.

Usemos estas dos extensiones como inspiración para construir algo nuevo, pero esta vez, para los amantes del cine. Mi idea es mostrar una imagen de fondo aleatoria de una película cada vez que abres una nueva pestaña. En el desplazamiento, debería convertirse en una buena fuente de películas y programas de televisión populares. Entonces empecemos.

Paso 1: configurar las cosas

El primer paso es crear un archivo de manifiesto llamado manifest.json. Este es un archivo de metadatos en formato JSON que contiene propiedades como el nombre de su extensión, descripción, número de versión y así sucesivamente. En este archivo le decimos a Chrome qué va a hacer la extensión y qué permisos requiere.

Para la extensión de la película, necesitamos tener permiso para controlar activeTab , por lo que nuestro manifest.jsonarchivo se parece a esto:

{ “manifest_version”: 2, “name”: “RaterFox”, “description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”, “version”: “1”, “author”: “Jake Prins”,

"browser_action": { "default_icon": "tab-icon.png", “default_title”: “Have a good day” },

“chrome_url_overrides” : { “newtab”: “newtab.html”},

 “permissions”: [“activeTab”]}

Como puede ver, decimos que newtab.htmlserá el archivo HTML que debe renderizarse cada vez que se abre una nueva pestaña. Para hacer esto necesitamos tener permiso para controlar el activeTab , por lo que cuando un usuario intente instalar la extensión será advertido con todos los permisos que necesita la extensión.

Otra cosa interesante dentro del manifest.jsonson las acciones del navegador. En este ejemplo lo usamos para establecer el título, pero hay más opciones. Por ejemplo, para mostrar una ventana emergente cada vez que hace clic en el icono de la aplicación dentro de la barra de direcciones, todo lo que tiene que hacer es algo como esto:

“browser_action”: { “default_popup”: “popup.html”, },

Ahora, popup.htmlse representará dentro de la ventana emergente que se crea en respuesta al clic de un usuario en la acción del navegador. Es un archivo HTML estándar, por lo que le da rienda suelta a lo que muestra la ventana emergente. Simplemente coloque algo de su magia dentro de un archivo llamado popup.html.

Paso 2: prueba si funciona

El siguiente paso es crear el newtab.htmlarchivo y poner un ' Hello world':

  Test   
Hello World!

Para probar si funciona, visite chrome://extensionsen su navegador y asegúrese de que la casilla de verificación Modo de desarrollador en la esquina superior derecha esté marcada.

Haga clic en Cargar extensión descomprimida y seleccione el directorio en el que viven sus archivos de extensión. Si la extensión es válida, estará activa de inmediato para que puedas abrir una nueva pestaña para ver tu 'Hola mundo'.

Paso 3: hacer las cosas agradables

Ahora que tenemos nuestra primera función funcionando, es hora de mejorarla. Simplemente podemos diseñar nuestra nueva pestaña creando un main.cssarchivo en nuestro directorio de extensión y cargarlo en nuestro newtab.htmlarchivo. Lo mismo ocurre cuando se incluye un archivo JavaScript para cualquier funcionalidad activa que le gustaría incluir. Suponiendo que ha creado una página web antes, ahora puede usar su magia para mostrar a sus usuarios lo que quiera.

Terminando el plan

Todo lo que necesitaba para terminar la extensión de la película era HTML, CSS y JavaScript, así que no creo que sea relevante profundizar en el código, pero me gustaría revisarlo rápidamente.

Aquí esta lo que hice:

Para mi idea, necesitaba algunas imágenes de fondo agradables, por lo que en el archivo JavaScript utilicé la API de TMDb para buscar algunas películas populares, tomé sus imágenes de fondo y las coloqué en una matriz. Siempre que la página se carga, ahora elige al azar una imagen de esa matriz y la establece como fondo de la página. Para hacer esta página un poco más interesante, también agregué la fecha actual en la esquina superior derecha. Y para obtener más información, permite a los usuarios hacer clic en el fondo que conduce a visitar la página IMDb de la película.

Reemplacé la pantalla con una buena fuente de películas populares cuando el usuario intenta desplazarse hacia abajo. Usé la misma API para crear tarjetas de películas con una imagen, título, calificación y recuento de votos. Luego, al hacer clic en una de esas tarjetas, muestra la descripción general con un botón para ver un avance.

El resultado

Now with that little manifest.json file and just some HTML, CSS and JavaScript, every new tab that you open looks a lot more interesting:

Step 4: Publish your extension

When your first Chrome extension looks nice and works like it should, it’s time to publish it to the Chrome Store. Simply follow this link to go to your Chrome Web Store dashboard (you’ll be asked to sign in to your Google account if you’re not). Then click the Add new item button, accept the terms and you will go to the page where you can upload your extension. Now compress the folder that contains your project and upload that ZIP file.

After successfully uploading your file, you will see a form in which you should add some information about your extension. You can add an icon, a detailed description, upload some screenshots, and so on.

Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the Preview changes button. When you’re happy with the result, hit Publish changesand that’s it, your done!

Now go to the Chrome Web Store and search for your extension by its title (It might take some time before it’s up there). If you’re interested, you can find mine here.

The only thing left to do is get some users. So you might want to share a post about your life changing Chrome extension on social media. Tell your friends to check it out. Add it to ProductHunt. And don’t forget to share your project here in the comments. I’m curious to see what you came up with!

Conclusion

As a web developer, it’s very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript and a basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within just 20 minutes. Building an extension that’s new, worthwhile or looks nice will take some more time. But it’s all up to you!

Use your creativity to come up with something interesting and if you ever get stuck, the excellent Chrome extension documentation can probably help you out.

So what are you waiting for? It’s time to start working on your own Chrome extension and turning your idea into reality.

Don’t forget to share your project in the comments and hit the clap button if this article was any useful to you. If you got some time and want to be a hero, give my extension a positive rating. That would be highly appreciated!

Got questions or feedback? Let me know in the comments!

Thanks for reading! Hope the information was helpfull. Follow me on Medium for more tech related articles or on Twitter and Instagram @jakeprins_nl.