Keren Kenzi

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.

Extensionator - Rise of the Chromium
#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`.

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

Designer

Andrew Comp

Andrew Comp
Berlin, Germany

Intermediate
Java
JavaScript

Matching moments

Introducing Demo Time for flawless live coding presentations
06:23 MIN

Introducing Demo Time for flawless live coding presentations

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

Unlock full access

Log in or set up an account to access this feature and more.

Recap and resources for advanced extension development
05:49 MIN

Recap and resources for advanced extension development

Let's build a VS Code extension for automated refactorings

Unlock full access

Log in or set up an account to access this feature and more.

Using the Selenium IDE to record browser test scripts
13:57 MIN

Using the Selenium IDE to record browser test scripts

Proactive monitoring and smoke testing in your production environment

Unlock full access

Log in or set up an account to access this feature and more.

Presenting live web scraping demos at a developer conference
01:57 MIN

Presenting live web scraping demos at a developer conference

Tech with Tim at WeAreDevelopers World Congress 2024

Unlock full access

Log in or set up an account to access this feature and more.

Q&A on extensions, testing, and development tools
08:05 MIN

Q&A on extensions, testing, and development tools

Let's build a VS Code extension for automated refactorings

Unlock full access

Log in or set up an account to access this feature and more.

Adding context with browser and IDE extensions
03:43 MIN

Adding context with browser and IDE extensions

How to Optimize Non-Coding Time

Unlock full access

Log in or set up an account to access this feature and more.

Use cases and the open source nature of Demo Time
07:26 MIN

Use cases and the open source nature of Demo Time

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

Unlock full access

Log in or set up an account to access this feature and more.

Understanding the security risks of malicious browser extensions
06:52 MIN

Understanding the security risks of malicious browser extensions

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

Unlock full access

Log in or set up an account to access this feature and more.

Featured Partners

Related Videos

See all videos
Explore new web features before everyone else44:43

Explore new web features before everyone else

Nikita Dubko

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

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

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

Vulnerable VS Code extensions are now at your front door44:11

Vulnerable VS Code extensions are now at your front door

Raul Onitza-Klugman & Kirill Efimov

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
LM
Luis Minvielle
16 Best Chrome Developer Tools 2023
In today's fast-paced digital world, time is of the essence, and productivity is key. As a developer, having the right tools at your fingertips can make all the difference. That's why we've put together a list of the top Chrome extensions for develop...
16 Best Chrome Developer Tools 2023
EM
Eli McGarvie
11 Best AI Chrome Extensions for Developers
In this brave new world of software development, time is a precious commodity, and developers are always on the lookout for clever shortcuts. With AI Chrome Extensions at your disposal, you’ll be able to tap into the extraordinary powers of AI to str...
11 Best AI Chrome Extensions for Developers
LM
Luis Minvielle
8 Best Edge Extensions And Addons For Developers
As modern web applications become increasingly complex, developers rely on a range of tools and extensions to optimise their workflow and streamline their debugging process. From language translation to spelling and grammar checks, the right tools ca...
8 Best Edge Extensions And Addons For Developers
EM
Eli McGarvie
9 Best ChatGPT-4 Extensions For Developers (2023)
In 2022, ChatGPT officially opened to the public. Some people panicked, some people were excited, and some people started making chrome extensions. While ChatGPT can pass law school exams and should be getting paid as a level 3 Google engineer, it’s ...
9 Best ChatGPT-4 Extensions For Developers (2023)

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend-Entwickler

Frontend-Entwickler

infomax websolutions GmbH
Grassau, Germany

Intermediate
Senior
CSS
HTML
JavaScript
TypeScript