Astra. How We Made Developers' Lives Easier by Creating a Browser Extension

I’ll talk about an internal development — the Astra browser extension for Google Chrome, based on the Chrome Extension API, designed to simplify work with product and technical tasks on the frontend, both from the perspective of developers and testing.

Astra allows adding missing interface elements specifically for developers. In Mail processes, this provides opportunities to enhance the flexibility of the tools used in development. After installing the extension, it becomes possible to conveniently and quickly debug technical metrics before they are sent to the storage (with filtering and sorting). The extension also adds extra service usage hints for employees (without writing code directly in the project). Astra enhances the UI of external services that cannot be modified, adding its own interface elements or even entire screens. For local development, the extension intercepts outgoing requests with URL substitution — this eliminates the need for third-party proxying applications.

The extension is written in TypeScript using React for rendering and MobX for state management. It actively uses APIs to interact with the Google Chrome browser (specifically for integration into the toolbar, DevTools, request tracking, permissions system, and management of open browser tabs).

This talk will be useful for those involved in development using internal monitoring systems or third-party products.