Google Chrome Extension Development For Beginners [2021]

Name: Google Chrome Extension Development For Beginners [2021]
Rating: 4.2 (79 reviews)

Everything you need to know about google chrome extension development.

Created byJatin Lalwani

Last updated 12/2020

English

English [Auto],

What you'll learn

Fundamentals of Chrome extension development
How to add User Interface to the Chrome extension
How to make Scripts communicate with one another
How to store data
How to use chrome APIs
How to use chrome extension official documentation
Publishing your Chrome extension to Chrome Web Store
MORE COMING SOON!

Course content

7 sections • 44 lectures • 1h 59m total length

Introduction0:46
This lecture is an introduction to the course.
Useful Links0:03
How to get the most out of this course?1:37
Setup0:43
In this lecture, we will see what tools you would need to create chrome extension. Firstly you would need a chrome browser where you can load and run your chrome extension and then you would need a text editor to write the code for chrome extension development.
What is a Chrome Extension?1:39
This lecture describes chrome extension and gives some chrome extension examples.
Let's Create Our First Google Chrome Extension4:53
In this lecture, we will create our very first google chrome extension. This chrome extension won't have any functionality but still the minimum possible code you can write to create a chrome extension.
Introduction Quiz
UPDATES0:51
I will keep updating this Chrome extension development course and invite your feedback through reviews, so I can improve lessons, address suggestions, and cover topics you want.

Popup Script8:12
In this lecture, we will learn what is a popup script and how to write one for your chrome extension
Background Scripts2:07
Background Scripts is one of the very important parts of the chrome extension. In this lecture, we will see what is a background script.
Chrome Extension 1 - Background Script2:21
In this lecture, we will create a background script for our chrome extension
Chrome Extension 1 - Manifest File3:31
In this lecture, we will create a Manifest file for our chrome extension
Chrome Extension 1 - Demo And Summary3:18
In this lecture, we will look at the demo of the chrome extension that we created.
Match Patterns3:51
Match Patterns are an important part of chrome extension development. In this lecture, we will understand what are Match Patterns.
Content Scripts1:42
Discover how content scripts run in web pages to access and manipulate content, contrast with background scripts, and explore the limited APIs available for a simple extension.
Chrome Extension 2 - Content Script1:38
Chrome Extension 2 - Manifest File2:20
Chrome Extension 2 - Demo And Summary3:28
Create the manifest with match patterns and a content script. Test the extension by injecting content into the page, reloading after install, and verifying the H1 turns green with devtools.
Quiz On Scripts

What is Message Passing?3:33
Learn how message passing coordinates popup, content, and background scripts in Chrome extensions to perform actions like removing images and bookmarking pages.
Types Of Message Passing1:51
How To Pass Messages Across Scripts?3:26
Learn how to pass messages across chrome extension scripts using the messaging approach, send one-time requests with any data type, and handle responses via optional callbacks.
Chrome Extension 1 - Passing Message From Popup Script to Content Script1:11
Pass a message from the extension popup to a content script to change the web page text color when a popup button is clicked.
Chrome Extension 1 - Manifest File2:35
Chrome Extension 1 - Popup HTML0:49
Chrome Extension 1 - Popup Script4:41
Build a popup script that listens for a click, retrieves the active tab via the Chrome Tabs API, and sends a message to the content script to change text color.
Chrome Extension 1 - Content Script2:56
Chrome Extension 1 - Demo And Summary2:53
Demonstrates building a chrome extension by wiring a popup button to send a message to a content script, which changes the page's h1 color to green after reload.
Permissions1:33
Declare the Chrome APIs your extension uses in the manifest permissions field to ensure access and limit damage if compromised, keeping match patterns for later.
Why didn't we declare APIs in our previous Chrome Extensions?2:14
Learn how Chrome extension APIs work with or without manifest declarations, including runtime APIs, and when to declare the tabs permission for url and title properties.
Chrome Extension 2 - Passing Message From Content Script To Background Script1:19
Build a Chrome extension that bookmarks a page when it contains an H1 tag, using content scripts to detect the tag and the background script to save the bookmark.
Chrome Extension 2 - Manifest File2:44
Chrome Extension 2 - Content Script3:12
Chrome Extension 2 - Background Script7:42
Create a background script that listens for chrome.runtime.onMessage and, when bookmark is requested, uses chrome.tabs.query to fetch the active tab's url and title, then bookmarks.create.
Chrome Extension 2 - Demo And Summary3:12
Build a Chrome extension that injects a content script to detect h1 tags and bookmark pages. Learn the manifest.json setup, mandatory fields, bookmarks permissions, and content-background script messaging.
Quiz On Message Passing

Storage Introduction2:16
Chrome Extension 1 - Popup1:59
Create a chrome extension with a background script that counts new tab creations since installation using the storage api, and displays the count in a popup.
Chrome Extension 1 - Background Script4:20
Chrome Extension 1 - Popup Script4:48
Create a popup script that loads on window onload event, retrieves a count from chrome.storage.local, builds a message, and injects it into the popup page, handling undefined as zero.
Chrome Extension 1 - Manifest File3:13
Configure a chrome extension manifest file, declare storage and tabs permissions, set up a browser action with default popup, and decide when tabs permissions are needed based on API usage.
Chrome Extension 1 - Demo And Summary2:36
Demonstrates building a Chrome extension by wiring a popup, background and storage scripts, handling tab events, and using manifest.json and storage API.
Quiz On Storage

Requirements

You do not need any prior knowledge about Google Chrome Extension development
Basic knowledge of HTML, CSS and JavaScript

Description

In this course you will learn the fundamentals of google chrome extension development.

My aim is not to create a shortest possible crash course on google chrome extension development, but to make you comfortable with the process of chrome extension development.

In this course, you will find me visiting the official google chrome extension documentation page frequently and that is because I want to make you comfortable with the documentation so that in future if you get stuck creating your extension, you can immediately refer the documentation for help.

I hope you will find this course helpful.

Wishing you all the luck!

Who this course is for:

Google Chrome Extension Developers
Web Developers
JavaScript Developers
Software Developers

Google Chrome Extension Development For Beginners [2021]

What you'll learn

Explore related topics

Course content

Introduction7 lectures • 11min

User Interface3 lectures • 10min

Scripts10 lectures • 32min

Message Passing16 lectures • 46min

Storage6 lectures • 19min

Publish Your Chrome Extension!1 lecture • 1min

MORE LECTURES COMING SOON!!1 lecture • 1min

Requirements

Description

Who this course is for: