How to inject the content script after DOM has loaded?

[Ming]

I am learning to write an extension that requires the page to finish
loading before injecting: It needs to presence of certain DOM elements
before it can manipulate them.

My learning example is the Google.com home page, the one with the real
time search results as you type.

The extension needs the search box and submit elements to appear
first.

I am checking for DOM loading with

window.addEventListener('DOMFocusIn', main, false);

document.onreadystatechange = function() {
if (document.readyState == "complete") {
main();
}
}

in content_script.js

and

chrome.tabs.onUpdated.addListener(function( tabId , info ) {
if ( info.status == "complete" ) {
main();
}
})

in background.html

My script only works a fraction of the time. Sometimes the checks
work; sometimes they don't.

What's the most robust way for checking completion--presence of the
basic search box and submit buttons on google.com--in Chrome?

TIA

[Boris Smus]

Hi Ming,

By default Chrome injects scripts after the DOM is loaded, so you don't need to monitor that event (it will have fired before the script is injected).

Sounds like you're trying to instrument a Google instant search page, which doesn't actually trigger a new page load. You could instead try looking at the DOMSubtreeModified event on the element that changes, or write custom javascript to check if the search results have appeared. 

- Boris

--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.

--
Ask your next question on Stack Overflow, using the google-chrome-extension tag.

[Ming]

Thanks for the reply Boris.

Here is the extension I published if seeing it will help make the
problem clear:

https://chrome.google.com/webstore/detail/idehdamjoncmdkpcefcgjeellmcdlide?hc=search&hcp=main

The extension does indeed modify the instant results page but the
fixed part--the search box elements--that should be static.

What I want to test for is "when the search box elements are
published" to inject my scripts. I figured that should happen by
run_at document_end or document_idle but that doesn't seem to be the
case. There is something complex going on behind the scenes that I
don't understand. Even Google's own "Advanced Search" link under the
big blue search button doesn't appear all the time.

-Ming

> > To post to this group, send email to chromium-extensi...@chromium.org.

> > To unsubscribe from this group, send email to

> > chromium-extensions+unsubscr...@chromium.org.

> > For more options, visit this group at
> >http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.
>
> --
> Ask your next question on Stack

> Overflow<http://stackoverflow.com/questions/ask>,
> using the google-chrome-extension<http://stackoverflow.com/questions/tagged/google-chrome-extension>tag.

[Ming]

I seem to have solved the problem by using setTimeout in a loop to
wait for the existence of the element.

On Oct 10, 4:33 pm, Ming <min...@gmail.com> wrote:
> Thanks for the reply Boris.
>
> Here is the extension I published if seeing it will help make the
> problem clear:
>

> https://chrome.google.com/webstore/detail/idehdamjoncmdkpcefcgjeellmc...