The complete resource for building production-ready Chrome extensions with TypeScript. Step-by-step tutorials, API references, design patterns, and the @theluckystrike/webext-* toolkit.

• 📚 Comprehensive Documentation — From getting started to advanced patterns, covers every aspect of Chrome extension development
• 🛠️ Type-Safe Packages — @theluckystrike/webext-* toolkit for typed storage, messaging, and permissions
• 🚀 Starter Templates — Pre-configured templates for React, Vue, Svelte, and Vanilla TypeScript
• 📖 50+ Tutorials — Hands-on guides to build real-world extensions
• 🔐 Best Practices — Security, performance, and production-ready patterns

# Install the type-safe packages
npm install @theluckystrike/webext-storage @theluckystrike/webext-messaging @theluckystrike/webext-permissions

// Type-safe storage with schema validation
import { defineSchema, createStorage } from "@theluckystrike/webext-storage";

const schema = defineSchema({
  theme: "dark" as "dark" | "light",
  count: 0,
});

const storage = createStorage({ schema, area: "local" });
await storage.set("theme", "light");

Choose a Starter Template:

• React Starter
• Vue Starter
• Svelte Starter
• Vanilla TS Starter

• Getting Started

• Guides Overview
  • Extension Architecture
  • Service Worker Lifecycle
  • Background Patterns
  • Content Script Patterns
  • Tab Management
  • Window Management
  • Bookmark API
  • Context Menus
  • Download Management
  • Alarms Scheduling
  • Notifications
  • Popup Patterns
  • Options Page
  • DevTools Extensions
  • Manifest Reference
  • Security Best Practices
  • Performance Optimization
  • Memory Management
  • Debugging
  • Testing
  • Accessibility
  • Internationalization
  • Cross-Browser Development
  • Extension Updates
  • Chrome Web Store API

• API Reference
  • Tabs API
  • Windows API
  • Bookmarks API
  • History API
  • Downloads API
  • Alarms API
  • Notifications API
  • Context Menus API
  • Storage API Deep Dive
  • Runtime API

• Design Patterns
  • Authentication Patterns
  • State Management
  • Message Passing
  • Content Script Communication
  • Storage Patterns
  • Performance Profiling

• Permissions Guide
  • activeTab
  • alarms
  • bookmarks
  • contextMenus
  • cookies
  • debugger
  • declarativeNetRequest
  • downloads
  • history
  • identity
  • notifications
  • proxy
  • scripting
  • storage
  • tabs
  • tts
  • webRequest

• Manifest V3 Guide
  • Service Workers
  • Promise-Based APIs
  • Offscreen Documents
  • Side Panel
  • Migration Checklist

• Tutorials
  • Storage Quickstart
  • Messaging Quickstart
  • Permissions Quickstart
  • Build a Bookmark Manager
  • Build a Dark Mode Toggle
  • Build a Color Picker
  • Build an AI Writing Assistant

• Publishing Guide
  • Publishing Guide
  • Listing Optimization
  • Beta Testing
  • Common Rejections

• Package Catalog
  • @theluckystrike/webext-storage
  • @theluckystrike/webext-messaging
  • @theluckystrike/webext-permissions

Typed Chrome storage wrapper with schema validation.

import { defineSchema, createStorage } from "@theluckystrike/webext-storage";

const schema = defineSchema({
  theme: "dark" as "dark" | "light",
  count: 0,
  enabled: true,
});

const storage = createStorage({ schema, area: "local" });
await storage.set("theme", "light");
const theme = await storage.get("theme"); // typed as "dark" | "light"

Promise-based typed message passing for Chrome extensions.

import { createMessenger } from "@theluckystrike/webext-messaging";

type Messages = {
  getUser: { request: { id: number }; response: { name: string } };
  ping: { request: void; response: "pong" };
};

const msg = createMessenger<Messages>();
const user = await msg.send("getUser", { id: 1 });

Runtime permission helpers with human-readable descriptions.

import { checkPermission, requestPermission } from "@theluckystrike/webext-permissions";

const result = await checkPermission("tabs");
console.log(result.description); // "Read information about open tabs"

if (!result.granted) {
  const req = await requestPermission("tabs");
  if (req.granted) console.log("Permission granted!");
}

Browse the complete Package Catalog — every @theluckystrike package organized by category: Storage, Tabs & Windows, UI Components, Messaging, Security, Browser APIs, System APIs, and Utilities.

See examples/ for complete working examples using multiple packages together:

• Tab Manager with Storage — webext-storage + webext-messaging + webext-permissions
• Page Analyzer — webext-storage + webext-messaging + context menus
• Clipboard Manager — webext-storage + webext-messaging + offscreen API

Looking for a starting point? The Chrome Extension Toolkit features 10 fully configured starter repositories:

• React Starter
• Svelte Starter
• Vue Starter
• Vanilla TS Starter
• Content Script Starter
• Popup Starter
• DevTools Starter
• Side Panel Starter
• Full-Stack Starter
• Minimal MV3 Starter

npm install @theluckystrike/webext-storage @theluckystrike/webext-messaging @theluckystrike/webext-permissions

• Tabs API
• Windows API
• Bookmarks API
• History API
• Downloads API
• Alarms API
• Notifications API
• Context Menus API
• Storage API Deep Dive
• Runtime API

• Extension Architecture
• Service Worker Lifecycle
• Background Service Worker Patterns
• Content Script Patterns
• Content Script Isolation
• Tab Management Patterns
• Window Management
• Bookmark API Guide
• Context Menus
• Download Management
• Background Scheduling with Alarms
• Rich Notifications
• Popup Patterns
• Building an Options Page
• Building DevTools Extensions
• manifest.json Reference
• Security Best Practices
• Performance Optimization
• Memory Management
• Debugging Extensions
• Testing Extensions
• Accessibility
• Internationalization (i18n)
• Cross-Browser Development
• Handling Extension Updates
• Chrome Web Store Publish API

Ready to make money from your Chrome extension? Check out the Extension Monetization Playbook — covering freemium, subscriptions, Stripe integration, pricing strategies, and more.

• Market Research

• activeTab
• alarms
• bookmarks
• contextMenus
• cookies
• debugger
• declarativeNetRequest
• downloads
• history
• identity
• notifications
• proxy
• scripting
• storage
• tabs
• tts
• webRequest

• Storage Quickstart
• Messaging Quickstart
• Permissions Quickstart

• Chrome 116+ (Manifest V3)
• TypeScript 5.0+

MIT

Contributions are welcome! Please read our Contributing Guide for details on how to get started.

Built at zovo.one by theluckystrike