Astra: How We Made Developers' Lives Easier by Building a Browser Extension
summary
A presentation about Astra, an internal Chrome browser extension built with Chrome Extension API to simplify frontend development and testing for Mail. It describes features: injecting developer-only UI elements into product pages and external services, intercepting and modifying outgoing requests (URL substitution) for local dev, and inspecting/ filtering/sorting telemetry before it’s stored. The extension is implemented in TypeScript using React for rendering, MobX for state, and Chrome APIs to integrate into the toolbar, DevTools, request tracking, permissions, and tab management.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 3:42Problems before extension
- 7:55Extension panel in DevTools
- 9:22Intercepting requests for metrics
- 13:14Mocking requests for local dev
- 16:06Data extraction and injection
- 18:14GitLab UI popup improvements
- 20:59Automated test restart
- 25:14Extension structure and components
- 27:20Manifest and permissions
- 30:09Tech stack for extension
- 31:33Deploying extension in team
- 33:17Internal usage and limitations
- 35:44Build and update automation
- 36:51Developer feedback on efficiency
- 37:13Code examples and repo
- 38:37Q&A
related talks
20mDevelop your own Browser extension
22mExtending the Web - explore new UI surfaces with WebExtensions
10mMaking AI Coding Work for Enterprise-Grade Browser Extensions
29mEverything You Ever Wanted To Know About Cross-Browser Web Extensions
34mAutomate building Chrome Extensions with Antigravity and DevTools MCP
28mA hero's guide to developing with Chrome Dev Tools
33mBecome a wizard and make the browser your own
01mEntrevista