Creating My First Chrome Extension
I am not a developer but I tried building a Chrome extension 4 years ago, but couldn't complete the project as I encountered so many errors and issues. But the idea of creating simple Chrome extensions stayed with me.
And... allow me to introduce X Mute– a Chrome extension that helps you clean your X (Twitter) feed by allowing you to mute multiple words at once. Currently, you need to mute words one-by-one on X, but the extension can block tens of words in no time.
As you can see in the above screenshot, you can copy-paste multiple comma-separated words/phrases at once, select right settings and just click the Start Muting button. It mutes all the provided words one-by-one.
Getting started with building
A few days ago, I tweeted this idea and started building it by myself a few days later (yes, this post is about that only).
But this time, I took help of AI to build the extension – the mighty Cursor AI. It took me a few hours to to complete the initial version, but it was worth it. You can see the screenshot of my Cursor IDE setup.
In the first prompt itself, I provided the HTML snippets of X page to mute words so that Cursor can auto-select the required CSS Selectors from the code, and it did that. The basic version of the extension was ready in the first two hours itself, and then I spent the next few hours tweaking the code to make polish the UI and UX a bit.
The same day, I even created the Chrome developer account and tried getting myself verified by paying $5 and submitting my IDs. They said that they'll get back in the next few days, so then I started working on the landing page that I, again, created using Cursor. It took me around 1.5 hours to complete the landing page using Next.js, and I chose Next.js because the mute words list project was already built using the same tech stack.
Then, I called it a day and started waiting for the next day... to get verified.
Submitting to Chrome Webstore
The very next day, my Chrome Webstore developer account actually got verified and I received the below confirmation email.
The next step was to submit the extension as a .zip file along with proper description, screenshots, and logo.
- For the screenshot, I just opened the "popup.html" in Chrome and did some minor CSS changes to make it appear in the middle and then took the screenshot.
- For the description, I asked Cursor itself to generate a solid description for the extension and then copy-pasted the same while submitting. I also had to provide Permission justification which Cursor wrote for me.
- For the logo, I got this flower like SVG icon from Reshot and just edited the color to match the website's theme.
Then I hit the Submit for review button and started waiting for the good news.
Getting rejected
The very next day, I received an email (see screenshot) saying that the submission was rejected due to some kind of violations.
Upon looking, I discovered that I was requesting an additional "scripting" permission in the manifest.json file but that permission wasn't getting used for anything. I provided the rejection email to my developer, Cursor, and asked it to fix the issue. Cursor also agreed that the "scripting" permission was unnecessary and can be safely removed without harming any of the features.
I re-submitted the fresh .zip file and started waiting for the updated. I kept refreshing my emails but didn't receive a reply for the next few days.
Live on Chrome Webstore
After 4 days, I received the email (see screenshot) that I was waiting for – my submission was accepted and the extension was live on the Webstore.
It's just the very first version of the extension, and I will be further improving it by adding more features and making it even more user friendly.
And now that I have a little bit of understanding how Chrome extensions are developed, expect more cool extensions coming from my side.
That's it.
- ← Previous
Better YouTube Embeds ~77% Faster