DEV Community

Razu Kc
Razu Kc Subscriber

Posted on

extn — A Modern CLI Framework for Building Chrome Extensions (with HMR + Live Preview)

#browser #chrome #extensions #framework

I’m excited to introduce extn — a TypeScript-first CLI framework that makes building Chrome extensions fast, modern, and effortless. If you’ve ever been stuck in the cycle of manually reloading chrome://extensions after every tiny file change… this tool is for you.

👉 GitHub Repo: https://github.com/razukc/extn

🌟 Why extn?

Building browser extensions is often painful — outdated boilerplate, complex manifest setup, and no good local dev environment.

extn fixes this by giving you:

  • ⚡ Hot Module Replacement (HMR) for instant updates
  • 🧪 Live Preview — automatically opens Chrome with your extension loaded
  • 📦 Templates for Vanilla TS, React TS, and Vue TS
  • 🏗️ Production-ready scaffolding
  • 🔒 Manifest v3 validation
  • 🛠️ Vite-powered builds
  • 🧹 No more manual reloading

Everything works out of the box.

🚀 Quick Start

Get started in one minute:

npx extn create my-extension

cd my-extension
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

This will:

  • start a development server
  • build your extension
  • auto-load it in Chrome
  • open DevTools
  • apply updates instantly with HMR

📁 Project Structure

After running extn create, you get:

my-extension/
├── src/
│   ├── popup/
│   │   ├── popup.html
│   │   ├── popup.js
│   │   └── styles.css
│   ├── background/
│   │   └── background.js
│   └── content/
│       └── content.js
├── public/
│   └── icons/
├── manifest.json
├── package.json
├── vite.config.js
└── tsconfig.json
Enter fullscreen mode Exit fullscreen mode

If you select React or Vue templates, those files are included automatically.

💡 Why I Built extn

While working on browser-based tools, I constantly found Chrome extension development to be:

  • slow (manual reloads)
  • fragmented
  • outdated
  • hard to iterate quickly

So I built extn to deliver:

  • a modern workflow
  • instant feedback with HMR
  • clean TypeScript setup
  • framework flexibility
  • MV3 done right

🗺️ Roadmap

Upcoming features:

  • Svelte template support
  • Firefox + Edge packaging
  • More example templates
  • Chrome Web Store publishing helper

🤝 Try It / Contribute

If you’re building Chrome (or Chromium) extensions and want a smooth development experience, check out the repo:

👉 https://github.com/razukc/extn

Feedback, issues, and PRs are welcome!

Top comments (0)