How we captured AJAX requests from a website tab with a Chrome Extension

A developer describes the challenges faced when using existing Chrome extensions and DevTools for monitoring AJAX requests, particularly the difficulty in capturing and sharing both HTTP requests and responses for debugging purposes. To address this, they created a custom Chrome extension designed for REST APIs, leveraging monkey patching to effectively capture and log complete API call data, including request and response headers and bodies. They encountered limitations with Chrome's WebRequest API, which does not expose response bodies, and instead used XmlHttpRequest event listeners, despite its lack of request header access, to achieve their goals. The solution involved injecting a script directly into a webpage's context to ensure the monkey patch operates effectively, while also addressing issues related to CSS leaking and strict Content Security Policies. The extension allows HTTP traces to be saved for up to 30 days, facilitating easier debugging and sharing among team members.