MV3 Ready · ExtPay · Dark Theme

Ship Your Chrome Extension in Hours, Not Weeks

A production-ready starter kit with payments, settings, dark UI, and content script helpers. Clone, customize, deploy.

Get the Kit — $49
One-time purchase · MIT license · Lifetime updates

Everything You Need

Skip the boilerplate. Start building features on day one.

💳

ExtPay Payments

Freemium model ready. Set your product ID and start accepting payments — one-time or subscription.

🌙

Dark Theme UI

Professional popup with 3-tab navigation, toggle switches, and smooth CSS transitions. 350×500px.

⚙️

Settings System

chrome.storage.local with typed defaults, export/import as JSON, reset, and background sync.

💉

Content Script Helpers

waitForElement, observeMutations, safe DOM injection. No more wrestling with MutationObserver.

🔔

Background Worker

Service worker with message routing, alarm scheduling, and ExtPay lifecycle management.

📊

Analytics Ready

trackEvent() hooks throughout popup, background, and content. Plug in Mixpanel or Plausible in minutes.

🎨

Professional Icons

Clean gradient SVG with generated PNG at 16, 48, and 128px. Replace with your own design.

📦

Zero Dependencies

Vanilla JS, no build step. Load unpacked and start coding. ExtPay is the only included library.

Clean, Readable Code

Well-commented, modular, and easy to extend.

// ExtPay integration — just set your product ID
const EXTPAY_ID = 'YOUR_EXTPAY_ID';

async function initExtPay() {
  const extPay = ExtPay(EXTPAY_ID);
  const user = await extPay.getUser();

  if (user.paid) {
    $('#premium-active').style.display = 'flex';
    chrome.storage.local.set({ isPremium: true });
  }
}
// Message routing with type-safe handlers
chrome.runtime.onMessage.addListener((msg, sender, respond) => {
  switch (msg.type) {
    case 'settingsUpdated':
      handleSettingsUpdate(msg.settings);
      respond({ ok: true });
      break;
    case 'getSettings':
      chrome.storage.local.get('settings')
        .then(d => respond(d));
      return true; // async
  }
});
// DOM helpers that just work
function waitForElement(selector, timeout = 10000) {
  return new Promise(resolve => {
    const el = document.querySelector(selector);
    if (el) return resolve(el);

    const obs = new MutationObserver(() => {
      const found = document.querySelector(selector);
      if (found) { obs.disconnect(); resolve(found); }
    });
    obs.observe(document.body, { childList: true, subtree: true });
  });
}

What's Included

One download, everything ready.

✓ manifest.json — MV3 with clean permissions
✓ popup.html — Dark theme, responsive, 3-tab UI
✓ popup.js — ExtPay, settings CRUD, export/import
✓ background.js — Service worker, message routing, alarms
✓ content.js — DOM helpers, safe injection, message passing
✓ styles.css — CSS variables, dark theme, responsive
✓ ExtPay.js — Payment library, ready to configure
✓ Icons — SVG source + generated PNG (16/48/128)
✓ Sales landing page — This page, deploy with Wrangler
✓ MIT License — Commercial use, no attribution

Simple Pricing

Pay once, use forever.

Starter Kit
$49
One-time · Lifetime access
✓ Full source code (MIT license)
✓ ExtPay payment integration
✓ Dark theme popup UI
✓ Settings with export/import
✓ Content script helpers
✓ Background service worker
✓ Sales landing page source
✓ Lifetime updates
Buy Now — $49
Secure checkout via Stripe. Instant download.

FAQ

Just a code editor and Chrome. No build tools, no Node.js required. Clone the repo, load it as an unpacked extension, and start customizing.

The kit uses ExtPay, a payment service built for Chrome extensions. Create a free account at extpay.net, get your product ID, paste it into the config, and you're ready to accept one-time or recurring payments.

The code uses standard WebExtension APIs that work in both Chrome and Firefox. You'll need to adjust the manifest format for Firefox (browser_specific_settings) and test separately.

No. The kit uses vanilla JavaScript with no transpilation or bundling. Load the folder directly in Chrome. If you want to add a build step later, the modular structure makes it easy to integrate webpack or Vite.

MIT License. Use it for personal projects, client work, or commercial extensions. No attribution required. Modify and redistribute freely.

Yes — lifetime access to all updates. As Chrome's extension APIs evolve, the kit will be updated to stay compatible and follow best practices.