Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Chrome Extensions Masterclass: Learn with Great Examples
Rating: 4.3 out of 5(46 ratings)
1,380 students

Chrome Extensions Masterclass: Learn with Great Examples

Learn everything about Chrome Extensions, no previous knowledge required. Create awesome extensions and publish them.
Created byKrisztián Sala
Last updated 4/2020
English
English [Auto],

What you'll learn

  • Learning what Chrome Extensions are
  • Understanding how Chrome Extensions work, their structure
  • Use Chrome API to add complex functionality
  • Assign Hotkeys to start your Extensions or add Custom Functionality
  • Create User Interfaces in the form of Popups and Option pages for you Extensions
  • Use Content Scripts to interact and modify the DOM
  • Pass Messages between different parts of your Extension for Communication
  • Use Connections for long-lived Messaging
  • Creating advanced Chrome Extensions and publish them to the Chrome Webstore
  • Overwrite the New Tab page of the Chrome browser to create a Personalized Tab

Course content

5 sections • 31 lectures • 2h 24m total length

  • Introduction to Chrome Extensions1:54

    Define what a Chrome extension is and how it customizes the browsing experience. Build extensions with HTML, JavaScript, CSS, and a manifest, and publish them to the Chrome Web Store.

  • Course Structure1:56

    Explore the course structure for Chrome extensions, from the manifest and background scripts to content scripts, permissions, and UI, with code-along examples and assignments.

  • Manifest6:30

    Create manifest.json with manifest version 2, name Hello World, and version 0.0.1, then load the unpacked extension from chrome://extensions and add icons of 16x16, 48x48, and 128x128.

  • Background Scripts6:00

    Learn how background scripts monitor browser events—like page navigation, tab changes, and bookmark creation—via listeners in a manifest-registered background script, with permissions and callbacks.

  • Permissions3:46

    Learn how Chrome extension permissions control access to the Chrome API via the manifest, with practical use of the storage API, declaring permissions, and using callbacks to manage data.

  • Browser Action6:24

    Learn how to create and customize browser actions for extensions using the manifest, including icons, tooltips, badges, and a pop-up, to enhance the browsing experience on select pages.

  • Page Action4:31

    Convert a browser action to a page action to target specific sites, which remains gray by default, using show and hide methods, rules, and declarative content with chrome API permissions.

  • Hotkeys2:12

    Define keyboard shortcuts in the manifest to trigger page or browser actions, using cross‑platform keys like control shift f, and handle commands with a background script.

  • Assignment0:33

    Press a hotkey to show a badge with text in a chrome extension, then press again to hide it by flipping a boolean in local storage.

  • Background Color5:36

    Learn to build a Chrome extension that changes a web page background color via a popup button called color changer. Configure manifest and storage and implement a click listener.

  • Tabs5:03

    Master the chrome tabs API by querying active tabs in the current window, handling permissions in the manifest, and injecting content scripts to modify page styles.

  • Options6:25

    Design and implement a Chrome extension options page with color buttons and a color picker, updating stored colors via Chrome storage and wiring the page to the manifest options.

  • Content Script8:37

    Discover how content scripts run in a web page context to read and write page content, communicate with extensions via messages, and inject code to modify images or text.

  • Assignment0:43

    Create a chrome extension content script that renames headings to your name, and paragraphs to your first pet, or add a page button to export concatenated text as a file.

  • Messaging6:26

    Explore how content scripts communicate with background scripts in chrome extensions by sending and receiving JSON messages via chrome.runtime.onMessage and chrome.tabs.sendMessage, with practical bookmarking permissions and testing.

  • Connections9:18

    Explore how to establish long-lived connections between content scripts and extension pages using Chrome runtime connect, ports, and message passing, demonstrated with a number guessing game.

Requirements

  • Basic knowledge of HTML, CSS, JavaScript

Description

You will learn everything you need to know in order to create awesome Chrome Extensions. Besides theory, you will learn by tons of awesome, practical examples as well.

We will start from the beginning, and in each video, I will explain a new, important concept regarding extensions. But you will learn with practicing as well, because after understanding how things work, we will also implement it. You can code along, and after every video, you will have a complete, functional Chrome Extension.

In the end, after creating a more complex example, you will learn to publish it to the Chrome Web Store.

There will be assignments as well to check if you understood the concepts and can put these in action. I will publish all the source codes created through this course.

Who this course is for:

  • Anyone who wants to learn about Chrome Extensions, no previous knowledge required
  • Web developers who want to extend their applications with Browser Extensions
  • Beginners who want to create their own extension and don't know where to start
  • Those who already have experience with extensions, but want to learn more or broaden their horizons
  • Anyone who wants to learn more about the Chrome browser or create interesting JavaScript projects

Report abuse