For the past two years, I’ve wanted to build real Chrome extensions.
I had ideas. I had excitement. I had big plans.
But I didn’t have the direction, the resources, or the right tooling to turn those ideas into reality. Chrome extensions—especially modern, Manifest V3 extensions—come with complicated architecture, annoying setup tasks, and limited documentation.
So, like many of my ideas…
I dropped everything.
But then came the Kiroween Hackathon.
And in just 36 hours, I built the Chrome extension development template I’d been dreaming about for two years:
🎉 Extension Bro — Skeleton Crew
A luxury, production-ready, AI-capable, React + Vite + TypeScript Chrome extension template with a generator, design system, and two real working extensions.
This is the story of how I built it, what I learned, and how Kiro changed everything.
🎃 The Spark That Started It All
When the hackathon began, I decided:
“This time, I’m doing it. No excuses.”
I had always struggled with Chrome extension architecture:
Setting up React + Vite the correct way
Handling Manifest V3 service workers
Managing popup → background → content messaging
Chrome storage
Icons
Build scripts
AI integration
These pain points killed my motivation again and again.
But with Kiro, something clicked.
💡 Kiro was a game changer
Here’s the polished version of what I’ve told many people already:
Kiro was a game changer for me. For the past two years, I had many ideas for Chrome extensions, but due to the limitations of Chrome extensions and the lack of available resources, I dropped everything. However, in this hackathon, I decided to give it a try—and it worked. The steering really helped me create a highly optimized and production-ready extension template that I can use to build more complex Chrome extensions in the future.
This hackathon gave me a reason, but Kiro gave me the ability.
- 🧪 How Kiro Supercharged My Development Process
- 🔧 1. Vibe Coding — Fixing UI, Bugs, and Optimization
Whenever the UI felt off—or something just wasn’t working right—I used vibe coding to quickly refine things.
The bundle size reduction blew my mind.
Suddenly, my extension felt like a SaaS-level product.
🧩 2. Agent Hooks — My Secret Weapon
Hooks saved me hours of debugging.
“Agent hooks helped me a lot, as did Kiro itself. I set up hooks so that I could get the desired output and write code properly. Sometimes small mistakes—like casing issues—can waste hours, so I configured hooks to prevent these kinds of errors.”
Hooks ensured consistency.
They ensured correctness.
They made Kiro predictable and reliable.
🧠 3. Steering — The Real Superpower
Steering is where the magic happened.
With steering, I could:
Constrain Kiro when I wanted minimal UI
Boost Kiro when I wanted animations
Change design rules
Define component quality
Declare color palettes
Lock in architecture decisions
As I said:
“I used steering both to constrain Kiro and to boost it, because not every project requires the same things. Sometimes I want a very simple, basic UI, and other times I want animations—so steering helped me adjust that easily. The strategy that worked best for me was clearly defining requirements, such as design style, color themes, and other details.”
This gave me SaaS-level design quality with AI-level speed.
🤯 The Moment That Blew My Mind
There was one experience that changed everything.
I wrote a single prompt, asked for an AI-powered, polished extension UI—and Kiro generated nearly the entire working extension.
Just… like… that.
“That was something that completely blew my mind. I literally coded a fully working, AI-integrated, beautifully designed extension with just one prompt and two revisions. A well-structured template + hooks + steering = insane productivity.”
This made me realize:
With the right structure, AI becomes 10x more powerful.
🧱 What I Built in 36 Hours
Let me break down Extension Bro — Skeleton Crew:
- ✔️ React + Vite + TypeScript Architecture
- Fully typed
- Multi-entry Vite build
- Popup + content scripts + service worker
- Optimized rollup output
- Hot Reload for popup (HMR)
- Tailwind design tokens & luxury theme
- Gold, glassmorphism, gradients, animations
✔️ A Generator CLI
Run:
node generate-bro.js
And you get:
New extension folder
Manifest updated
Icons generated
Dependencies installed
Ready-to-run dev server
Clean structure with no build artifacts
✔️ AI Features
I built two example extensions:
- Is True? — AI Fact Checker
@google/genai integration
Select text → Right-click → Verify
Verdict + confidence
Beautiful modal
- Spam Detector 🛡️
Real-time background analysis
Page scanning
Warning overlay system
Persistent toggle state
All built on top of my template.
⚙️ Technologies I Used
- React 18
- TypeScript
- Vite
- Tailwind CSS
- Manifest V3
- Google Gemini AI
- Node.js (for generator)
- Kiro steering, hooks, vibe coding
📦 How You Can Use Extension Bro
You can build:
AI-powered extensions
Productivity tools
Security scanners
UI-enhancement extensions
Screenshot tools
Translators
Context menu utilities
Run the generator and start coding.
🔮 Future Plans
This is just the beginning.
🌐 1. Multi-language Support
I want to add templates for:
Vue
Svelte
Solid
Vanilla TypeScript
🧱 2. Drag-and-Drop Chrome Extension Builder
This is my ultimate vision:
A UI builder where you drag components, and the system automatically generates a Chrome extension using my template + AI.
Imagine building extensions like:
Webflow → Chrome Extensions.
That’s my dream.
❤️ Final Thoughts
This hackathon helped me create something I’ve wanted for years.
Kiro helped me structure, build, polish, and perfect a template I can use forever.
A template I can extend.
A template I can teach others with.
A template I can turn into a full product later.
If you want to check out the project, here it is:
👉 GitHub: https://github.com/openmediaveris-deepak/Extension-Bro
Thanks to Kiro, the Kiroween Hackathon, and the community for giving me the push I needed.
If you liked this, feel free to drop a comment or star the repo.
More extensions are coming soon 👻✨
Top comments (0)