jQuery Selector Tester

The latest release in an ongoing bender of Greasemonkey scripts involving jQuery: the jQuery Selector Tester!

Highlighting all li elements

Highlighting all li elements

This little guy will hang out on your internet and highlight all the elements that match the selectors you type in. Indispensible for development! It doesn’t remember where you leave it on the page yet so it’s probably easiest to turn on only when needed.

Highlighting all anchors that are descendants of h3

Highlighting all anchors that are descendants of h3

Find some more of my jQuery Greasemonkey scripts here. They are sometimes ahead and sometimes behind what I post on the blog.

Introducing: Speakeasy.js – It’s kind of like ActiveResource

During this Greasemonkey bender I’m on I wanted to get a cleaner interface for working with GM_xmlhttpRequest. I’m using a resourceful style Rails app to serve up my data so I jimmied up this little library to handle my data storage, update, and retrieval needs. This requires jQuery and is designed to be included in a Greasemonkey script. Example to follow.

/*
  Speakeasy.js 
  Version: 0.1.0
  It's kind of like ActiveResource
  Copyright (c) 2009, STRd6 (http://strd6.com)  
  Liscensed under the MIT License 
 
  Prerequisites: 
    Greasemonkey Environment
    jQuery
*/
 
/**
  Speakeasy abstracts the GM_xmlhttprequest and handles communication with the remote script server.
  It's kind of like ActiveResource
 */
Speakeasy = function($) {
  var baseUrl = 'http://localhost:3000/';
  var apiKey = 0;
 
  function generateArrayDataTransfer(objectType, callback) {
    return function(responseData) {
      var dataArray = eval('(' + responseData + ')');
      var elements = $.map(dataArray, function(element) {
        return element[objectType];
      });
      callback(elements);
    };
  }
 
  function generateDataTransfer(objectType, callback) {
    return function(responseData) {
      var data = eval('(' + responseData + ')');
      callback(data[objectType]);
    };
  }
 
  function loadOptionsData(type, dataObject) {
    var optionsData = {
      api_key: apiKey
    };
 
    $.each(dataObject, function(field, value) {
      log(field + ': ' + value)
      optionsData[type + '[' + field +']'] = value;
    });
    return optionsData;
  }
 
  function makeRequest(resource, options) {
    var method = options.method || 'GET';
    var url = baseUrl + resource + '.js';
    var headers = {
      'User-agent': 'Mozilla/4.0 (compatible) Greasemonkey',
      'Accept': 'application/json,application/atom+xml,application/xml,text/xml'
    };
    var data = $.param(options.data || '');
    var onSuccess = options.onSuccess || (function(){});
 
    if(method == 'POST') {
      headers['Content-type'] = 'application/x-www-form-urlencoded';
    } else if(method == 'GET') {
      if(data) {
        url += '?' + data;
      }
    }
 
    GM_xmlhttpRequest({
      method: method,
      url: url,
      headers: headers,
      data: data,
 
      onload: function(responseDetails) {
        if(responseDetails.status == 200) {
          onSuccess(responseDetails.responseText);
        } else {
          console.warn(url + ' - ' + responseDetails.status + ':nn' + responseDetails.responseText);
        }
      }
    });
  }
 
  function generateResource(type) {
    var pluralType = type + 's';
 
    var all = function() {
      return function(options, callback) {
        var dataTransfer = generateArrayDataTransfer(type, callback);
        options.onSuccess = dataTransfer;
        makeRequest(pluralType, options);
      };
    }();
 
    var create = function() {
      return function(dataObject, callback) {
        var options = {
          method: 'POST'
        };
 
        options.data = loadOptionsData(type, dataObject);
        makeRequest(pluralType, options);
      };
    }();
 
    var find = function() {
      return function(options, callback) {
        var dataTransfer = generateDataTransfer(type, callback);
        if(typeof(options) == 'number') {
          options.onSuccess = dataTransfer;
          makeRequest(pluralType + '/' + options, dataTransfer);
        } else {
          log("TODO: Non-integer find not currently supported!");
        }
      };
    }();
 
    var update = function() {
      return function(dataObject, callback) {
        var id = dataObject.id;
        var options = {
          method: 'POST'
        };
 
        options.data = loadOptionsData(type, dataObject);
        makeRequest(pluralType + '/update/' + id, options);
      };
    }();
 
    var resource = {
      all: all,
      create: create,
      find: find,
      update: update
    };
 
    return resource;
  }
 
  var self = {
    annotation: generateResource('annotation'),
    script: generateResource('script')
  };
 
  return self;
}(jQuery);

Example uses:

