In a Chrome Extension content script, must I wait for document.ready before processing the document?

Question

Specifically, I'm evaluating all of the images on a page to see if they have a certain attribute, and then adding some new <divs> to the DOM based on those attributes. Must I wait for document.ready to fire before performing these modifications in order to be guaranteed that Chrome has loaded all of the necessary pieces of the DOM?

The problem I'm running into is that sometimes document.ready takes a short while to fire and the user is already browsing around the page, wondering why my extension hasn't yet had any effect. The problem usually only lasts a moment, but it's enough to be annoying.

If I don't bother waiting for document.ready, and instead immediately process the document, everything seems to work; but I wonder if I'm just getting lucky.

Solution 1

Actually, you don't have to wait. You can process right away in Content Scripts. Just make sure you don't use document_start in the run_at attribute.

In document_end, the files are injected immediately after the DOM is complete, but before subresources like images and frames have loaded. document_idle (the default value) happens even later.

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"],
      "run_at": "document_end"
    }
  ],
  ...
}

Solution 2

Short answer: yes.

Long answer: jQuery won't be able to grab any DOM elements that aren't already rendered. I know i've gotten into trouble a few times and it can be quite annoying to debug something for awhile and then realize I forgot to wrap the code in a document.ready. If its working for you, it's because your lucky. Also, you dont need to wrap it in a document.ready if your scripts are at the bottom of your page, just above your closing body tag.

Comments

[David Mills]

That's a good point about scripts at the bottom of the page. Where/when are Chrome extension content scripts evaluated?

[thinkdevcode]

According to the Chrome Timeline (Developer Tools), the extensions are loaded last. So you very well may not have to use document.ready

[Feru]

Agree if you want to check Document is loaded the above mention approach is good. But the DOM updates can happen even after Document is loaded. This could be AJAX functionality. Like add a listener for "DOMSubtreeModified". window.addEventListener("DOMSubtreeModified", (event) -> console.log "DOMSubtreeModified", event )

[fregante]

Short answer: Only if you use document_start. Both document_idle (the default) and document_end run after dom ready.