How to get the changed content in the page?

Question

I wrote a user script for the latest Chrome browser. It seems the script can't get the changed content of the page after loaded (for example, after the page loaded, I clicked ¿sth? and an embedded window popped up).

Even if I used window.setTimeout(), I still can't the get updated content in the timer callback through document.getElementById(). I inspected the page and found that the popup element existed in the DOM.

Is this a limitation of user script? Or some other methods could be used to get the update in user script?

Update: I tried DOMSubtreemodified event as suggested. But the behavior is still strange.

I added only one one line of JavaScript to the userscript for my.safaribooksonline.com,

document.addEventListener("DOMSubtreeModified", function () {
    alert(eval('typeof OpenSignInPopup')); });

But the alert box shows "undefined" as the evaluate result of OpenSignInPopup. But I can run the alert statement in the script console in the same page at the same time, and shows the result as "function".

This function was not loaded when the user script is running at first. So how can I use it in the user script?

Answer 1

You need to provide details, like the relevant code snippet(s) and the pages targeted.

In general, you can fire off the DOMSubtreeModified event in chrome. That should get you access to the changed DOM.

Also, are you sure the new content is not in an iframe?

Update for new OP info:

But the alert box shows "undefined" as the evaluate result of OpenSignInPopup.

In Chrome, Greasemonkey code cannot interact with the page's JS functions like that. You'll need to inject your code into the page. See this SO answer for more information.