Question

I’m trying to get the following bookmark to act as a Greasemonkey script to work around an accessibility bug with the stackexchange sites.

javascript:(function(){$('a,%20.vote-up-off,%20.vote-down-off,%20.star-off').attr({role:'link',tabindex:'0'});})()

When I remove the function() and put it in the following Greasemonkey script it does not work.

// ==UserScript==
// @name           StackExchange access
// @description    Enables y-aria stuff on stackoverflow
// @include *
// ==/UserScript==
$('a,%20.vote-up-off,%20.vote-down-off,%20.star-off').attr({role:'link',tabindex:'0'});
alert("worldzz");

I’m guessing that I need to access the document object somehow from Greasemonkey but am not sure how to do this.

I know the script is getting called because if I comment out the $('a,%20.vote-up-off,%20.vote-down-off,%20.star-off').attr({role:'link',tabindex:'0'}) line my alert gets hit.

Answer 1

1. A greasemonkey script will not have access to jQuery directly. Greasemonkey sandboxes the script into its own scope so anything you need to access in the page’s global scope (like jQuery) has to be accessed via window.wrappedJSObject
2. You need to replace all %20 in your Greasemonkey version with a space char
3. You need to put the jQuery DOM manipulation in the ready function so that it doesn’t run until the elements are on screen.

Code:

// ==UserScript==
// @name           StackExchange access
// @description    Enables y-aria stuff on stackoverflow
// @include *
// ==/UserScript==
( function( global )
{
    var $;

    if( global.jQuery )
    {
        $ = global.jQuery;

        $( function()
        {
            $( 'a, .vote-up-off, .vote-down-off, .star-off' )
                .attr( {
                    role:'link',
                    tabindex:'0'
                } );
        } );
    }
}( window.wrappedJSObject ) );