Run a chrome extesions content script before page draw

Question

I am developing a chrome extensions that expands upon a site (adding additional menu items and whatnot). I want the content script to run before the DOM is drawn, otherwise the user sees the content pop in in a rather notable way.

I've set up the run_at in the manifest, and it will load before its drawn using document_start, problem is I need access to the DOM, and that fires before it's there.

Maybe a simpler way to put it is I am looking for a way to modify the dom after it is loaded (or a specific part of it is loaded) but before it is rendered.

Answer 1

Your script could listen for DomContentLoaded event then operate with loaded DOM. See examples how to create such event handler.

Answer 2

A possible idea would be to use JQuery hover so the menu would be invisible unless they hover over a certain DOM element?

This guy on YouTube is really smart, you might find his slide animation tutorial useful:

http://www.youtube.com/watch?v=WKf6i4VspF0

Answer 3

Trying to squeeze into the gap between receiving the DOM node and it being rendered is probably hopeless.

One possible solution is to add a full-page overlay (pure opaque white, or something more informative, like "Loading") on document_start to mask the page while DOM loads, and then insert your DOM in $(document).ready() followed by removal of the overlay.