How to figure out which content was changed by Lightstreamer / Ajax comet push data?

Question

My intention is to monitor a webpage with a Chrome extension. The Webpage is updated by Ajax comet push or by Lightstreamer. The idea is e.g. to generate an alert or other action if a certain value has reached a certain threshold. Based on other answers I did create the following chrome extension code that does write the changed content to the Console:

manifest.json:

{
  "name": "ContentChangeObserver",
  "version": "1.0",
  "description": "Capture changes on webpage content",
  "content_scripts": [
   {
     "matches": ["<all_urls>"],
     "js": ["contentscript.js"]
   }
  ],
  "permissions": ["webRequest", "webRequestBlocking","contextMenus", "tabs",
                  "<all_urls>"],
  "manifest_version": 2
}

contentscript.js:

var i=0;
// Create a MutationObserver to handle events
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        i++;
        if(i > 100) {
        i=0;
        console.log("mutation.target.textContent: " + mutation.target.textContent);
        console.log("mutation.target.attributeName: " + mutation.target.attributeName);
        console.log("mutation.target.type: " + mutation.target.type);
        console.log("mutation.target.nodeId: " + mutation.target.nodeId);
        console.log("mutation.target.baseURI: " + mutation.target.baseURI);
        console.log("mutation.target.nodeName: " + mutation.target.nodeName);
        console.log("mutation.target.nodeType: " + mutation.target.nodeType);
        console.log("mutation.target.nodeValue: " + mutation.target.nodeValue);
        console.log("mutation.target.parentElement: " + mutation.target.parentElement);
        }
    });
});

// Start observing all events in document and its descendants
observer.observe(document, {
    childList: true,
    subtree:   true,
    attributes: true,
    characterData: true
});

So far it's working almost fine, I see all changed content (e.g. on http://demos.lightstreamer.com/MonitorDemo/).
The "if (i>100)..." is just to avoid to much output in the Console log.
But I have no idea, how to figure out a specific value that has changed (e.g. the value for "Free Heap" on http://demos.lightstreamer.com/MonitorDemo/), as there are no Ids or other elements set to distinguish between the different values. I know I can set filters for the MutationObserver, but I have no idea on what I can filter to get e.g. the "Free Heap" value only.

Here some console logs:

mutation.target.textContent: 128
mutation.target.attributeName: undefined 
mutation.target.type: undefined 
mutation.target.nodeId: undefined 
mutation.target.baseURI: http://demos.lightstreamer.com/MonitorDemo/ 
mutation.target.nodeName: DIV 
mutation.target.nodeType: 1 
mutation.target.nodeValue: null 
mutation.target.parentElement: [object HTMLTableCellElement] 

mutation.target.textContent: 1,603,282,363 
mutation.target.attributeName: undefined 
mutation.target.type: undefined 
mutation.target.nodeId: undefined 
mutation.target.baseURI: http://demos.lightstreamer.com/MonitorDemo/ 
mutation.target.nodeName: DIV 
mutation.target.nodeType: 1 
mutation.target.nodeValue: null 
mutation.target.parentElement: [object HTMLTableCellElement]

In the page you link, each changing DIV seems to be identifiable by its `data-field` attribute. In the case of *Free Heap* the value is `MEMORY.FREE`. — rsanchez, May 13 '14 at 20:54
@rsanchez To be precise, one should use [`.dataset` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset) to access it. — Xan, May 13 '14 at 20:56
So, you can check for `mutation.target.dataset.field === 'MEMORY.FREE'`. — rsanchez, May 13 '14 at 21:01
@rsanchez Make that into an answer, maybe? So the question can be closed. Also, for performance reasons it may be better to observe a subtree other than `document`. — Xan, May 14 '14 at 09:20
Thanks a lot for perfect answers. I will check that today. How did you find .dataset property? I did look through all Node properties but did not find dataset.field. And how could I find the correct subtree to observe just what I need to observe? — EmbeddedDesign, May 14 '14 at 11:46
@EmbeddedDesign Explore the page with [Dev Tools](https://developer.chrome.com/devtools/index), you'll see those properties on the node. As for subtree - I mean, just find a common ancestor node for all the elements you want to observe, and pass that element as a parameter. — Xan, May 14 '14 at 12:45
Perfect, it works perfectly! So thanks a lot! @rsanchez I would also sugess to make your comment into an answer and the item can be closed. Xan: Also thanks a lot for your help, I will check which element I can use for filtering. — EmbeddedDesign, May 14 '14 at 20:42

score 0 · Accepted Answer · answered Jul 14 '14 at 18:40

The .dataset property must be used to access it. Looking into the html code of the website, the corresponding data field can be found. E.g. for the Free Heap value:

<div data-source="lightstreamer" data-grid="stats" data-item="monitor_statistics" data-field="MEMORY.FREE" class="lscold">19,670,080</div>

So the corresponding dataset field is MEMORY.FREE. Reading that, the updated value of Free Heap is read:

// Create a MutationObserver to handle events
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if(typeof mutation.target.dataset !== 'undefined') {
            if(mutation.target.dataset.field === 'MEMORY.FREE') {
                console.log("mutation.target.textContent: " + mutation.target.textContent);
            }
        }
    });
});

Resulting Console log:

mutation.target.textContent: 18,470,424
mutation.target.textContent: 34,835,560
mutation.target.textContent: 34,835,560
mutation.target.textContent: 31,032,000

How to figure out which content was changed by Lightstreamer / Ajax comet push data?

1 Answers1