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 🙂