Keren Kenzi

Extensionator - Rise of the Chromium

Stop waiting for the perfect productivity tool. Build your own Chrome extensions using the web skills you already have.

Extensionator - Rise of the Chromium
#1about 2 minutes

Understanding the core components of a Chrome extension

Chrome extensions are built from components like background scripts for events, content scripts for page modification, and UI elements for user interaction.

#2about 3 minutes

Creating the initial manifest.json for your extension

Every Chrome extension starts with a mandatory manifest.json file that requires three key fields: name, version, and manifest_version.

#3about 2 minutes

Customizing your extension with an icon and description

Enhance your extension's presentation in the management page by adding `icons` and a `description` to the manifest.json file.

#4about 5 minutes

Building a focus extension to redirect distracting websites

Use a background script with the `chrome.webRequest` API to intercept and redirect navigation from specified URLs to a more productive page.

#5about 3 minutes

Requesting API permissions and debugging your extension

To use powerful Chrome APIs like `webRequest`, you must declare them in the `permissions` field of your manifest and use the management page to inspect errors.

#6about 4 minutes

Building a reminder extension for work-life balance

A second extension example demonstrates how to create a tool that reminds you to stop working after a set amount of time to improve work-life balance.

#7about 5 minutes

Creating a popup UI using a browser action

Add an interactive popup to your extension by defining a `browser_action` in the manifest that points to an HTML file for the UI.

#8about 3 minutes

Setting and canceling timers with the Alarms API

Use JavaScript in your popup to interact with the `chrome.alarms` API, allowing users to create and cancel timed events.

#9about 6 minutes

Triggering system notifications from a background script

Listen for alarm events in a background script and use the `chrome.notifications` API to display a system notification to the user.

#10about 2 minutes

Final steps for publishing to the Chrome Web Store

To share your creation, you need to create a developer account, upload your extension folder, and submit it for review on the Chrome Web Store.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Explore new web features before everyone else44:43

Explore new web features before everyone else

Nikita Dubko

Using all the HTML, Running State of the Browser and "Modern" is Rubbish1:15:44

Using all the HTML, Running State of the Browser and "Modern" is Rubbish

Chris Heilmann, Daniel Cranney and David Letorey

Unleash your web skills on native!52:01

Unleash your web skills on native!

Rowdy Rabouw

Progressive Web Apps - The next big thing40:01

Progressive Web Apps - The next big thing

Nico Martin

WeAreDevelopers LIVE - Demo Time, Live Coding, End-to-End Testing and more1:02:27

WeAreDevelopers LIVE - Demo Time, Live Coding, End-to-End Testing and more

Chris Heilmann, Daniel Cranney & Elio Struyf

The Eventloop in JavaScript - How does it work?30:36

The Eventloop in JavaScript - How does it work?

Christian Woerz

WeAreDevelopers Live: Browser Extensions, Honey Scam, Jailbreaking LLMs and more1:01:25

WeAreDevelopers Live: Browser Extensions, Honey Scam, Jailbreaking LLMs and more

Chris Heilmann, Daniel Cranney

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Developer

EffectConnect
Swalmen, Netherlands

PHP
Vue.js
Laravel
Amazon Web Services (AWS)