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($('STRd6'))
  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.

What a drag: cancelling with onStart

So in this awesome new web application that I am writing I’ve got this totally sweet window/widget/bazfoo system where users can drag stuff around and it will remember the positions. This is all with Ruby on Rails and Prototype and Scriptaculous, and although the specifics are pretty Scriptaculous specific the generalities can apply to you favorite framework, unless it is … well they could probably apply.

Generally the UI doesn’t care what users want to drag when, but sometimes it does care. Say for example players can move stuff around in other players’ houses (to make it look like a ghost was there or something). This is very cool. Problem: what about not dragging things when not in ‘move-stuff-around-like-a-ghost’ mode? Perhaps there should only be one mode and things can always be moved around like a ghost, but even then, based on context, it seems that you might just not want the player to move stuff sometimes. I didn’t. Even though ‘rampant-ghost’ was the only mode I had so far I could envision wanting to drag an area-of-effect-spell-deployment or power meter or anything else without worrying about dragging the furniture.

So I had to sometimes cancel dragging like some companies sometimes cancel bonuses, but unlike those companies I decided to cancel during the onStart callback, not the somewhereInTheMiddleGodKnowsWhy callback. Scriptaculous provides a convenient hook to onStart (but surprisingly lacks one to halfwayThereButSimultaneoslyCutYourPay. They don’t have it? I know, it’s silly!). So lets just throw some code down to keep it real:

function drag_start(draggable, event) {
  draggable.element.should_revert = true;

  if($current_action == null || $current_action.id != "ghost_party_action") {
    draggable.finishDrag(event, false);
  }
}

This is a pretty simple function, really standard, we have all our draggables sign it. First tell the element that it should revert unless it hears otherwise. Then check the $current_action (the $ lets me know I’m using it as a global, just like Ruby). If the current action doesn’t exist or it’s not the one where the ghosts party, then finish it off like Houchen. Great. Except, it still kind of drags and gets all weird. I could have sworn I was using the onStart callback, not the getWeirdAnyway callback… too bad.

So time to dive into Scriptaculous, source code that is! The file is dragdrop.js, the year 2008, film Noir has lost popularity in recent years but is still present in the minds of… The functions of interest are:

  updateDrag: function(event, pointer) {
    if(!this.dragging) this.startDrag(event);
    // ... Lots more omitted
  }

  startDrag: function(event) {
    this.dragging = true;
    // ... Lots of setup, initialization ...

    // Bingo!
    Draggables.notify('onStart', this, event);

    if(this.options.starteffect) this.options.starteffect(this.element);
  },

updateDrag gets called first when the user wiggles that mouse over the element. updateDrag then calls startDrag, which then calls your callback, which then ends the drag, but updateDrag is still in the dark, so let’s enlighten it:

  updateDrag: function(event, pointer) {
    if(!this.dragging) this.startDrag(event);
    // Added part
    if(!this.dragging) {
      Event.stop(event);
      return;
    }

    // Lots more stuff stays the same
  }

See what happened there? updateDrag wasn’t expecting the drag to end so soon after it got started! Now it knows, let that be a lesson. This keeps it from going all loosey goosey everywhere.

Now that is how you cancel a drag with onStart. Leave a comment, it will probably be at least as cool as the UK lottery comment. Also subscribe to my RSS and tell a friend, it’s like twice a month that I publish anything and then you can just scroll past it in Google Reader to get back to your 300 unread TechCrunch posts. Peace!