how to run greasemonkey script before the page content is displayed?

Question

I am writing a plug-in for Firefox and using greasemonkey script to do that (I compile the user script using this tool http://arantius.com/misc/greasemonkey/script-compiler)

Answer 1

Using the @run-at document-start as suggested in the answer by @kwah my script executed before the content I wanted to manipulate was in the document body. As a work-around I set up an interval running my script 5 times/second until document.readyState == "complete" (or until 20 seconds have passed).

This worked well for my case:

// ==UserScript==
// ...
// @run-at      document-start
// ==/UserScript==

var greasemonkeyInterval = setInterval(greasemonkey, 200);
var greasemonkeyStart = (new Date()).getTime();

function greasemonkey() {

    // ...

    // waiting for readyState (or timeout)
    if (
        (new Date()).getTime() - greasemonkeyStart > 20000
        || document.readyState == "complete"
    ) {
        clearInterval(greasemonkeyInterval);
    }

};

If you're more sure about that the content will be there at documentready I think something like this would be more preferable:

function greasemonkey() {

    if (
        document.readyState != "interactive"
        && document.readyState != "complete"
    ) {
        return;
    }

    // ...

    clearInterval(greasemonkeyInterval);

}

Answer 2

EDIT: This post was created prior to the implementation of the @run-at key in Greasemonkey - as noted by Blaise, from Greasemonkey 0.9.8 you may now have the script executed as soon as the page begins to load.

@run-at document-start is described in the wiki as follows:

Start is new as of version 0.9.8. The script will run before any document begins loading, thus before any scripts run or images load.

Note that this means having the script run (potentially) prior to the creation of the DOM and may lead to some inconsistent/unusual behaviour. You will need (a little) more than just this one-line drop-in.

There are a few more details over at the Greasemonkey Wiki: http://wiki.greasespot.net/Metadata_Block#.40run-at

Side-note: The information I have to hand is specifically related to Greasemonkey in the browser. I am unsure whether @run-at document-start works well with the script compiler - I suggest living dangerously.. Test it and find out! ;]

---

---

It is not currently possible to run a user script before the page loads.

To stop the flicker using current versions of Greasemonkey, you could try adding a user-style to your Firefox profile (which is then undone using the script) as described at the Greasemonkey wiki but this would also require each of your users to do the same to benefit from this.

It is something that has been desired for a long time and looking through issue #1103 on Greasemonkey's Github site, a working prototype appears to have been made (but there is no timescale for this to be added to a release version afaik).

Answer 3

In addition to the previous answers I've found a solution that works flawlessly, just like previous versions of Firefox & GreaseMonkey. First off, run-at must be set to the earliest moment, so document-start:

// @run-at      document-start

Because the DOM is probably not loaded yet, wait for the document to get a readyState of interactive:

document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
       // Do something
    }
}

While Greasemonkey implements more or less the same with document-end, I've noticed that the technique above works faster. Using this has resolved all issues I had in Firefox with flashing / jumping screens on pages when the DOM changes kicked in and directly loads the page as intended with the userscript.