Using Greasemonkey and jQuery to intercept JSON/AJAX data from a page, and process it

Question

Right, I partly got an answer in my previous question. But, I still sit with the problem of telling GM where to go and fetch the data to put into the array...

On the web page http://www.trada.net/p_home.aspx, if I run firebug console, I get the data from the above mentioned question, but it is ever changing, updating every second.

This data I've got an idea how to put it in an array, and from there I'll tell GM what to do with it. I cant run the firebug console the whole time, and I dont know how to get GM to fetch the data requests sent by the site, which look like : http://www.trada.net/REST_Service/REST_Auction.svc/GetAuctionData?_=1306009003654 -- where the last part changes with every update.

Basically Gm will fetch the data every second, see if there is a need to bid on any of the auctions, and then if any 1 is won, click a popup that appears, in order to continue.

Answer 1

Since the target page uses jQuery, you can eavesdrop on the JSON data easily using ajaxSuccess().

The problem then becomes getting the data from the page's scope to the GM sandbox... That can be done by putting the data into a special page node.

From there, it's just a matter of using my other (brilliant :D ) answer.

Putting it all together, the following should get you started.:

Update after almost 4 years: The code below is now obsolete due to many changes in Firefox and Greasemonkey. I don't plan on re-engineering it due to lack of interest and also because it's not the best approach for most RL tasks. For most cases; the most robust, portable, and reliable method remains smart polling. See an example of a handy utility for that.

// ==UserScript==
// @name            _Fun with JSON
// @include         http://www.trada.net/*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
// ==/UserScript==


//--- Create a cell for transmitting the date from page scope to GM scope.
$('body'). prepend ('<div id="LatestJSON_Data"></div>');

var J_DataCell          = $('#LatestJSON_Data');


//--- Evesdrop on the page's AJAX calls and paste the data into our special div.
unsafeWindow.$('body').ajaxSuccess (
    function (event, requestData)
    {
        J_DataCell.text (requestData.responseText);
    }
);


//--- Listen for changes to the special div and parse the data.
J_DataCell.bind ('DOMSubtreeModified', ParseJSON_Data);


function ParseJSON_Data ()
{
    //--- Get the latest data from the special cell and parse it.
    var myJson              = J_DataCell.text ();
    var jsonObj             = $.parseJSON (myJson);

    //--- The JSON should return a 2-D array, named "d".
    var AuctionDataArray    = jsonObj.d;

    //--- Loop over each row in the array.
    $.each (
        AuctionDataArray,
        function (rowIndex, singleAuctionData) {

            //--- Print the 7th column.
            console.log ('Row: ' + (parseInt (rowIndex) + 1) + ' Column: 7  Value: ' + singleAuctionData[6]);
        }
    );
}


//--- Format our special cell with CSS.  Add "visibility: hidden;" or "display: none;", if desired.
GM_addStyle ( (<><![CDATA[
    #LatestJSON_Data
    {
        background:         gold;
        border:             3px ridge #0000DD;
        font-size:          10px;
        margin:             0 2em;
        padding:            1ex 1em;
        width:              94%;
        opacity:            0.8;
        overflow:           hidden;
        z-index:            666;
        position:           absolute;
        color:              black;
    }
]]></>).toString () );

Note that the question's proposal may violate the site's Terms of Service and/or the site can take countermeasures. (They already obfuscate their JS.)