The Ultimate 2023 Google Chrome Extension Development Course

Name: The Ultimate 2023 Google Chrome Extension Development Course
Rating: 4.0 (93 reviews)

4 projects of increasing complexity. The only Google and Firefox extension / plugin development course you'll need!

Created byDhruv Atreja

Last updated 8/2023

English

English [Auto],

What you'll learn

Learn all important concepts for chrome and firefox extensions.
All topics will be covered with the help of 4 projects and theory
We will work with the latest version of chrome (Manifest V3) and help you migrate older projects (Manifest V2) too
Understand how extensions work, their components and structure
Understand service workers
Chrome APIs
Reading, modifying and injecting scripts and components of web pages
Caching and storing data
Download data and items from websites
Events and listeners
Playing with DOM of webpages

Course content

5 sections • 25 lectures • 2h 26m total length

Introduction to Chrome and firefox extensions1:42
Explore the latest Chrome extension development, including manifest version two to version three changes and API updates, and discover earning potential for beginners with JavaScript and HTML.
Course Structure1:17
Master Chrome extension development from basics to advanced features, building four extensions for four levels. Learn user interface design, page modification, DOM data storage, APIs, and converting extensions to Firefox.
Required knowledge for google chrome extension development0:38
Discover how Chrome extension development welcomes beginners with a low barrier to entry and requires only basic JavaScript and HTML skills.
How to get the most out of this extension course0:29
Follow practical, hands-on steps to master Chrome extension development, even with limited documentation. Experiment with small code tweaks and practice locally to accelerate learning and succeed with latest extension rules.
Starter code template for Chrome Manifest v30:15
Download the starter code template for Chrome manifest v3 to create a Chrome extension without starting from scratch.
Let your imagination run wild!
Latest Developments2:08

Chrome Manifest V3 (and V2)1:50
Explore Chrome manifest v3, featuring service workers to replace background scripts, declarative request for network routing, and isolated worlds for stronger stability.
Understanding chrome extensions1:55
Learn how chrome extensions use a manifest file and HTML, CSS, and JavaScript files to add features, modify pages, and interact with users through content scripts.
Manifest.json file1:25
Discover how the manifest.json file defines a Chrome extension by listing its name, version, permissions, and resources, and by specifying the service worker and dom content scripts.
Service workers1:32
Explore service workers, a background web worker for Chrome extensions that intercept requests, access the cache, and handle push messages, with manifest v3 and background registration.
Content scripts1:37
Content scripts inject JavaScript into web pages, interact with the DOM, modify appearance, and extract information, declared in the manifest with matches to target sites.
Revisit your learnings
Chrome APIs2:40
Explore how Chrome APIs empower extensions to interact with the browser, modify web pages, manage tabs, storage, and network requests, with practical guidance on permissions and messaging.

Project Introduction1:19
Begin by creating a basic Chrome extension, manage extension types and active tabs, switch between tabs, and close tabs in the extensions page.
Configuring Manifest5:39
Create the manifest.json for a Chrome extension, specify name, version, manifest version, and a service worker; define permissions like tabs and add content scripts and popup behavior.
Unpacking and uploading3:06
Learn to load an unpacked Chrome extension, enable developer mode, and upload the folder for version 0.1. Prepare index.js for the content script and inspect the service worker for popup.
Pop-ups6:15
Amend the content script, refresh the extension, and display Hello World in a popup by adding popup HTML, CSS, and a linked script, with manifest updates.
Message passing8:23
Learn to use the Chrome tabs API to fetch and display open tabs, manage permissions, and implement message passing between popup, content scripts, and background scripts in Chrome extensions.
Chrome Tabs API14:45
Learn to manipulate Chrome Tabs API by iterating the response, creating tab elements, and activating tabs with an active class, including removal via double-click.

Project Introduction1:25
Develop a color picker Chrome extension with HTML, CSS, and JavaScript; display a pop-up color picker on any site and copy the selected color to the clipboard.
Creating skeleton12:55
Create a Chrome extension skeleton by configuring manifest.json for v3, setting icons and a service worker background, and building a popup with html and css for a color picker.
Cross-script communication with chrome.script API23:48
Explore cross-script communication with the chrome.script API, inject and execute scripts, fetch the active tab, and implement an eyedropper color picker that copies hex values to the clipboard.
Chrome Storage API7:17
Learn to use the chrome storage API in a service worker, add manifest permissions, store and retrieve data with chrome.storage.sync, implement options pages, and publish extensions.

Project Introduction and Setup17:25
Learn to build a Chrome extension that blocks unwanted sites with a focus mode toggle in a popup, using a manifest, JavaScript, and Chrome storage for persistence.
Chrome webNavigation API3:55
Learn how to use the chrome.webNavigation API to detect when users navigate to specific pages before they load, and redirect the tab by calling chrome.tabs.update with an alternate URL.
Snooze functionality22:21
Learn to implement snooze functionality in a Chrome extension by setting a snooze duration, using storage and date handling, and controlling site blocking with URL filters.

Requirements

Bare basics of JavaScript and HTML

Description

Hi guys, hope you’re doing well! I’m Dhruv and in this chrome extension development and firefox plugin development course, I’ll cover everything you’ll need to be ready to create or work upon the latest versions of chrome extensions and firefox plugins and the old. Most of the material you’ll find has been outdated due to google’s radical change from Chrome Manifest V2 to V3, including Chrome API, structure and functionality changes, but don't worry as I said I'll teach you everything you’ll need to be ready to create or work upon the latest versions of chrome extensions and the old. I have taught about this topic in various seminars and workshops. I’ll cover the topics in 4 levels of expertise and I promise by the end of it, you’ll have everything you need to start working on your own project on firefox plugins or chrome extensions.

One of the primary benefits of extension development is the low barrier to entry. Unlike other types of software development, which often require significant resources and expertise, extension development is relatively simple and can be done by anyone with a basic understanding of web technologies. This means that it is possible to get started as an extension developer with minimal upfront investment. If you know the basics of JavaScript and HTML, you’re good to go here.

Even though it is simple, chrome extension development is highly profitable and I personally have 3 extensions on the web store which make significant revenue. And a simple search on job portals will tell you how in-demand these job profiles are.

Who this course is for:

Anybody who wants to work upon extensions

The Ultimate 2023 Google Chrome Extension Development Course

What you'll learn

Explore related topics

Course content

Introduction6 lectures • 6min

Level 1: Theory and Bionic Reading Project6 lectures • 11min

Level 2: Tab Manager Project6 lectures • 39min

Level 3: Color-picker project4 lectures • 45min

Level 4: Study-helper website blocker3 lectures • 44min

Requirements

Description

Who this course is for: