Web Development


Chrome & Firefox Extensions Development: Zero to Hero [2021]

Learn everything about web Extensions Development and make an ad-block extension from scratch (+10 applications).

3.63 (4 reviews)


3.5 hours


Dec 2020

Last Update
Regular Price

Unlimited access to all SkillShare courses

What you will learn

Basics and Main Components of Chrome and Firefox Extensions.

How to control everything in your web browser (Requests, Cookies, History, Bookmarks).

Modifying and Customizing Web Sites (Changing Style, Adding/Removing Elements ...etc).

How to make your extension interactive (With toolbar Icon, Popup and options page).

How to Pass Messages between the different parts of your web extension.

Some advanced techniques only experts know that will make the process of building advanced extensions much easier.

How to make a simple ad-block extension that is ready to be published on the web store.

How to Pack and distribute your extension by Yourself (With friends, team mates..etc).

How To Publish Your Extension on the web-store for everyone.

And much more that you can discover yourself.


Are you trying to learn how to develop an extension for either Google Chrome or Firefox? What about learning how to develop an extension for both web browsers with almost the SAME effort and time. can't believe it? the difference between both web browsers is very little. you will see it yourself across the course.

The purpose of this course is to teach you everything in a very simplified way from scratch even if you aren't experienced in coding, it's not a quick course but it has everything you need.

You'll even learn how to read and use the official documents and API reference in case you even want to learn more after this course.

This course isn't stuffed with useless videos just to make it longer, instead, every video is actually focused right on the point but, I've taken my time to explain and apply everything to make the process easier and more comfortable. from the beginning to the end you'll even find optional coding videos in case you wanna follow the coding process line by line.

Join me now on this journey and let's make some awesome extensions.

Things you will get in this course.

You will learn everything about extensions' development step by step in a very simplified way that suits the beginner level (All work files are attached and +10 extensions for each web browser).

we will start with the definition of extensions,

then we will make our first extension to get familiar with the process

after that, we will understand what we have done and get to know the main components or files of our extension and their content

then we will start our coding process using HTML and javascript

if you are not familiar with HTML and javascript you will find an optional section in which you can get a general idea about them and how to learn them

then we learn how to control our web browser using browser API we will learn and demonstrate the most important browser APIs then we will how to read and use the browser API reference so, you would become able to use all available APIs by yourself when you need them

after that, we will learn how to control websites, changing their style, and manipulate their content such as adding removing elements

finally, we will learn some tips and tricks or advanced techniques that I've learned over years and will make the process of making complex extensions much easier

after that, we will use everything we have learned to make a real ad-block extension that is ready to be published right away on the web-store

then eventually we will of course learn how to distribute our extension either manually for our friends and teammates or on the web-store for everyone

and all this isn't just for one browser but two of the most widely used web browsers nowadays Google chrome and firefox.


Chrome & Firefox Extensions Development: Zero to Hero [2021]
Chrome & Firefox Extensions Development: Zero to Hero [2021]
Chrome & Firefox Extensions Development: Zero to Hero [2021]
Chrome & Firefox Extensions Development: Zero to Hero [2021]




Setting up your environment

Coding Software

Cofiguring Web Browsers

Your First Extension


Making your first Extension

Loading and debugging Firefox Extension

Loading and debugging Chrome Extension

(Optional) HTML and Javascipt Overview




Main Components of Extensions

Main Components of Extensions

3- Manifest File Part 1

Manifest File Part 2

Content Sctipts

Background Scripts

What is the best file to use in these situations?

User Interaction


Changing the Identity of our extension

Adding Icon to toolbar

Attaching popup to the toolbar icon

Options Page

Browser API


Console Logging

Storage Basics

Storage with Options Page


Tabs and script injection


Web Request

Stream filter (Firefox)

Other APIs

Manipulating content of Websites

Using Stylesheets

Using Javascript

Message Passing

From Content Script to Background Script

From Background Script to Content Script

Advanced Techniques

Using External Libraries

Data tubes

Stream filter alternative in chrome

Making a Simple Adblock Extension

Building Manifest file (Overview)

Building Manifest file (Optional Coding Process)

Making the Popup (Overview)

Making the Popup (Optional Coding Process)

Options page (Overview)

Options page (Optional Coding Process)

Background script(Overview)

Background script(Optional Coding Process)

Publishing your extensions


Final Check

Publishing your extension Manually

Publishing the Firefox extensions on the Web Store

Publishing the Chrome extension on the Web Store

Last Word

Last Word


Noordeen30 May 2021

There is not really an explanation of anything. The code is already there and the instructor basically just reads the code without explaining what anything actually does.

Rebecca13 January 2021

The course is fine. Captions help to a degree, but at least for me as a speaker of an American variant of English, I found the course instructor's accent difficult to follow. The early examples also didn't contribute much, as the work was done for you in downloaded files (rather than being something truly hands on that you build as part of learning how to do basic set up).

Tho11 January 2021

Great and very informative course .. I love how you are going directly to the point and how you about delivering the information .. I was looking for a course to learn google chrome exrenstions development but most of the courses I've found out there are not actually focusing on extensions development nstead they are barely scratching the surface and focusing mainly on html and js which is not what I came here for.

Fathy25 December 2020

Very good for beginners, I like how you are simplifying everything for those with no previous experience in coding. But, I wish if the coding process easier to follow, but over all it's a great course.

Related Courses

Django (python) for beginners: web development in simple steps - HTML, CSS, javascript, python
Django (python) for beginners: web development in simple steps - HTML, CSS, javascript, py
Professional Python Web Development Using Flask
Professional Python Web Development Using Flask
HTML & CSS Flexbox Web Development Guide - Create a Web Gallery with Responsive Web Design
HTML & CSS Flexbox Web Development Guide - Create a Web Gallery with Responsive Web Design


Udemy ID


Course created date


Course Indexed date
Course Submitted by