Extensionator - Rise of the Chromium

What if you could build your own productivity tools using just HTML, CSS, and JavaScript? This talk shows you how to create custom Chrome extensions from scratch.

#1about 1 minute

Understanding the core components of a Chrome extension

Chrome extensions are built from several key parts including background scripts, content scripts, UI elements, and options pages.

#2about 3 minutes

Creating the basic manifest file for an extension

Start a new Chrome extension project by creating a folder and a `manifest.json` file with the three mandatory fields: name, version, and manifest_version.

#3about 2 minutes

Adding icons and a description to the manifest

Enhance the extension's presentation by adding an `icons` object and a `description` field to the `manifest.json` file.

#4about 5 minutes

Using a background script to intercept and redirect requests

Implement a `background.js` script that uses the `chrome.webRequest.onBeforeRequest` API to intercept navigation to specific URLs and redirect the user.

#5about 3 minutes

Requesting permissions and debugging the extension

Fix errors by adding a `permissions` array to the manifest for APIs like `webRequest` and `webRequestBlocking`, and use the extension management page for debugging.

#6about 9 minutes

Building a popup interface with browser action

Create a user interface that appears when the extension icon is clicked by defining a `browser_action` in the manifest and linking it to a popup HTML file.

#7about 3 minutes

Adding interactivity to the popup with JavaScript

Use a `popup.js` script to add event listeners to buttons, allowing users to create and cancel alarms with the `chrome.alarms` API.

#8about 8 minutes

Triggering desktop notifications from a background script

The background script listens for events using `chrome.alarms.onAlarm` and then creates a persistent desktop alert with `chrome.notifications.create`.