Adding CSS file to page with extension's init

Question

I'm reading this tutorial

That is how CSS file is loaded:

var linkTargetFinder = function () {
    return {
        init : function () {
            gBrowser.addEventListener("load", function () {     
                // ...
                }
            }, false);
        },

        run : function () {

            var head = content.document.getElementsByTagName("head")[0],
            style = content.document.getElementById("link-target-finder-style")

            if (!style) {
                style = content.document.createElement("link");
                style.id = "link-target-finder-style";
                style.type = "text/css";
                style.rel = "stylesheet";
                style.href = "chrome://linktargetfinder/skin/skin.css";
                head.appendChild(style);
            }
            // ...
        }
    };
}();
window.addEventListener("load", linkTargetFinder.init, false);

I can't understand why the CSS file can't be injected into page in init:

var linkTargetFinder = function () {
    return {
        init : function () {
            gBrowser.addEventListener("load", function () {
                var head = content.document.getElementsByTagName("head")[0]

                style = content.document.createElement("link");
                style.id = "link-target-finder-style";
                style.type = "text/css";
                style.rel = "stylesheet";
                style.href = "chrome://linktargetfinder/skin/skin.css";
                head.appendChild(style);

                // ...
                }
            }, false);
        },

        run : function () {
            // ...
        }
    };
}();
window.addEventListener("load", linkTargetFinder.init, false);

Styles just don't work in this case.
Why can't it be placed in init?

Answer 1

Looks reasonable but for the gBrowser event use DOMContentLoaded not load.