🧹 ExtenKit

A lightweight, build-free JavaScript framework for creating cross-browser extensions — with a single command.

🚀 What is ExtenKit?

ExtenKit is a minimal, modular framework and CLI for building browser extensions using vanilla JavaScript + HTML — no bundlers, no React, no Webpack.

It runs instantly in your browser’s extension environment and generates all files for you.

It works seamlessly with:

• ✅ Chrome, Edge, Brave (Manifest V3)
• 🦊 Firefox (Manifest V2 fallback)
• 🌐 Any browser supporting the WebExtensions API

✨ Features

• 🔧 One-command scaffolding: npx create-extenkit my-extension
• ⚡ Zero build step — just edit HTML/JS directly
• 🧠 Reactive component system (ExtenKit Core)
• 💮 Persistent store with Chrome Storage & local fallback
• 🧩 Flag-based generation for options pages, background scripts, and custom templates
• 🦊 Firefox Manifest V2 support out of the box
• 🖾️ Includes a default icon and fully working popup

🧮 Installation

1️⃣ Create your extension

npx create-extenkit my-extension

2️⃣ Load into Chrome

1. Open chrome://extensions/
2. Enable Developer mode
3. Click Load unpacked
4. Select your new folder
5. Done 🎉

3️⃣ Load into Firefox

npx create-extenkit my-extension --manifest-v2

Then open about:debugging#/runtime/this-firefox, click Load Temporary Add-on, and choose the generated folder.

⚙️ CLI Flags

| Flag | Description | | ------------------- | ---------------------------------------------------------- | | --with-options | Adds an options.html page automatically | | --with-background | Adds a background service worker | | --manifest-v2 | Generates a Firefox-compatible manifest | | --blank | Generates a minimal scaffold (no popup UI) | | --template=<name> | Uses a custom template from /templates/templates/<name>/ |

🧩 Example Usage

# Basic popup extension (MV3)
npx create-extenkit my-extension

# Firefox-friendly version
npx create-extenkit my-extension --manifest-v2

# With background + options
npx create-extenkit my-extension --with-background --with-options

# Minimal blank template
npx create-extenkit minimal --blank

📁 Folder Structure

my-extension/
├── manifest.json
├── popup.html
├── popup.js
├── icon.ico
├── assets/
│   ├── icon.png
│   └── styles.css
├── modules/
│   ├── home/
│   │   └── index.js
│   ├── about/
│   │   └── index.js
│   ├── options/
│   │   └── ...
│   └── background/
│       └── ...
├── extenkit/
│   ├── component.js
│   ├── mount.js
│   ├── store.js
│   └── index.js
└── package.json

🧠 ExtenKit Core

Each generated project contains an /extenkit folder — the lightweight reactive runtime that powers your UI.

| File | Purpose | | ---------------- | ---------------------------------------------------- | | component.js | Define reactive components with templates & bindings | | mount.js | Mount and unmount components safely | | store.js | Persistent, reactive global state | | index.js | Entry point re-exporting all core helpers |

💡 Example Component

import { createComponent, mount } from "./extenkit/index.js";

const Counter = createComponent({
  name: "Counter",
  state: { count: 0 },
  template: (s) => `
    <div class="counter">
      <h3>Count: <span data-bind="count"></span></h3>
      <button data-click="inc">+</button>
    </div>
  `,
  methods: {
    inc() {
      this.state.count++;
    },
  },
});

mount(Counter, document.body);

🦯 Roadmap

• [ ] extenkit-router — hash-based navigation
• [ ] extenkit-ui — built-in UI components
• [ ] Advanced templates (modern, dashboard, chat)
• [ ] Plugin support for MV3 scripting APIs
• [ ] Publish @extenkit/core as a standalone npm module

🧑‍💻 Development Setup (for contributors)

# 1. Clone repo
git clone https://github.com/exagonsoft/extenkit.git
cd extenkit/cli

# 2. Link locally
npm link

# 3. Test
npx create-extenkit demo-extension

# 4. Publish
npm login
npm publish --access public

📜 License

MIT © 2025 — Built with ❤️ by the ExtenKit Team (ExagonSoft)

🦯 Why ExtenKit?

Because extension development should be instant:

No bundlers. No frameworks. No waiting — just HTML, JS, and your br