FreeCodingCourses
Intermediate
JavaScript

Build it free

Build a Chrome Extension for Free

A working Chrome extension built with JavaScript that changes how a web page behaves.
About 110 hours2 stages, 2 free courses

The short version

A Chrome extension is a small program that changes how websites behave, and it is one of the most practical JavaScript projects you can build. You can learn everything you need for free in about 110 hours. Get solid with JavaScript on Scrimba, then master the DOM and async JavaScript with The Odin Project. You finish able to build an extension that reads a page, changes it, and does something genuinely useful for you every day.

What you will build

  • 01An extension with a popup UI and a toolbar icon
  • 02A content script that reads and changes the current page
  • 03Saved settings that persist between browser sessions
  • 04A 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.

StageCoursePlatformHoursWhat you gain
1. Learn JavaScriptLearn JavaScript for FreeScrimba30Extensions 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 JavaScriptFoundations PathThe Odin Project80The 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

Learn JavaScript for FreeFoundations Path

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