Build Your First Chrome Extension
A Complete Practical Guide — From Blank Folder to Chrome Web Store
A step-by-step, hands-on guide that takes you from "I've never built an extension" to "my extension is live in the Chrome Web Store." No filler, no theory — just code and shipping.
Companion GitHub repo with every code example
Download the full EPUB — freeOr read the first chapters in your browser →
Free download — no signup, no email. This e-book is free, and it stays free — we do not sell a paid edition of it.
Hands-On
Build a real extension from start to finish. Context menu, popup, keyboard shortcuts, options page — every feature is coded step by step.
Publication Ready
Includes a chapter on the Chrome Web Store submission process with permission justification templates and the pre-publish checklist.
Cross-Browser
Covers Firefox porting, MV3 service workers vs event pages, and the offscreen document workaround for clipboard access.
Open Source Code
Every code example is available on GitHub under MIT license. Fork, modify, and ship without attribution.
What You'll Learn
- Understanding Chrome Extension Architecture — MV3, service workers, permissions, lifecycle
- Your First Extension — Hello World — manifest.json, background.js, offscreen document
- The Popup — Your Extension's UI — HTML popup with user interaction
- Keyboard Shortcuts — Commands for power users
- Persisting User Settings — chrome.storage, custom cleanup rules
- The Options Page — Full-page configuration interface
- Icons and Branding — Creating your extension's identity
- Publishing to the Chrome Web Store — Developer account, listing, review process
- Testing and Debugging — Service worker, popup, and unit tests
- From Lite to Production — Firefox port, premium features, analytics
Plus: Complete manifest.json reference, permissions guide, and pre-publish checklist.
Frequently Asked Questions
Do I need to know JavaScript?
Yes, basic JavaScript is expected. You should be comfortable with functions, variables, and callbacks. Experience with HTML and CSS helps but isn't strictly required.
How long does it take to complete the guide?
About 2-3 hours to build the complete extension. The Chrome Web Store submission adds 1-3 business days for review.
Is this book up to date with Manifest V3?
Yes. Everything in this book uses Manifest V3, which is required for all new Chrome extensions since 2023.
Can I use this to build a paid extension?
Absolutely. Chapter 10 covers premium features and monetization options including license keys and Chrome Web Store purchases.
What if I get stuck?
The companion GitHub repo has the complete source code for every step. Each chapter's code is in a separate folder so you can jump ahead or backtrack.
Read it before you download
The opening of the book, straight from the EPUB you get below — not a summary written for this page. 2 chapters in full, then the rest is free to download.
Read the first 2 chapters online
Preface: Why This Book Exists
Every developer I know has had the same thought at some point: "I wish my browser could just do X." Maybe it's copying text without formatting, checking a page for accessibility issues, or automating a repetitive task. Chrome extensions are how you build that.
I wrote this book because when I built my first extension (Clean Copy — an HTML-to-Markdown converter that runs in your browser), I had to piece together information from a dozen sources. The official Chrome docs are thorough but scattered. Stack Overflow answers assume you already know the architecture. Blog posts go out of date when Google updates the platform.
This book is what I wish I'd had: a single, practical, step-by-step guide that takes you from "I've never built an extension" to "my extension is live in the Chrome Web Store."
What You Will Build
By the end of this book, you'll have built and published a working Chrome extension. Along the way, you'll create:
- A popup that interacts with the current page
- A context menu that copies formatted text
- A background service worker that handles events
- An options page that persists user settings
- A keyboard shortcut for power users
The final extension is Clean Copy Lite — a simplified version of the real Clean Copy extension. It converts selected HTML into clean Markdown, ready to paste into any document.
The icon sizes your manifest needs, generated from one SVG: favicons, PWA icons and the web app manifest, free and MIT-licensed.
Generate the iconsThe rest of the book is free — the download button below has every chapter and every appendix, in EPUB for any e-reader.
Chapter 10 explains license keys. Here is one that already runs.
Everything in this book is free and nothing is held back, including the chapter on premium features. If you would rather see how a paid Chrome extension behaves in practice than design one, Clean Copy is a real one from this publisher: the extension is free and does every conversion, and Clean Copy Pro adds batch conversion and your own cleanup rules, unlocked by a license key checked against a live license service — the same activate, validate and deactivate calls chapter 10 walks through. $19/year, or $39 once. Nothing here is required to finish the book.