0

I am trying to make a simple Google Chrome extension - like finding a specific element on the page and display an alert.

My problem is that the specific page loads relatively slow (having also some AJAX behind).

How can I make my check only when all the page is loaded?

I tried "run_at" : "document_idle" in my manifest file, but with no success. It shows me the message, before the whole page loads.

I was thinking to check every second (or something) the whole DOM elements, but is this a feasible solution? I think it will slow down the page...

Thanks.

Charles
  • 50,943
  • 13
  • 104
  • 142
CristiC
  • 22,068
  • 12
  • 57
  • 89

2 Answers2

2

If that element does not exist on the page when you click "view source", then one way of catching it would be listening to DOMSubtreeModified event, which fires each time DOM is modified:

document.addEventListener("DOMSubtreeModified", function(event){
        if(document.getElementById("my_element")) {
                //element is added
        }
});
serg
  • 109,619
  • 77
  • 317
  • 330
  • Thanks for the info. My page loads a lot of elements using AJAX. So this is really slowing down my page. For each element added, the script runs. Can I restrict this to, let's say, only when adding an element (div, text field, ...)? – CristiC Jul 12 '11 at 15:16
  • @Parkyprg There is also `DOMNodeInserted` event. But I don't understand why this slows down the page. You shouldn't run any script inside this event handler, just check if element is already on the page or not. If it is - then you run your script once (have some flag or something). – serg Jul 12 '11 at 15:27
1

Have you tried to put your code in window.onload event in "content_script.js"?

window.onload = function() {
   // your code
};
user278064
  • 9,982
  • 1
  • 33
  • 46
  • 1
    It doesn't work. This fires when the window loads, but before all the elements are updated with AJAX. – CristiC Jul 13 '11 at 14:04