My first Chrome Extension

I have been using chrome extensions for a year now but in all honesty I wasn’t aware how easy it is to make one yourself 😉.

I have been contributing to Student Code-in for a month now and that’s how I learnt about chrome extensions. As soon as I got acceptance mail I had to choose few projects I would like to contribute to. Since I was already doing front end web development projects so I decided to stick to the same domain. Being selected for Student Code-in program gave me the opportunity to connect with like minded people, contribute to open source, learn and grow all this while receiving mentorship. My mentor Garima Singh encouraged me not to fear mistakes if I make any along the way and just keep contributing and learning as much as I can and advised “not rush in the process”.

✨How to make your own chrome extensions 🧐

I followed this article for setting up the environment. The easiest chrome extension to start with is Profile extension. I would say every developer should create this extension for easily accessing all their social media profiles in one click + tech stack is only 😄 HTML, CSS (and Javascript is optional).

my profile extension

There are many tutorials and articles on how to make this but the steps remain same :-

1. Create manifest.json
2. Make an HTML file ( link it with manifest.json)
3. Keep coding (👨‍💻 👩‍💻)
4. Check if it’s working :

• To test if the extension works, visit chrome://extensions in your browser and ensure that the Developer mode checkbox in the top right-hand corner is checked.
• Click Load unpacked extension and select the directory in which your extension files live. If the extension is valid, it will be active straight away so you can open a new tab to see your extension.

5. Use CSS and Javascript for enhancing

6. When your first Chrome extension looks nice and works as 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 AND

Voila !!!! You’ve done it 😁.

Modified version of my profile extension

👉 Link to my Code.

💙 I am looking forward to learn and share more. If you have read so far thank you so much and have a “great day”.

Connect with me on Github and Twitter.