Extending the Web - explore new UI surfaces with WebExtensions

on YouTube ↗22m

" summary

Shows how to build cross‑browser WebExtensions using a single manifest.json plus content scripts to inject features like password autofill, tooltips and overlays, and a side panel that runs Readability to extract article text and calls the experimental window.a.summarizer API (origin trial Chrome 131–136, Oct 2025) for on‑device summaries. Demos include a popup chat using the Prompt API, a DevTools panel that inspects extension storage (later added in Chrome 132), omnibox and notifications — all built with HTML/CSS/JS and public samples on GitHub.

AI-written summary · about

" chapters (7)

1. 0:00Introduction
2. 2:15Understanding extensions
3. 5:53Content scripts and UI
4. 9:03Side panels and AI integration
5. 14:25Popups and interaction
6. 17:00DevTools panel development
7. 20:00Conclusion and resources

" related talks

• 33mBecome a wizard and make the browser your ownOliver Dunk · DevFest Nantes 2025
• 41mCross browser extensions – lets make oneTrishul Goel · FrontEnd Con 2018
• 01mEntrevistaMatias Blayer · NG Bolivia 2019
• 29mEverything You Ever Wanted To Know About Cross-Browser Web ExtensionsRiaz Virani · XtremeJS 2021
• 38mBuilding Cross-Platform Browser Add-onsJyotsna Gupta · Women in Tech Virtual Conference 2020
• 26mAugmenting the Internet with Browser ExtensionsShannon Capper · CascadiaJS 2018
• 22mCross browser extensions - lets make oneTrishul Goel · The Rolling Scopes Conference 2018
• 15mCross Browser Add-ons and How to build oneJyotsna Gupta · JSFoo 2019