Step-by-Step Guide to Creating Chrome Extensions with Harshil Tomar
Ever felt like your browser could be more useful? That’s exactly what Chrome extensions do; they add extra features to improve your browsing experience.
In a recent session, Harshil Tomar, a software engineer at HiFive, a Texas-based startup, shared his journey and insights into Chrome extension development. He walked through everything from his own career path to the step-by-step process of building and launching a Chrome extension.
Harshil’s Journey
He didn’t start out as a developer. He was a UI/UX designer and digital illustrator, freelancing on Fiverr and Instagram under the name Hard Draws. During the COVID period, he was making decent money,but he realized that UI/UX wasn’t providing the technical challenges he wanted and had fewer opportunities for exponential salary growth.
That’s when he shifted to front-end development. He landed a remote internship, then a full-time role at HiFive and also got featured in Harkirat’s Podcast (Let’s Go cohort gang). Before that, he worked at Newgen Software for a few months and completed his B.Tech at MSIT, Delhi.
For Harshil, personal projects played a huge role in his career shift. He strongly believes that building and deploying projects not only helps in learning but also makes your resume stand out.
What Are Chrome Extensions and Why Build One?
Chrome extensions are small tools that work directly within the browser to add new features to websites. Unlike web apps, which are standalone, extensions are integrated into the browsing experience.
They’re great for adding extra functionality to a website without having to open another app. A good example is an extension that adds a screenshot button to YouTube, so you don’t have to use an external tool.
Despite being incredibly useful, Chrome extensions are still an unexplored space, making them a great area to stand out as a developer.
Building a Chrome Extension: Task Manager with Pomodoro Timer
Harshil walked through a task manager with a Pomodoro timer as a Chrome extension.
Credits : Harshil :)
Key Components:
Manifest.json – This is the core file that defines everything about the extension, like its name, version, description, icons, and permissions.
Action Points – The UI of the extension starts here. A common example is a popup HTML file, which opens when you click the extension icon.
Permissions – Extensions require different permissions depending on their functionality.
Hershel kept it simple by only using local storage permissions.
He pointed out that extensions with fewer permissions get approved much faster, while those requiring more access take longer.
Background Scripts – These scripts run in the background, even when the extension isn’t open.
Local Storage – Used to save tasks and user settings within the extension.
For the tech stack, Harshil started with HTML, CSS, and JavaScript but later switched to React for better scalability. The reason? Managing a growing project with just HTML, CSS, and vanilla JavaScript can quickly become messy, whereas React offers better structure.
Source : thousandeyes.com/blog/building-chrome-exten..
Deploying to the Chrome Web Store
Once the extension is built, testing it locally is simple—just enable Developer Mode in Chrome and load the extension as an unpacked folder.
To publish it on the Chrome Web Store, you need to:
Zip the extension files
Pay a one-time $5 fee
Fill in metadata and add a privacy policy URL
Hershel emphasized that choosing an SEO-friendly name for your extension is crucial. A well-optimized name can help your extension get discovered by more users.
Once the extension is live, the Chrome Web Store provides analytics, including downloads, user locations, and uninstall trends.
Important Q&A from the talk
Question. Is it difficult to get a Chrome extension approved?
Answer. No, as long as you follow the guidelines and keep permissions minimal, approvals are usually quick. The only requirement is a one-time $5 fee, after which you can publish multiple extensions.
Question. How do you set up payments for an extension?
Answer. You need to register as a trader and provide your banking details.
Question. When should you build a Chrome extension instead of a web app?
Answer. If your feature needs to work within an existing website rather than as a standalone app. For example, an extension that adds extra controls to YouTube would be more convenient than a separate website for the same functionality.
Question. How does performance optimization for Chrome extensions compare to web apps?
Answer. It’s quite similar. Best practices include caching, efficient scripts, and using an optimized index.html entry point.
Conclusion
One of the key takeaways was the importance of being part of online tech communities. Platforms like Discord and local tech groups can help you stay updated and connect with other developers.
For anyone interested in building Chrome extensions, his journey is proof that starting small, experimenting, and shipping personal projects is the best way forward.
Want to learn more? Check out the TechKareer YouTube channel for the full session.