Build 3 Chrome Extensions in Under 2 Hours

Name: Build 3 Chrome Extensions in Under 2 Hours
Rating: 4.1 (90 reviews)

A code along course for developers where you build 3 Chrome Extensions

Created byTiny Tech Tuts

Last updated 3/2021

English

English [Auto],

What you'll learn

Learn how build chrome extensions by coding 3 real life chrome extensions in this crash course!

Course content

5 sections • 19 lectures • 1h 19m total length

Intro1:45
Build three Chrome extensions in under two hours, using a copy-and-paste approach to create a momentum-like clone, a URL blocker, and a URL capture with Chrome storage and Chrome API.
Assumed Knowledge1:21
The course assumes you have HTML, the document object model, and basic JavaScript knowledge to follow the code and event handling in the projects, with MDN docs recommended for learning.
Don't Take This Course If...2:41
Explore a practical, time-efficient approach to Chrome extension development by reviewing working code samples, focusing on functionality over styling, and gaining hands-on experience with the Chrome API.
devdecks.io1:30
Explore devdecks.io's flashcard app for tech topics, with elixir decks, keyboard navigation and spacebar to reveal answers, plus customizable colors, card sizes, and dark/light mode.

Build a manifest file6:02
Build a bare bones chrome extension by creating a manifest.json, using chrome url overrides for a custom new tab, and storing today’s tasks in chrome browser storage as momentum clone.
Chrome New Tab3:13
Learn to build a Chrome new tab extension by loading and testing an extension, addressing manifest issues, and replacing the Chrome default new tab with a custom page.
Adding Images and Scripts7:20
Set a random background image for the new tab by loading images from a folder, constraining size with a style sheet, and selecting a random image on DOMContentLoaded.
Chrome Storage6:58
Learn to save input data to chrome storage using the sync API, update the manifest with storage permissions, and load an unpacked momentum extension.

Intro and Popup HTML7:11
Kick off building a URL blocker chrome extension by configuring a manifest, adding a popup UI, and using browser action to block or modify requested URLs.
Intercept and Block All URLS5:46
Learn to intercept and block all urls by configuring permissions, using the chrome webRequest onbeforerequest API, and a background script to continuously enforce blocking while the extension is enabled.
Blocking a Hardcoded List of URLs4:45
Block a hardcoded list of urls in a chrome extension using the chrome web request api, updating the listener to cancel requests based on the initiator.
Make List Dynamic8:11
Make a dynamic blocking list in a Chrome extension by using a content script to capture input and send messages to a background script that intercepts web requests.

Building Files for New Extension and App Overview6:05
Learn to set up a Chrome extension template named Tab Collector, adjust the manifest for tabs, and implement background and content scripts to save related tabs as a bookmark group.
Logging Your Open Tabs to the Console2:50
Log the current Chrome tab URLs to the background script and console using the Chrome Windows API get current with populate true, filtering out extension tabs and sending the title.
Saving Open Tabs Using Chrome Storage3:53
Save and manage open tabs by storing and merging tab lists in Chrome storage via a background script, handling titles, and displaying updated lists in the interface.
Displaying URLs in the Popup HTML File3:45
Display urls in the popup by rendering lists from chrome storage into a styled container, then add an event handler to open all urls in new tabs.
Open Collected URLs in Chrome Window3:02
Open collected URLs in a new Chrome window using the Windows and Tabs APIs, save and reopen URLs, and dynamically add URLs in this Chrome extension crash course.

How to Submit Your Extension2:30
Submit your chrome extension by using the chrome developer dashboard, create a developer account, pay the 50 dollar fee, upload your package, and publish with icon assets for distribution.
Wrap up and Thank you!0:46
Thank you for taking this course on building Chrome extensions. Leave a review and visit the NextRadio website to explore the main functionality and future updates.

Requirements

Understanding of HTML and Javascript fundamentals. A text editor and basic terminal commands.

Description

In this course we will build out 3 barebones chrome extensions 1) a URL blocker, 2) a browser tab page override, 3) a bookmarks collector.

This course works by me copy and pasting code examples I have already written and walking you through how they operate and why they work. From there you can use these examples to breakdown the code even further or use it as a building block to add more functionality

After completing this course you will have gained experience using Chrome API's and the knowledge of how to structure scripts to get you started with building your own Chrome Extensions. This course assumes a junior developer level understanding of html and javascript as well as the subsequent tools to use for building websites. I treat these crash courses as though I were a mid level developer walking a junior through the steps it takes to build chrome apps. This course is for you if you want working code examples from which you can build your own chrome extensions but not for you if you want a detailed explanation of how the JavaScript we write works.

If you enroll in this course and decide it’s not for you later on, you have 30 days to get a full refund.

Who this course is for:

Developers interested in building chrome extensions!

Build 3 Chrome Extensions in Under 2 Hours

What you'll learn

Explore related topics

Course content

Introduction4 lectures • 7min

Build a Momentum Clone4 lectures • 24min

Build a URL Interceptor4 lectures • 26min

Build a Tab Collector5 lectures • 20min

Submission Overview and Wrap up2 lectures • 3min

Requirements

Description

Who this course is for: