Copy / intercept AJAX data using JavaScript?

Question

Is it possible to use JavaScript to clear all changes on a web page that is updated in real time using AJAX? The site I want to clean up updates data using AJAX every second, and I want to get all the changes. This is an auction website, and several items may change whenever a user places a bid. When placing a bet, the following change occurs:

Current bid price Current high bid Auction timer adds time to it

I want to capture this data using the Chrome extension based on JavaScript. Is there an AJAX listener for JavaScript that can do this? Set of tools? I need some direction. Can JavaScript do this?

Answer 1

I am going to show two ways to solve the problem. Whatever method you choose, be sure to read the bottom of my answer!

First, I present a simple method that only works if jQuery is used on the page . The second method looks a bit more complicated, but will also work on pages without jQuery.

The following examples show how you can implement filters based on data (such as POST / GET), URLs and read (POST) data and responsiveness.

Use ajax global event in jQuery

More information about jQuery can be found in the .ajaxSuccess documentation. Using:

 jQuery.ajaxSuccess(function(event, xhr, ajaxOptions) { /* Method */ ajaxOptions.type /* URL */ ajaxOptions.url /* Response body */ xhr.responseText /* Request body */ ajaxOptions.data }); 

Pure javascript

When a website does not use jQuery for its AJAX requests, you need to change the built-in XMLHttpRequest method. This requires more code ...:

 (function() { var XHR = XMLHttpRequest.prototype; // Remember references to original methods var open = XHR.open; var send = XHR.send; // Overwrite native methods // Collect data: XHR.open = function(method, url) { this._method = method; this._url = url; return open.apply(this, arguments); }; // Implement "ajaxSuccess" functionality XHR.send = function(postData) { this.addEventListener('load', function() { /* Method */ this._method /* URL */ this._url /* Response body */ this.responseText /* Request body */ postData }); return send.apply(this, arguments); }; })(); 

How to work with the Chrome extension

The previously shown code should be launched in the context of the page (in your case, on the auction page). For this reason, you must use script content that introduces a (!) Script. Using this is not complicated, I refer to this answer for a detailed explanation plus usage examples: Creating a Chrome extension - entering code on a page using the contents of the script .

General method

You can read the request body, request headers and response headers using the chrome.webRequest API. Headings are also subject to change. However, it is not yet (yet) possible to read, not to mention changing the body of the response of the request. If you want this feature, select https://code.google.com/p/chromium/issues/detail?id=104058 .