How to load jQuery UI CSS In Greasemonkey

// ==UserScript==
// @name           Test
// @namespace
// @description    jquery-ui-1.6rc6 Resource Include Test
// @include        *
// @resource       jQuery     
// @resource       jQueryUI   
// @resource       jQueryUICSS
// @resource    ui-bg_diagonals-thick_18_b81900_40x40.png
// @resource    ui-bg_glass_100_f6f6f6_1x400.png      
// @resource    ui-bg_diagonals-thick_20_666666_40x40.png
// @resource    ui-bg_glass_65_ffffff_1x400.png       
// @resource    ui-bg_gloss-wave_35_f6a828_500x100.png
// @resource    ui-icons_222222_256x240.png           
// @resource    ui-bg_flat_10_000000_40x100.png       
// @resource    ui-icons_ef8c08_256x240.png           
// @resource    ui-icons_ffd27a_256x240.png           
// @resource    ui-bg_glass_100_fdf5ce_1x400.png      
// @resource    ui-icons_228ef1_256x240.png           
// @resource    ui-icons_ffffff_256x240.png           
// @resource    ui-bg_highlight-soft_75_ffe45c_1x100.png
// @resource    ui-bg_highlight-soft_100_eeeeee_1x100.png
// ==/UserScript==

// Inject jQuery into page... gross hack... for now...
(function() {
  var head = document.getElementsByTagName('head')[0];

  var script = document.createElement('script');
  script.type = 'text/javascript';

  var jQuery = GM_getResourceText('jQuery');
  var jQueryUI = GM_getResourceText('jQueryUI');

  script.innerHTML = jQuery + jQueryUI;

  $ = unsafeWindow.$;

// Load UI Styles
(function() {
    var resources = {
      'ui-bg_diagonals-thick_18_b81900_40x40.png': GM_getResourceURL('ui-bg_diagonals-thick_18_b81900_40x40.png'),
      'ui-bg_glass_100_f6f6f6_1x400.png': GM_getResourceURL('ui-bg_glass_100_f6f6f6_1x400.png'),
      'ui-bg_diagonals-thick_20_666666_40x40.png': GM_getResourceURL('ui-bg_diagonals-thick_20_666666_40x40.png'),
      'ui-bg_glass_65_ffffff_1x400.png': GM_getResourceURL('ui-bg_glass_65_ffffff_1x400.png'),
      'ui-bg_gloss-wave_35_f6a828_500x100.png': GM_getResourceURL('ui-bg_gloss-wave_35_f6a828_500x100.png'),
      'ui-icons_222222_256x240.png': GM_getResourceURL('ui-icons_222222_256x240.png'),
      'ui-bg_flat_10_000000_40x100.png': GM_getResourceURL('ui-bg_flat_10_000000_40x100.png'),
      'ui-icons_ef8c08_256x240.png': GM_getResourceURL('ui-icons_ef8c08_256x240.png'),
      'ui-icons_ffd27a_256x240.png': GM_getResourceURL('ui-icons_ffd27a_256x240.png'),
      'ui-bg_glass_100_fdf5ce_1x400.png': GM_getResourceURL('ui-bg_glass_100_fdf5ce_1x400.png'),
      'ui-icons_228ef1_256x240.png': GM_getResourceURL('ui-icons_228ef1_256x240.png'),
      'ui-icons_ffffff_256x240.png': GM_getResourceURL('ui-icons_ffffff_256x240.png'),
      'ui-bg_highlight-soft_75_ffe45c_1x100.png': GM_getResourceURL('ui-bg_highlight-soft_75_ffe45c_1x100.png'),
      'ui-bg_highlight-soft_100_eeeeee_1x100.png': GM_getResourceURL('ui-bg_highlight-soft_100_eeeeee_1x100.png')

    var head = document.getElementsByTagName('head')[0];

    var style = document.createElement('style');
    style.type = 'text/css';

    var css = GM_getResourceText ('jQueryUICSS');
    $.each(resources, function(resourceName, resourceUrl) {
      console.log(resourceName + ': ' + resourceUrl);
      css = css.replace( 'images/' + resourceName, resourceUrl);

    style.innerHTML = css;

This technique works whether or not you inject or @require the jQuery js libraries.

The drawback to injecting jQuery is that it is forced to run in the unsafe window context which doesn’t allow you to use GM_* methods in callbacks (this make $.each pretty weak). Also, it breaks pages that define the $ function, but I believe this can be avoided by telling jQuery not to interfere and you can set $ as the local alias within your GM script zone (if that makes any sense).

The drawback of using require is that the UI classes throw exceptions (at least on version 1.6rc6). The dialogs display ok, but you need to catch the exceptions they throw. Also, they throw an exception when you try and drag. I’m pretty sure that it has to do with XPCNativeWrapper. One day UI will be easy in Greasemonkey… one day… Until then this should get you part way there.

The @resource technique works for more than just jQueryUI, use it for your own css and images, at least until jQuery UI gets fixed.

Author: Daniel X

Heretic priest of the Machine God. I enjoy crawling around in Jeff Bezo's spaceship, bringing technology to the people, and long walks outside of time and space.

One thought on “How to load jQuery UI CSS In Greasemonkey”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s