// ==UserScript==
// @name           Speakeasy Demo
// @namespace      http://strd6.com
// @description    Super-simple website annotations shared with all!
// @include        *
//
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
// @require     http://strd6.com/stuff/jqui/speakeasy.js
// ==/UserScript==
 
function display(annotation) {
  var id = annotation.id;
 
  $('<div />')
    .text(annotation.text)
    .addClass('annotation')
    .css({
      top: annotation.top,
      left: annotation.left
    })
    .bind('drag', function( event ) {
      $( this ).css({
        top: event.offsetY,
        left: event.offsetX
      });
    })
    .bind('dragend', function( event ) {
      Speakeasy.annotation.update({id: id, top: $(this).css('top'), left: $(this).css('left')});
    })
    .fadeTo('fast', 0.75)
    .appendTo('body');
}
 
Speakeasy.annotation.all({data: {url: currentUrl}}, function(annotations) {
  $.each(annotations, function(index, annotation) {
    display(annotation);
  });
});

Enjoy!

How to load jQuery UI CSS In Greasemonkey

// ==UserScript==
// @name           Test
// @namespace      http://strd6.com
// @description    jquery-ui-1.6rc6 Resource Include Test
// @include        *
//
// @resource       jQuery               http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
// @resource       jQueryUI             http://strd6.com/stuff/jqui/jquery-ui-personalized-1.6rc6.min.js
//
// @resource       jQueryUICSS          http://strd6.com/stuff/jqui/theme/ui.all.css
//
// @resource    ui-bg_diagonals-thick_18_b81900_40x40.png       http://strd6.com/stuff/jqui/theme/images/ui-bg_diagonals-thick_18_b81900_40x40.png
// @resource    ui-bg_glass_100_f6f6f6_1x400.png                http://strd6.com/stuff/jqui/theme/images/ui-bg_glass_100_f6f6f6_1x400.png
// @resource    ui-bg_diagonals-thick_20_666666_40x40.png       http://strd6.com/stuff/jqui/theme/images/ui-bg_diagonals-thick_20_666666_40x40.png
// @resource    ui-bg_glass_65_ffffff_1x400.png                 http://strd6.com/stuff/jqui/theme/images/ui-bg_glass_65_ffffff_1x400.png
// @resource    ui-bg_gloss-wave_35_f6a828_500x100.png          http://strd6.com/stuff/jqui/theme/images/ui-bg_gloss-wave_35_f6a828_500x100.png
// @resource    ui-icons_222222_256x240.png                     http://strd6.com/stuff/jqui/theme/images/ui-icons_222222_256x240.png
// @resource    ui-bg_flat_10_000000_40x100.png                 http://strd6.com/stuff/jqui/theme/images/ui-bg_flat_10_000000_40x100.png
// @resource    ui-icons_ef8c08_256x240.png                     http://strd6.com/stuff/jqui/theme/images/ui-icons_ef8c08_256x240.png
// @resource    ui-icons_ffd27a_256x240.png                     http://strd6.com/stuff/jqui/theme/images/ui-icons_ffd27a_256x240.png
// @resource    ui-bg_glass_100_fdf5ce_1x400.png                http://strd6.com/stuff/jqui/theme/images/ui-bg_glass_100_fdf5ce_1x400.png
// @resource    ui-icons_228ef1_256x240.png                     http://strd6.com/stuff/jqui/theme/images/ui-icons_228ef1_256x240.png
// @resource    ui-icons_ffffff_256x240.png                     http://strd6.com/stuff/jqui/theme/images/ui-icons_ffffff_256x240.png
// @resource    ui-bg_highlight-soft_75_ffe45c_1x100.png        http://strd6.com/stuff/jqui/theme/images/ui-bg_highlight-soft_75_ffe45c_1x100.png
// @resource    ui-bg_highlight-soft_100_eeeeee_1x100.png       http://strd6.com/stuff/jqui/theme/images/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;
  head.appendChild(script);
 
  $ = 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;
    head.appendChild(style);
})();

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.

I can’t stop thinking about these little yellow boxes…

I just created an Annotations spin-off of GreasyThug. This doesn’t have an interactive console, or use Gears. It does let you add comments to any web page in any location, for all the world (who have installed the script) to see.

Take a look at this page after installing it, and leave some annotations of your own.

GreasyThug – Greasemonkey, Gears and jQuery

I’ve been called a greasy thug, too. It never stops hurting. So here’s what we’re gonna do: We’re gonna grease ourselves up real good and trash that place with a baseball bat. – Homer

Presenting: GreasyThug

