Learn JS by building basic Chrome extensions
A collection of tutorials, guides, and resources on how to learn JavaScript by building basic Chrome extensions. The fastest, best, and most applicable way of learning how to code for web.
Coding is a lot more enjoyable when you see the effects your projects can have on people's lives. Chrome extensions, unlike websites, mobile apps, or desktop apps, can be created and released within a matter of minutes. With simple, rigid architecture, extensions don't allow much room for error, which builds strong habits and internalizes good conventions. JavaScript, the main language used in Chrome Extensions, also happens to have the biggest developer community of any language out there.
I recommend following the first tutorial listed in the tutorials section below, and then, depending on how comfortable that felt, either move to an intermediate tutorial or continue with the next basic tutorial. Once you feel comfortable with developing Chrome extensions at an intermediate level, come up with a simple idea for an extension. My first extension replaced all B's on a page with the B emoji (https://github.com/botv/hey-beter). Don't try to build a utility, think of pranks and jokes that would be amusing to people on the internet. Not surprisingly, one of the biggest markets for Chrome extensions consists of memers and dumb teens.
A collection of glossaries for terms that will come up in tutorials, videos, and conversation when coding for web. If you ever come across an acronym or term you're not familiar with, check these glossaries.
- Basic web development terms: https://careerfoundry.com/en/blog/web-development/50-web-development-buzzwords-that-all-new-programmers-should-learn
- Javascript terms: https://flaviocopes.com/javascript-glossary
A collection of guides to building Chrome extensions. These tutorials make use of JavaScript, HTML, CSS, and in some cases, basic API calls. I recommend you do at least three of these tutorials before executing your own idea for an extension.
- Build a basic Chrome extension that changes the background of a page: https://developer.chrome.com/extensions/getstarted
- Build a basic Chrome extension that greets the user by name in a popup: https://medium.com/javascript-in-plain-english/https-medium-com-javascript-in-plain-english-how-to-build-a-simple-chrome-extension-in-vanilla-javascript-e52b2994aeeb
- Build an intermediate Chrome extension that opens the first link on the page in a new tab: https://thoughtbot.com/blog/how-to-make-a-chrome-extension
- Build an intermediate Chrome extension that displays a bunch of movie previews when a new tab is opened: https://www.freecodecamp.org/news/how-to-create-and-publish-a-chrome-extension-in-20-minutes-6dc8395d7153
- Debug a Chrome extension: https://developer.chrome.com/apps/tut_debugging
- Publish a Chrome extension: https://developer.chrome.com/webstore/publish
Sample projects to download and reference. Browse samples and download zipped project code here.