Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
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

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
  • Course Structure1:56
  • 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
  • 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
  • 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
  • Assignment0:33
  • 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
  • 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
  • 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
  • Connections9:18

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