質問

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] 
役に立ちましたか?

解決

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
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top