> Markdown version of [/videos/119-extensionator-rise-of-the-chromium](https://www.wearedevelopers.com/videos/119-extensionator-rise-of-the-chromium). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Extensionator - Rise of the Chromium

Turn basic HTML and JS skills into powerful browser tools. Learn to build custom Chrome extensions that intercept network requests, block distractions, and enforce healthy work-life boundaries.

- **Speakers:** Keren Kenzi
- **Event:** WeAreDevelopers LIVE
- **Published:** March 23, 2021
- **Duration:** 35:15
- **URL:** https://www.wearedevelopers.com/videos/119-extensionator-rise-of-the-chromium

## Summary

Building a custom Chrome extension empowers developers to transform fundamental HTML, CSS, and JavaScript skills into powerful browser enhancements. The architecture fundamentally relies on the `manifest.json` file to dictate configuration details, pairing background scripts that monitor persistent browser events with content scripts that dynamically read or modify web page elements. By enabling developer mode in Chromium browsers, engineers can easily load unpacked extensions, allowing for rapid local iteration and immediate visual feedback on their custom UI popups.

Custom extensions serve as excellent tools for enforcing workplace productivity and minimizing digital distractions. By leveraging the `chrome.webRequest` API natively, developers can programmatically intercept network requests before a TCP connection even opens, automatically redirecting end-users from time-wasting sites to designated work or educational URLs. This process uncovers a critical debugging workflow: running into undefined property errors within the extension manager typically indicates restricted access. Consequently, developers must explicitly declare necessary scopes like `webRequest` and `webRequestBlocking` inside the manifest to authorize these traffic interceptions naturally.

Beyond strict productivity enforcement, custom extensions provide excellent mechanisms for promoting healthy work-life balance in remote work environments. By structuring an interactive popup interface through the `browser_action` configuration, users can seamlessly manage daily routines directly from their browser toolbar. Under the hood, this involves orchestrating the `chrome.alarms` API to track background timers and reflecting active states visually using `setBadgeText`. Ultimately, when a designated shift concludes, the extension utilizes the `chrome.notifications` API to fire a persistent, system-level OS alert, requiring concrete user interaction to enforce that it is officially time to clock out.

**Keywords:** chrome extension development, chromium browser api, manifest.json setup, background script integration, web traffic redirection, chrome.webrequest api, extension permission management, chrome web store deployment, browser_action popup styling, developer mode debugging, chrome.alarms implementation, chrome.notifications alerts, work-life balance automation, task productivity tools, javascript event listeners

## Chapters

1. **Core components of a Chrome extension architecture** (00:58) — Building an extension requires configuring background scripts, content scripts, UI elements, and optional configuration pages.
1. **Setting up a distraction blocking Chrome extension project** (02:29) — Initializing a new extension requires a manifest configuration file to dictate name, version, and security settings.
1. **Redirecting specific web requests using a background script** (07:54) — Intercepting network traffic with the web request API allows the extension to automatically redirect distracting websites.
1. **Troubleshooting and resolving Chrome extension permission errors** (12:49) — Diagnosing undefined errors involves explicitly requesting the required host and web request permissions in the manifest.
1. **Initializing a work-life balance reminder extension project** (15:36) — Establishing a new repository and manifest configuration prepares the foundation for a time-based reminder extension.
1. **Designing an extension popup interface with HTML and CSS** (19:31) — Configuring browser actions allows developers to render an interactive HTML popup directly from the extension toolbar.
1. **Scheduling browser events with the Chrome alarms API** (24:02) — Attaching click event listeners to custom popup buttons provides the logic needed to create or cancel scheduled browser alarms.
1. **Triggering background notifications and text badge updates** (27:37) — Listening for triggered alarms from the background script allows the extension to deploy interactive desktop notifications.
1. **Testing the notification extension and reviewing publishing steps** (31:21) — Resolving specific file path errors ensures notification assets load correctly before uploading to the extension web store.

## Related Moments

- [Testing the imperative API in Chrome with an extension](https://www.wearedevelopers.com/videos/1811-webmcp-making-agents-a-first-class-citizen-of-the-web-andre-cipriani-bandarra-francois-beaufort) (from "WebMCP - Making Agents a First-Class Citizen of the Web - Andre Cipriani Bandarra & François Beaufort")
- [Addressing the impact of browser extensions on performance](https://www.wearedevelopers.com/videos/1296-exploring-the-future-of-web-ai-with-google) (from "Exploring the Future of Web AI with Google")
- [Developing visual studio code extensions for personal productivity](https://www.wearedevelopers.com/videos/1713-wearedevelopers-live-demo-time-live-coding-end-to-end-testing-and-more) (from "WeAreDevelopers LIVE - Demo Time, Live Coding, End-to-End Testing and more")
- [Expanding browser capabilities with external accessibility testing extensions](https://www.wearedevelopers.com/videos/2077-accessibility-features-in-chrome-devtools-and-beyond) (from "Accessibility Features in Chrome DevTools and beyond")
- [Examining privacy risks posed by browser extensions and tracking](https://www.wearedevelopers.com/videos/1841-wearedevelopers-live-bitpanda-s-ai-first-approach) (from "WeAreDevelopers LIVE - Bitpanda’s AI First Approach")
- [Leveraging robust extension APIs for developer ecosystems](https://www.wearedevelopers.com/videos/1713-wearedevelopers-live-demo-time-live-coding-end-to-end-testing-and-more) (from "WeAreDevelopers LIVE - Demo Time, Live Coding, End-to-End Testing and more")

## Related Articles

- [8 Best Edge Extensions And Addons For Developers](https://www.wearedevelopers.com/magazine/205-8-best-edge-extensions-and-addons-for-developers)
- [16 Best Chrome Developer Tools 2023](https://www.wearedevelopers.com/magazine/208-16-best-chrome-developer-tools-2023)
- [10 Best Brave Extensions for Developers](https://www.wearedevelopers.com/magazine/207-10-best-brave-extensions-for-developers)
- [9 Best ChatGPT-4 Extensions For Developers (2023)](https://www.wearedevelopers.com/magazine/170-9-best-chatgpt-4-extensions-for-developers-2023)

## Related Jobs

- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/643147-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/644637-remote-senior-full-stack-engineer) at **Edge Impulse**