Add table values through browser extension

Question

I have a set of data in a website table that has multiple pages that I need to parse and add the values of a certain field, specifically price field and an inventory field. I don't have access to the code or database. Does anyone know if there is an extension in Chrome or Firefox that can facilitate this type of functionality? Here is an example of the data I need:

I would like a very simple summary like "Total Inventory Price: $500.00". I wouldn't even mind if it were per page and I had to write down each new total and add them up myself. I am proficient in jQuery and such so if I could somehow write this myself, I wouldn't even mind a pointer in that direction. It would have to be an extension though as I don't have direct access to the page.

Edit: Could a greasemonkey script do this?

Answer 1

If you're proficient in jQuery, and know how to extract the data from that table and do your own calculations, then it will be super easy for you to do! Please refer to the documentation, it has all the information you need to do such thing:

http://code.google.com/chrome/extensions/getstarted.html

One Way

If you want this to always show the totals when you visit that page, then you can use a content script. The content script world will have direct communication to the DOM of that page, so you can use jQuery and do your thing. Skeleton for that would be:

manifest.json

{
  "name": "Content Script test",
  "version": "0.1",
  "description": "Content Script test",
  "content_scripts": [
    {
      "matches": ["http://www.website.com/*"],
      "js": [ "jquery-1.4.2.min.js", "cs.js" ],
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}

cs.js

// Your jQuery

Another Way

If you want to show the totals only when you click on a button on the browser. You can use a browser action. You would need a background page to listen when you click on that browser action. Basically, the skeleton for that would be:

manifest.json

{
  "name": "Browser Action test",
  "version": "0.1",
  "description": "Content Script test",
  "background_page": "background.html",
    "browser_action": {
    "default_icon": "icon19.png",
    "default_title": "Browser Action Test"
  },
  "permissions": [ "tabs", "http://www.website.com/*" ]
}

background.html

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(tab.id, {file: 'jquery-1.4.2.min.js'});
  chrome.tabs.executeScript(tab.id, {file: 'cs.js'});
});

cs.js

// Your jQuery

That's it, please refer to the documentation for more assistance, the code above is untested, so don't be surprised if stuff don't work right out of the box :)

Answer 2

You can try something like this, and save it as a bookmarklet:

$('table.inventory').each( function(i){ // allow possibility of more than one table?
  var arTot = $(this).find('tr').map( function(i,e){
    var qty = parseInt( e.find('td:first').text(), 10 );
    var price = parseFloat( e.find('td:last').text() );
    return qty * price; // leave rounding and precision as your exercise
  }).get(); // result as an array
  alert( 'Total: ' + arraySum( arTot ) ); // reduce to single value
});

function arraySum( ar ){ // convenience function
  for(var i=0, sum=0, len=ar.length; i<len; sum+=[i++]);
  return sum;
}

This is not tested, but should give you the general idea. Use a bookmarklet generator (there are many), drop in your JavaScript, and save it as a bookmarklet. Then just click the bookmarklet link while viewing any page, and you'll get an alert displaying the total. Possible enhancements include saving the value to localStorage using the URL as a key (so you don't duplicate, and can track cumulative totals).