How to implement “DOM Ready” event in a GreaseMonkey script?

Question

I'm trying to modify my GreaseMonkey script from firing on window.onload to window.DOMContentLoaded, but this event never fires.

I'm using FireFox 2.0.0.16 / GreaseMonkey 0.8.20080609

This is the full script that I'm trying to modify, changing:

window.addEventListener ("load", doStuff, false);

to

window.addEventListener ("DOMContentLoaded", doStuff, false);

Answer 1

So I googled greasemonkey dom ready and the first result seemed to say that the greasemonkey script is actually running at "DOM ready" so you just need to remove the onload call and run the script straight away.

I removed the window.addEventListener ("load", function() { and }, false); wrapping and it worked perfectly. It's much more responsive this way, the page appears straight away with your script applied to it and all the unseen questions highlighted, no flicker at all. And there was much rejoicing.... yea.

Answer 2

GreaseMonkey scripts are themselves executed on DOMContentLoaded, so it's unnecessary to add a load event handler - just have your script do whatever it needs to to immediately.

http://wiki.greasespot.net/DOMContentLoaded

Answer 3

@Sam: yeah, I was trying the same:

// ==UserScript==
// @name           Stack Overflow highlight viewed questions
// @namespace      *
// @include        http://stackoverflow.com/questions
// @include        http://stackoverflow.com/questions?*
// @include        http://stackoverflow.com/questions
// @include        http://stackoverflow.com/questions?*
// @version        0.55 (DOM-Ready instead of onload)
// ==/UserScript==

(function() {

    // Customizable items
    // var fav_tags = ["python", "database", "mysql"];          // Your favorite tags
    const UNSEEN_BACK_COLOR = "rgb(225,210,210)";     // Backcolor for the question already seen
    const FAV_TAG_BACK_COLOR = "rgb(210,210,225)";  // Backcolor for the favorite tags

    // Internal to the DOM
    // const QUESTION_URL = "http:\/\/stackoverflow.com\/questions\/([0-9]+)\/";
    const QUESTION_URL = "http:\/\/stackoverflow.com\/questions\/([0-9]+)\/";
    const TAG_PREFIX = "show questions tagged ";

    const SEEN_MARK = "x";
    //

    var seen_q = [];
    var seen_q_str = "";

    var seen_q_str = GM_getValue ("seen_q", "");
    var seen_q = seen_q_str.split("|");

    var fav_tags_str = GM_getValue ("fav_tags", "")
    var fav_tags = fav_tags_str.split(" ")

    var already_run = false;

    GM_registerMenuCommand ("Set favorite tags", askTags);

    // window.addEventListener ("DOMContentLoaded", doStuff, false);
    if (! doStuff()) {
        window.addEventListener ("load", doStuff, false);
    }

    function doStuff() {

        var elements = window.document.getElementsByTagName('A');

        if (! elements || already_run) {
            return false;
        } else {
            already_run = true;
        }

        GM_log ("here");

        for (elem = 0; elem < elements.length; elem++) {
            if (elements[elem].href.match (QUESTION_URL)) {
                curr_q = RegExp.$1;

                // Already seen?
                if ((seen_q.length < curr_q) || (seen_q [curr_q] != SEEN_MARK)) {
                    elements[elem].style.backgroundColor = UNSEEN_BACK_COLOR;
                    seen_q [curr_q] = SEEN_MARK;
                }

                // Is a favorite tag?
                node = elements[elem].parentNode.parentNode;
                for (tag = 0; tag <= fav_tags.length; tag++) {
                    if (node.innerHTML.match ("'" + fav_tags[tag] + "'")) {
                        node.style.backgroundColor = FAV_TAG_BACK_COLOR;
                        break;
                    }
                }

                // return (0);
            }
        }

        seen_q_str = seen_q.join("|");
        GM_setValue ("seen_q", seen_q_str);

        return true;
    }


    function askTags() {
        fav_tags_str = prompt("Favorite tags (separated by spaces)", fav_tags_str);
        GM_setValue ("fav_tags", fav_tags_str)
    }

})();