Augmenting the Internet with Browser Extensions

on YouTube ↗26m

" summary

A Textio browser extension for Chrome uses JavaScript HTML and CSS with content scripts and a background script to inject a live writing score and highlights into Gmail and LinkedIn; it avoids site‑specific conditionals by using site configs, sizes UI dynamically, and solves DOM conflicts with a layered sandwich highlighter implemented via the shadow DOM plus mouse‑hit testing hacks — the extension works in real time without breaking host editors.

AI-written summary · about

" chapters (15)

1. 0:00Intro
2. 0:24What is Texio
3. 1:28What is a browser extension
4. 2:28What can a browser extension do
5. 4:03Limitations of browser extensions
6. 7:58Sitespecific conditionals
7. 14:33Dont break the host page
8. 15:13Example
9. 16:26Highlighter
10. 19:11Hilah
11. 19:43Mouse Tracking
12. 20:42Absolute Positioning
13. 21:08Shadow DOM
14. 22:22Chrome Extension
15. 24:21Summary

" related talks

• 22mExtending the Web - explore new UI surfaces with WebExtensionsOliver Dunk · Wey Wey Web 2024
• 32mConversations Without Prompts: AI in the WebAndreea Miclaus · jsday 2025
• 19mFusion: Opportunistic Web Prototyping with UI MashupsPhilip J. Guo, Xiong Zhang · UIST 2018
• 01mEntrevistaMatias Blayer · NG Bolivia 2019
• 11mHow Bloomberg Built a Talent Sourcing Chrome Extension Using ReactAdina Stoica · React Alicante 2023
• 41mCross browser extensions – lets make oneTrishul Goel · FrontEnd Con 2018
• 33mBecome a wizard and make the browser your ownOliver Dunk · DevFest Nantes 2025
• 22mCross browser extensions - lets make oneTrishul Goel · The Rolling Scopes Conference 2018