Identify when page content has changed

Post Reply
jc4golf
Posts: 9
Joined: Wed Jun 23, 2021 12:33 am

Identify when page content has changed

Post by 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.
User avatar
salvadordf
Posts: 3067
Joined: Thu Feb 02, 2017 12:24 pm
Location: Spain
Contact:

Re: Identify when page content has changed

Post by 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
Posts: 9
Joined: Wed Jun 23, 2021 12:33 am

Re: Identify when page content has changed

Post by jc4golf »

Yes, that could work if I can figure out how to implement it. Thank you Salvador.
jc4golf
Posts: 9
Joined: Wed Jun 23, 2021 12:33 am

Re: Identify when page content has changed

Post by 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.
User avatar
salvadordf
Posts: 3067
Joined: Thu Feb 02, 2017 12:24 pm
Location: Spain
Contact:

Re: Identify when page content has changed

Post by 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
Posts: 9
Joined: Wed Jun 23, 2021 12:33 am

Re: Identify when page content has changed

Post by 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.
Post Reply