Chrome Extension Getting Started
Welcome to the Chrome Extension Guide! This comprehensive resource will take you from zero to publishing your first Chrome extension in minutes.
Quick Start: Choose Your Path {#quick-start-choose-your-path}
I’m New to Chrome Extensions {#im-new-to-chrome-extensions}
Start here if you’ve never built a Chrome extension before:
- Pick a Starter Template. Choose a framework that matches your experience:
- Vanilla TypeScript Starter. Minimal, fast, no framework overhead
- React Starter. React 18 + TypeScript + Vite
- Vue Starter. Vue 3 + TypeScript + Vite
- Svelte Starter. Svelte 4 + TypeScript + Vite
- Follow a Tutorial. Build a complete extension while learning:
I Know the Basics. Show Me the Code {#i-know-the-basics-show-me-the-code}
Jump directly to the API reference and patterns:
- API Reference. Complete Chrome APIs documentation
- Extension Patterns. Proven patterns for messaging, storage, permissions
- Permissions Guide. Understanding Chrome permissions
I Need the @theluckystrike/webext-* Packages {#i-need-the-theluckystrikewebext-packages}
Our TypeScript packages make Chrome extension development type-safe and enjoyable:
| Package | What It Does | npm Install |
|---|---|---|
| webext-storage | Typed storage with schema validation | npm i @theluckystrike/webext-storage |
| webext-messaging | Promise-based message passing | npm i @theluckystrike/webext-messaging |
| webext-permissions | Runtime permission helpers | npm i @theluckystrike/webext-permissions |
| webext-tabs | Tab management utilities | npm i @theluckystrike/webext-tabs |
| webext-badge | Badge text and color | npm i @theluckystrike/webext-badge |
| webext-context-menu | Context menu builder | npm i @theluckystrike/webext-context-menu |
| webext-notifications | Toast notifications | npm i @theluckystrike/webext-notifications |
| webext-offscreen | Offscreen document API | npm i @theluckystrike/webext-offscreen |
Specialized Starters {#specialized-starters}
Need a specific extension type? We have dedicated starters:
| Extension Type | Starter Template |
|---|---|
| Popup only | chrome-extension-popup-starter |
| Side panel | chrome-extension-side-panel-starter |
| DevTools panel | chrome-extension-devtools-starter |
| Content script only | chrome-extension-content-script-starter |
| Full-stack | chrome-extension-full-stack-starter |
What You’ll Learn {#what-youll-learn}
Core Concepts {#core-concepts}
- Manifest V3. The latest Chrome extension manifest format
- Background Scripts. Service workers for long-running tasks
- Content Scripts. Injecting code into web pages
- Popup & Options. User interface for extensions
- Message Passing. Communication between extension parts
- Storage API. Persisting data locally or in the cloud (sync)
Best Practices {#best-practices}
- Type Safety. Using TypeScript with Chrome APIs
- Security. Handling user data responsibly
- Performance. Optimizing extension load times
- Publishing. Listing your extension on the Chrome Web Store
Next Steps {#next-steps}
-
Clone a Starter Template. Pick from our React, Vue, Svelte, or Vanilla TS options
- Install the Packages. Add type safety with our webext-* packages:
npm i @theluckystrike/webext-storage @theluckystrike/webext-messaging -
Follow a Tutorial. Build something real with our step-by-step guides
- Read the Patterns. Learn proven approaches in Extension Patterns
Resources {#resources}
Built by theluckystrike. Part of the zovo.one ecosystem -e —
Part of the Chrome Extension Guide by theluckystrike. Built at zovo.one.