12/28/2023 0 Comments Web monitor chrome extensionIf you do this, be sure to add the resource url to the web_accessible_resource in Since we also wanted to add some nice UIĮlements, we decided to put the monkey patch code and the UI related code into a script file, which the resourceUrl links to. There are several ways to add the code into the script tag. (document.head || document.documentElement).appendChild(s) Var s = document.createElement('script') I had to use () to create a tag injected on the website which would load the monkey patch The solution: Injected scriptĭue to the isolated context, I had to take a different approach to successfully monkey patch the website. To learn more about how execution environment works, see this video on content scripts. Meaning the monkey patch won’t have any effect on the open website. Webpage, which is where the AJAX calls are made. However, the code executed by executeScript() is executed in a different context than the code on the Chrome Extension Tabs API has a method to execute the code: executeScript(). With code ready for monkey patching, we have to execute it. This article explaining how to monkey patch. There are a few resources on the web such as Now, I can simply add addEventListener('load', event) to capture the response data. send() This method is used to send data as part of the request.I can patch it so thatĮvery time the method is called, I save the headers as hash. setRequestHeader() This method is called when the request header is set.open() This method is called whenever a new AJAX call is initiated which I can then capture the.The monkey patch allows us to log the data. request headers/body and response headers/body), I’d have to monkey patch it. In fact, it doesn’t even have a public method or property to get the original URL or path. There is a setRequestHeaders(), but no getter method to pair with it to get the request The object has interfaces to get the HTTP response but not the original Looking at the XmlHttpRequest api documentation, I realized it has exact the opposite There are several XmlHttpRequest listeners for hooking into:įrom the listener callbacks, I can get the event target, which is the XmlHttpRequest Is used by all browsers for AJAX calls, I leveraged this to monitor the API calls through monkey patching. Without responses, debug would be painful and resolving issues would be slow. Our requirement was to capture the response so that they could be shared with team members. While we were surprised by the lack of a response body getters, we now understand a possible reason why most otherĮxtensions do not capture the responses. However, we ran into a bug where the WebRequest API doesn’t expose an interface to It seemed to be the most natural place to capture the data. We leveraged those APIs before for our CORS and Origin Changer. Initially, I looked at the Chrome’s WebRequest APIs to capture API calls from an open browser tab. Is part of the Chrome Extension set of APIs. However, some monkey business was needed to do the capturing that went around the Chrome Extension APIs due to limitations in Chrome’s APIs. The extension is designed for REST APIs in mind such as those powering Single-Page Apps. The network tab is designed for traditional HTML websites rather than modern Single-Page Apps and APIs that return JSON.ĭue to this time sink, we decided to build a Chrome Extension to make capturing and debugging these AJAX requests (and In addition to not being easy to share, inspecting HTTP traffic in Chrome DevTools is not ideal because there is no easy way to filter the API Calls or inspect JSON payloads. Sending multi-megabyte *.har files through Slack is just as cumbersome. The network tab, it hard to share those captured HTTP traces with teammates.īetween the front-end and back-end so we constantly have to copy/paste the HTTP headers and JSON payload from the DevTools into email or Slack when debugging API issues. I assumed there would be a lot of Chrome extension to monitor HTTP requests from AJAX calls,īut the few that we found such as the Postman Intercept Chrome Extension seems to only capture
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |