I built CodeCraft, a Chrome extension packed with small developer tools to boost my daily productivity. While it might not have a large user base yet, I want to share the journey of creating it with you.
Why I Created CodeCraft
After working as an iOS and front-end developer for several years, I noticed how tough it can be to get some simple tasks done quickly. There are all these little tools that can make development easier and more enjoyable, but they’re not always easy to find.
Whenever I needed to prettify a JSON or encode some URL parameters, I found myself searching on Google and landing on slow websites cluttered with ads. It was a frustrating experience for something that should be simple.
So, I thought, why not build a tool myself? DevUtils and DevToy are amazing on Mac and Windows, but I think a Chrome extension would be more efficient for when I’m searching, debugging, or checking documents. Since there wasn’t a good Chrome extension for this, I decided to create one that I could use every day to keep my coding life smooth and happy.
How to Build a Chrome Extension
Now the question was how to build a Chrome extension myself. After following the Hello World extension tutorial, I understood the basic flow of building an extension for Chrome. It’s quite simple — the only knowledge I needed was how to build a web app.
There are two mainstream frameworks for building web apps: Vue and React. I could also use Flutter to build a Flutter web app. I knew about React years ago but never tried it, so I decided to use this project as an opportunity to learn a new framework while building something useful.
I’m not great at UI design, and I felt this tool didn’t need a fancy look. So, I needed to choose a UI framework with a design system to ensure it looked decent without requiring a lot of design effort from me. I found FluentUI from Microsoft. Its acrylic style caught my eye immediately, and I knew my app should use it.
For a personal side project, it was easy to choose my tech stack and decide which technology or framework to use. The Technology Solution Evaluation process only took me two days, without needing to create a detailed report.
What to do next?
After mentally reviewing my product requirements and completing the Technology Solution Evaluation in two days, the next step was to start building.
What’s involved in the build stage?
First, I needed a simple wireframe design to show what CodeCraft would look like. I compared and drew inspiration from DevUtils and DevToys. Soon, I sketched a small prototype on Figma and began building it.
Now, let’s start coding the first line.
In the next post, I’ll dive into the development process and share how I started bringing this prototype to life. Stay tuned for more updates on my journey to create the perfect Chrome extension!
