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.

Matching moments

Scripting presentations and demos in VS Code
14:14 MIN

Scripting presentations and demos in VS Code

Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The origin story of the Polypane developer browser
05:28 MIN

The origin story of the Polypane developer browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Making accessibility tooling actionable and encouraging
03:58 MIN

Making accessibility tooling actionable and encouraging

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Creating a modal with the native HTML dialog element
06:09 MIN

Creating a modal with the native HTML dialog element

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Ensuring accurate testing across different browsers and devices
07:12 MIN

Ensuring accurate testing across different browsers and devices

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Featured Partners

Related Videos

See all videos
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

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

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

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

WeAreDevelopers LIVE - Chrome for Sale? Comet - the upcoming perplexity browser Stealing and leaking56:03

WeAreDevelopers LIVE - Chrome for Sale? Comet - the upcoming perplexity browser Stealing and leaking

Chris Heilmann & Daniel Cranney & Ramona Schwering

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More1:06:44

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Chris Heilmann, Daniel Cranney & Theodore Lefevre

WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More59:40

WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More

Chris Heilmann, Daniel Cranney & Peter Kröner

Let's build a VS Code extension for automated refactorings1:40:08

Let's build a VS Code extension for automated refactorings

Nicolas Carlo

Related Articles

View all articles
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
DC
Daniel Cranney
Creating a Spotlight Text Effect with CSS and JavaScript
Every now and then it’s fun to build something small just to get a better grip on a concept, and this one’s a great example. We’ll explore how to make a simple spotlight text effect that helps you understand how to follow the cursor, use CSS variable...
Creating a Spotlight Text Effect with CSS and JavaScript
CH
Chris Heilmann
Links and anchors: ancient HTML and JS magic in your browser
Have you ever wondered why you use an <a> element to add link to an HTML document? Paragraph is <p>, unordered list is <ul>, image is <img> but why <a> instead of <link>? Well, the reason is that the element both defines where to go to, but also an e...
Links and anchors: ancient HTML and JS magic in your browser

From learning to earning

Jobs that call for the skills explored in this talk.

Software Developer

Software Developer

Code Healers LLC
Hinesville, United States of America

Remote
€20-30K
Junior
Intermediate
React
JavaScript
TypeScript
+1
Software Developers

Software Developers

Code Healers LLC
Hinesville, United States of America

Remote
€30-40K
Intermediate
Senior
.NET
React
JavaScript
+2