Dynamically loaded jQuery with GreaseMonkey inconsistent on pages (refreshing seems to fix it)... don't know why

Question

Hi, I want a custom page analysis footer on every site I visit... so I've used a method to attach JQuery to unsafeWindow.

I then create a floating footer on the page. I want to be able to call commands in a menu, do some processing, then put the results in the footer. Unfortunately it sometimes works, sometimes it doesn't.

At least two alerts should happen in the printOutput function. Sometimes it only fires one, then it (crashes?) without error? On other pages, both alerts fire and it finds the element, but it doesn't add the extra text. (e.g. www.linode.com)

Refreshing the page, then running the printOutput command again seems to always work.

Does anyone know what's going on???

The userscript can be installed at: http://www.captionwizard.com/test/page_analysis.user.js

// ==UserScript==
// @name           page_analysis
// @namespace      markspace
// @description    Page Analysis
// @include        http://*/*
// ==/UserScript==
(function() 
{
    // Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://code.jquery.com/jquery-1.4.2.min.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

    var jqueryActive = false;

    //Check if jQuery's loaded
    function GM_wait() 
    {
        if(typeof unsafeWindow.jQuery == 'undefined') 
        { window.setTimeout(GM_wait,100); }
        else 
        { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

    function letsJQuery() 
    {
        jqueryActive = true;
        setupOutputFooter();
    }

    /******************************* Analysis FOOTER Functions ******************************/ 
    function printOutput(someText)
    {
        alert('printing output');

        if($('div.analysis_footer').length)
        {
           alert('is here - appending');
           $('div.analysis_footer').append('<br>' + someText);         
        }
        else
        {
            alert('not here - trying again');
            setupOutputFooter();
            $('div.analysis_footer').append('<br>' + someText);            
        }
    }


    GM_registerMenuCommand("Test Output", testOutput, "k", "control", "k" );


    function testOutput()
    {
        printOutput('testing this');
    }           

    function setupOutputFooter()
    {    
        $('<div class="analysis_footer">Page Analysis Footer:</div>').appendTo('body');
        $('div.analysis_footer').css('position','fixed').css('bottom', '0px').css('background-color','#F8F8F8');
        $('div.analysis_footer').css('width','100%').css('color','#3B3B3B').css('font-size', '0.8em');
        $('div.analysis_footer').css('font-family', '"Myriad",Verdana,Arial,Helvetica,sans-serif').css('padding', '5px');
        $('div.analysis_footer').css('border-top', '1px solid black').css('text-align', 'left');
    }      


}());   

Answer 1

It could just be that code.jquery.com sometimes fails (or at least is very slow) to load the jQuery script. What you've done looks fine. You can also package jQuery with the userscript, with @require (thus jquery doesn't need to be requested for every page load):

// ==UserScript==
// @name          jQuery Example
// @require       http://code.jquery.com/jquery-1.4.1.min.js
// ==/UserScript==

(function() {
    // This will be executed onLoad
    // Append some text to the element with id #someText using the jQuery library.
    $("#someText").append(" more text.");
}());

read this for more information.