Pergunta

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] 
Foi útil?

Solução

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
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top