Hello hello and welcome to this web extension tutorial
My name is Johnny Fekete and I’m here to show you just how easy it is to create your first Chrome extension
We’ll start from scratch and move step by step to explore the various concepts of Chrome extensions until we build our very own user-friendly extension that is a note-taking app
What we’re building
We’re building TabNotes, a note-taking app for your browser
You can save notes for each website you visit, and the notes stay with that specific tab
Here’s what it does:
- Write notes in a popup window
- Saves your notes automatically
- Shows different notes for each website
- Works across Chrome and Firefox
- Changes the extension icon when a page has notes
What you’ll learn
We’ll learn about concepts like working with the popup, saving and loading data from storage, injecting custom scripts to the underlying websites, working with tab changes, dynamically changing the popup’s icon, or creating totally custom pages for our extension
All that while keeping it user-friendly, setting up instructions for the first time the user installs the extension
Prerequisites
This course expects you to be familiar with JavaScript and CSS
Although I’ll write most of my code in TypeScript, you don’t need to have deep knowledge in that. I’ll explain everything in detail along the way
If you have any questions, just leave a comment and I’ll make sure to answer them
Try it out
The final extension is available in the Chrome Web Store and in the Firefox Add-ons web page. I added some links below so you can download them to see what we’re going to build
You can also download the source files at webextensiontutorial.com where you can read more about every lesson
Course structure
We start from scratch, no templates, no shortcuts
Each lesson builds on the previous one
By the end, you’ll have a working extension that people can install and use
But enough talking, let’s build our web extension, shall we