Here’s my problem, I want to develop Greasemonkey scripts. This doesn’t sound like a problem, but JavaScript has a certain terribleness to it, at least in its current browser implementations, and I can never go back to raw JS, NEVER. I’ve also grown accustom to having an interactive console for development and debugging, but Firebug doesn’t have access to Greasemonkey code. And another thing, shouldn’t I be able to make changes to a page, on the fly, and have them persist, without having to dig out my scripts and modify them? Shouldn’t every website be using Gears by now? Wouldn’t it be great to be able to use jQuery in your browser console on every website you go to?

Fact: GreasyThug will make all of your wildest dreams come true.

GreasyThug – Interactive JavaScript Console Features

  • Built in jQuery functionality.
  • Google Gears included.
  • A persistent command history across page reloads and browser restarts.
  • Drag and drop – remembers where you put it for each site.
  • Ability to persist micro-scripts and apply them automatically everytime you visit the page.

Warning! GreasyThug is slick (it’s the grease) and dangerous (it’s a thug). An interactive console is essentially a pipe straight into eval(). So… BE CAREFUL! If your thug becomes compromised it will be your house that gets trashed with a baseball bat. Remember, this is eval in the elevated Greasemonkey privilages context, its strength for development is also its weakness for security.

Prerequisites

Demonstration

Let’s spruce up the google search page. Maybe we should make a whole Greasemonkey user script? Nah, that’s a huge hassle now that we already have GreasyThug.

  1. Go to Google.com
  2. A “The website below wants to store information on your computer using Gears” security warning will pop up, as it will do for everydomain that you have GreasyThug enabled for. It’s not really the website using Gears, though some might eventually. Click “Allow”. (This is how the command history and micro-scripts are saved).
  3. Now let’s get cracking! Drag the interactive console to a comfortable location. (It will begin in the top left by default)greasy_thug-1
  4. Execute some JavaScript statements to get a feel for it. No need for semicolons, we’re not chumps.
  5. Now on to the cool stuff: that white background is a little bland for Valentine’s Day, let’s spice it up. Pop this into your console:
    $('body').css('background-color', '#F8A')

    greasy_thug-03 It’s beautiful! See how I can use jQuery? Neat! Also, the up arrow populates the input with my previous command.

  6. Maybe it’s not quite as good looking as I thought, probably best to stick with white… let’s just refresh and forget about this debacle. greasy_thug-04 Back to normal… but the history remembered my command in case I want to try it again.
  7. It is my strong belief that there should be a link to STRd6 right next to everyone’s email address on the Google search page. Obviously this should only be for logged in users… I can only change it for myself though…
    $('#gb nobr').prepend($('<a href="strd6.com">STRd6</a>'))
  8. But what about when I refresh… it’ll disappear and all that hard work will be gone?!? Not so good friend:
    savePrevious()

    This will store whatever command you last executed to be executed again when you return. You can save many commands. These are those micro-scripts that you’ve been hearing so much about and they are the future.greasy_thug-06

So is this the end? It is for today. Now imagine sharing micro-scripts with your friends. It’s our internet now. It just takes some elbow grease and a little thuggery.

Feature requests go in the comments.

Microsoft Loves Firefox

Today at work Sharepoint was blocking access to Internet Explorer. Something like about:protectedmodeoff. I could look into it, do some searches and figure it out. But it was just quicker to tell anyone affected to download Firefox Portable, which worked.

Another interesting feature: when connecting to the Exchange server in IE it automatically logs in to your email. Which is great until you want to log in to access a different in-box, because you can never log out… EVER! Oops, Firefox time again.

Mathematical Image Example for Ruby Quiz #191

This image was generated as an example for Ruby Quiz

This image was generated as an example for Ruby Quiz

This weeks quiz is about generating images from mathematical functions. Here is an example to see what I’m talking about.

depth: 3
red: Math.sin(Math::PI * Math.cos(Math::PI * y * x))
green: Math.sin(Math::PI * (Math.sin(Math::PI * y)) ** 3)
blue: (Math.cos(Math::PI * Math.cos(Math::PI * y))) ** 3

See the full quiz here: http://blade.nagaokaut.ac.jp/cgi-bin/scat.rb/ruby/ruby-talk/327126

Onion Eyes

The onion reminds me of my frailty. This simple vegetable brings me to tears and there is nothing I can do about it. It’s easy to forget how fragile I am. The best technology can do is to hide my vulnerability; the worst is to allow me to forget it’s truth.

Billions of years of serendipity have allowed me the grace of existence in this world. Meanwhile it is all I can do to rise slightly above the chaos, knowing the whim of chance can take it all away. I come from a long evolutionary line of stupendous bad-asses. So do onions. All the denizens of this world do. Except for the most powerful; they come from nothing, and are all around us.

The onion reminds me to strive for clarity. To persist through the fog. To try harder. I now have a delicious dinner.

i see _why, he wanted one in his book