What you will build
- An extension with a popup UI and a toolbar icon
- A content script that reads and changes the current page
- Saved settings that persist between browser sessions
- A packaged extension you can load in Chrome and even publish
The path, stage by stage
Work through these free courses in order. Each stage links to the full course details, its platform, and what you walk away able to do.
| Stage | Course | Platform | Hours | What you gain |
|---|---|---|---|---|
| 1. Learn JavaScript | Learn JavaScript for Free | Scrimba | 30 | Extensions are JavaScript, so this is the base. Scrimba's interactive lessons get you writing functions, handling events, and working with objects, all of which an extension leans on constantly. |
| 2. Master the DOM and modern JavaScript | Foundations Path | The Odin Project | 80 | The Odin Project's Foundations path drills DOM manipulation, events, and asynchronous JavaScript. Since an extension mostly reads and changes the page's DOM, this is the exact skill set that makes extension code click. |
Why these courses, not the alternatives
Building an extension is mostly DOM work, so we aim the whole path at that. Scrimba comes first because active, in-browser practice builds JavaScript fluency faster than watching. Then The Odin Project's Foundations is our pick over a quick extension tutorial because it drills DOM manipulation, events, and async JavaScript deeply, and those are the exact skills an extension uses on every page. We skip a framework here on purpose: a first extension is plain JavaScript plus the browser APIs, and learning those directly makes the extension docs readable instead of mysterious.
Before you start
Basic HTML and CSS familiarity helps for the popup UI. No prior JavaScript needed; the path covers it.
What you walk away with
A working Chrome extension built with JavaScript that changes how a web page behaves.
Start with the first course
Apply it with a code-along tutorial
Frequently asked questions
What language are Chrome extensions written in?
JavaScript, plus HTML and CSS for any popup UI. That is the entire reason this path is JavaScript-focused.
Do I need to publish to the Chrome Web Store to use my extension?
No. You can load an unpacked extension in developer mode and use it yourself for free. Publishing is optional and only needed to share it widely.
How much JavaScript do I need for an extension?
Solid fundamentals plus comfort with the DOM and async code. That is precisely what the two stages of this path cover, in that order.
Is building a Chrome extension hard?
The browser APIs are approachable once your JavaScript and DOM skills are solid, which is why this path front-loads those rather than jumping straight to extension code.
Keep going on FreeCodingCourses
Where this build leads
Related builds