How to make a Chrome extension

Introductory pricing is $49 with a 14-day money-back guarantee!

❓Are you trying to make a Chrome extension? Are you having a hard time making a browser extension?

❓Annoyed by the poor examples online and how they are very basic or simply point you to a GitHub repository? Even worse, they're out of date due to "Manifest v3"!?

❓Worried that the best solution may be "find a Github starter and go from there?"

I've been coding for years, but learning about browser extension development was a pain because of recent changes, out-of-date documentation, and simple examples that don't cover what I wanted to build.

I'm sure you will experience the same thing if you google "how to create a Chrome extension" or "Chrome extension tutorial.".

I finally started to create Chrome extensions and listed them on the Chrome App Store, and I reviewed my code to understand what I'd learned.

The material so you can make a Chrome extension

That's what we'll review together! We will cover the following:

✅ What is a Chrome browser extension, and how is it structured?

✅ What can I do with an extension? What's in a manifest file?

✅ What is my build setup so that I can quickly run, test, and build the extension?

✅ How do I make that button that appears in my browser? What is a popup?

✅ How do I make a page that will appear locally? What can appear there? How do I make settings?

✅ What is a content script, and how does it interact with my local web page?

✅ What is this "background.js" thing, and how should I structure my code to work with it?

✅ How do I send information (messages) so the background.js file does something?

✅ What is the difference between local storage and sync storage? How can I take those settings and anything else I want to keep and have them persist between browser sessions?

✅ How can my extension interact with the page a user visits? How do I inject HTML, CSS, and Javascript through content scripts?

✅ How do I publish to the Chrome App Store?

The format so you will actually build a Chrome extension

I learned this information could be overwhelming and that a step-by-step process helps you absorb and implement the information before continuing to learn about the next thing.

So, you'll receive a PDF every three business days covering each item above.

The prerequisites to ensure you can write a Chrome extension

This is not for beginners or those who are just learning to code. You should know the following before purchasing:

👍 HTML, CSS, and Javascript (you don't need to be fully up-to-date, but you should know what things look like and how to write code). You will not like this material if you are confused when looking at the documentation on MDN Web Docs.

👍 VSCode or your own favorite IDE. I'll show you what things look like in VSCode. You will not like this material if you cannot follow it or know what it is.

👍 Enough about the command line that you can install npm if you haven't already.

Can't I google this stuff?

You can, but it's out-of-date.

Besides, most of the information helps you build simple projects like a "to-do" app. You probably have something more challenging in mind, don't you? And when you do, suddenly you're asking more serious questions like:

• What permissions do you need?
• If I can't access libraries, how will my background.js file actually function?
• What happens if my content script breaks?

The one book I found on Amazon that is up-to-date still doesn't show you how to do anything complex! We'll cover the typical foundation and user interaction points so you can build and deploy something real on the Chrome App Store.

Frequently Asked Questions

Q: Do I need to understand React? Most of the starters I see in Github assume I know it.

A: We do not discuss React. We'll stick with a lot of event listeners.

Q: What if I want to write for another browser, like Microsoft Edge, Apple Safari, or Mozilla Firefox?

A: We do not go into the specifics, but once you understand how to make a Chrome extension, building an extension for another browser will be easier as you refer to MDN Web Docs.

Q: Is this really a 14-day money-back guarantee?

A: Yes! Of course, we will ask you how we can improve, but we will refund you through Gumroad within one business day.