Identify when page content has changed

[jc4golf]

I'm using a website which adds content to the page when a button is clicked. I'm clicking that button programmatically using Javascript, but I would like to know how to detect that the added content has been added to the page.

[salvadordf]

Hi,

I'm not a JavaScript expert but perhaps you can use a MutationObserver.
CEF doesn't have any event to detect document changes, only loading state changes.

[jc4golf]

Yes, that could work if I can figure out how to implement it. Thank you Salvador.

[jc4golf]

I've tried, using JavaScript Extensions, to add a MutationObserver to the page I'm manipulating to get back a response when the button in question is clicked (which should add nodes to the element being observed). I can't get it to work, most likely because the JavaScript is not formed correctly. That JavaScript is:

TempJSCode := '(function () { ' +
' let list = document.getElementById("updCourseListing"); ' +
' function log(mutations) { ' +
' for (let mutation of mutations) { ' +
' if (mutation.type === "childList") { ' +
' var ret = mutation.addednodes; return ret; ' +
' } ' +
' } ' +
' } ' +
' let mutationObserver = new MutationObserver(log); ' +
' myextension.mutationobserver(mutationObserver.observe(list, {' +
' childList: true, subtree: true ' +
' };) ' +
'})(); ';

I've tried various versions of this, but to no avail. I don't know where else to look.

[salvadordf]

Try making a simpler version of the mutationobserver that adds a console message if it detects something.

That would be a pure JavaScript problem and there are many examples in stackoverflow :
https://stackoverflow.com/questions/24344022/how-to-use-mutationobserver
https://stackoverflow.com/questions/67670100/mutationobserver-callback-not-called-in-firefox-but-in-chrome
https://stackoverflow.com/questions/65501964/observing-text-change-in-the-entire-html-dom-how-to-do-this

Once you have a working mutationobserver then you can replace the code line that adds a console text by a call to a custom JavaScript extension.

[jc4golf]

I had a missing parenthesis in my JavaScript, but after fixing that it still won't do what I want. After setting the mutation observer I click the button that causes content to be added to the page, which the observer would respond to. However, clicking the button gets rid of the observer. The same behavior happens to the mouseover event in the JSExtension demo. So now I'm working on another way to accomplish what I need to do.