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