Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Access response payload/data from within a chrome extension

I am working on a project where it is required to track requests "ajax ones" from certain site, access response payload for some of those requests and act upon them.

So far i managed to track requests and access their headers using the webRequest api, the only problem is that i can't find anyway to access the actual data within those responses.

Is it even possible?.

Please feel free to post any ideas or references that could help.

Thanks and have a nice day.


EDIT:

An example of what iam looking for is the response tab in the network panel which is part of chrome's developer tools.

like image 273
Mohammed Ibrahim Avatar asked Jan 14 '13 19:01

Mohammed Ibrahim


1 Answers

Network Panel is a HTML representation of HAR(HTTP Archive format) Log. You can trace each element of the network panel using devtools.network API.

You can refer to following code where TCP Connection time is being traced as a reference to get started using devtools.network API and HAR Log.

manifest.json

Registered devtools.html for tracing network panel events

{
    "name": "Network Demo",
    "description": "This is a sample for API's available for Network",
    "devtools_page": "devtools.html",
    "manifest_version": 2,
    "version": "2"
}

devtools.html

Registered devtools.js to comply with CSP.

<html>

    <head>
        <script src="devtools.js"></script>
    </head>

    <body></body>

</html>

devtool.js

req in the following code returns HAR Log and you can use it for reading content you need; I have used the HAR for TCP Connection time here

chrome.devtools.network.onRequestFinished.addListener(function(req) {
    // Displayed sample TCP connection time here
   console.log(req.timings.connect);
});

References

  • devtools.network API
  • HAR Log
  • Network Panel
  • Content Security Policy(CSP)
like image 111
Sudarshan Avatar answered Sep 28 '22 07:09

Sudarshan