Comment créer et publier une extension Chrome en 20 minutes

Vous êtes-vous déjà demandé ce que cela ferait de créer une extension Chrome? Eh bien, je suis ici pour vous dire à quel point c'est facile. Suivez ces étapes et votre idée deviendra réalité et vous pourrez publier une véritable extension dans le Chrome Web Store en un rien de temps.

Qu'est-ce qu'une extension Chrome?

Les extensions Chrome vous permettent d'ajouter des fonctionnalités au navigateur Web Chrome sans plonger profondément dans le code natif. C'est génial, car vous pouvez créer de nouvelles extensions pour Chrome avec des technologies de base que les développeurs Web connaissent très bien: HTML, CSS et JavaScript. Si vous avez déjà créé une page Web, vous pourrez créer une extension plus rapidement que vous ne pouvez déjeuner. La seule chose que vous devez apprendre est comment ajouter des fonctionnalités à Chrome via certaines des API JavaScript exposées par Chrome.

Si vous n'avez pas encore d'expérience dans la création de pages Web, je vous recommande d'abord de vous plonger dans certaines ressources gratuites pour apprendre à coder, comme freeCodeCamp.

Que voulez-vous construire?

Avant de commencer, vous devez avoir une idée approximative de ce que vous voulez construire. Cela n'a pas besoin d'être une nouvelle idée révolutionnaire, nous pouvons simplement le faire pour le plaisir. Dans cet article, je vais vous parler de mon idée et de la manière dont je l'ai mise en œuvre dans une extension Chrome.

Le plan

J'ai utilisé l'extension Chrome Unsplash pendant un certain temps, ce qui me permet d'avoir de belles images d'arrière-plan d'Unsplash dans mon onglet par défaut. Plus tard, je l'ai remplacé par l'extension Muzli Chrome qui transforme l'onglet par défaut en un flux d'actualités et de photos de conception provenant du Web.

Utilisons ces deux extensions comme inspiration pour créer quelque chose de nouveau, mais cette fois, pour les cinéphiles. Mon idée est de montrer une image d'arrière-plan aléatoire d'un film chaque fois que vous ouvrez un nouvel onglet. Au défilement, il devrait se transformer en un bon flux de films et d'émissions de télévision populaires. Alors, commençons.

Étape 1: mise en place

La première étape consiste à créer un fichier manifeste nommé manifest.json. Il s'agit d'un fichier de métadonnées au format JSON qui contient des propriétés telles que le nom, la description, le numéro de version de votre extension, etc. Dans ce fichier, nous indiquons à Chrome ce que l'extension va faire et les autorisations dont elle a besoin.

Pour l'extension de film, nous devons avoir l'autorisation de contrôler activeTab , donc notre manifest.jsonfichier ressemble à ceci:

{ “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”]}

Comme vous pouvez le voir, nous disons que ce newtab.htmlsera le fichier HTML qui doit être rendu à chaque fois qu'un nouvel onglet est ouvert. Pour ce faire, nous devons avoir l'autorisation de contrôler activeTab , donc lorsqu'un utilisateur tente d'installer l'extension, il sera averti avec toutes les autorisations nécessaires à l'extension.

Une autre chose intéressante à l'intérieur du manifest.jsonsont les actions du navigateur. Dans cet exemple, nous l'utilisons pour définir le titre, mais il y a plus d'options. Par exemple, pour afficher une fenêtre contextuelle chaque fois que vous cliquez sur l'icône de l'application dans la barre d'adresse, tout ce que vous avez à faire est quelque chose comme ceci:

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

Maintenant, popup.htmlsera rendu dans la fenêtre contextuelle créée en réponse au clic d'un utilisateur sur l'action du navigateur. C'est un fichier HTML standard, il vous donne donc libre cours sur ce que le popup affiche. Mettez simplement une partie de votre magie dans un fichier nommé popup.html.

Étape 2: Testez si cela fonctionne

L'étape suivante consiste à créer le newtab.htmlfichier et à mettre dans un ' Hello world':

  Test   

Hello World!

Pour tester si cela fonctionne, visitez chrome://extensionsdans votre navigateur et assurez-vous que la case à cocher Mode développeur dans le coin supérieur droit est cochée.

Cliquez sur Charger l'extension décompressée et sélectionnez le répertoire dans lequel résident vos fichiers d'extension. Si l'extension est valide, elle sera immédiatement active afin que vous puissiez ouvrir un nouvel onglet pour voir votre «Hello world».

Étape 3: Rendre les choses agréables

Maintenant que notre première fonctionnalité fonctionne, il est temps de la rendre agréable. Nous pouvons simplement styliser notre nouvel onglet en créant un main.cssfichier dans notre répertoire d'extension et le charger dans notre newtab.htmlfichier. Il en va de même lors de l'inclusion d'un fichier JavaScript pour toute fonctionnalité active que vous souhaitez inclure. En supposant que vous ayez déjà créé une page Web, vous pouvez maintenant utiliser votre magie pour montrer à vos utilisateurs ce que vous voulez.

Terminer le plan

Tout ce dont j'avais besoin pour terminer l'extension du film était HTML, CSS et JavaScript, donc je ne pense pas qu'il soit pertinent de plonger profondément dans le code, mais j'aimerais le parcourir rapidement.

Voici ce que j'ai fait:

Pour mon idée, j'avais besoin de belles images d'arrière-plan, donc dans le fichier JavaScript, j'ai utilisé l'API TMDb pour récupérer des films populaires, pris leurs images de fond et les mettre dans un tableau. Chaque fois que la page se charge, elle sélectionne maintenant au hasard une image de ce tableau et la définit comme arrière-plan de la page. Pour rendre cette page un peu plus intéressante, j'ai également ajouté la date actuelle dans le coin supérieur droit. Et pour plus d'informations, il permet aux utilisateurs de cliquer sur l'arrière-plan qui conduit à visiter la page IMDb du film.

J'ai remplacé l'écran par un bon flux de films populaires lorsque l'utilisateur essaie de faire défiler vers le bas. J'ai utilisé la même API pour créer des cartes de films avec une image, un titre, une note et un décompte des votes. Ensuite, en cliquant sur l'une de ces cartes, il affiche la vue d'ensemble avec un bouton pour regarder une bande-annonce.

Le résultat

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.