BayCHI 5/11/2010 Greasemonkey Intro

You Will Need:
• Firefox: firefox.com
• Firebug: getfirebug.com
• Greasemonkey: greasespot.net
• Resources here:
kentbrewster.com/baychi

Stone Knives, Bear Skins, and
Greasemonkey:

Tools for Tearing Down the Walls
between Engineering and Design

Kent Brewster
http://kentbrewster.com
@kentbrew, most places

http://kentbrewster.com/baychi

But ﬁrst, it's time to
play America's favorite
game show....


Disclaimerama!


Disclaimerama!

• About Me


Disclaimerama!

• About Me
• About My Relationship with Netﬂix


Disclaimerama!

• About Me
• About My Relationship with Netﬂix
• About the Code


About Me


About Me
• No formal education in computer science.


About Me
• No degree of any sort, actually.


About Me
• Got my start programming in BASIC on a
TRS-80 in 1977.


About Me
TRS-80 in 1977.
• Prototyped the Yahoo! front page in 2008.


About Me
TRS-80 in 1977.
• Prototyped the Yahoo! front page in 2008.
• Living proof that just about anybody can do
this stuff.

About Me and Netﬂix


• None of what I'm about to show is ofﬁcial
content or opinion, nor will I address
questions about Netﬂix. That said....


• Yeah, it's awesome. If you want to know
more, visit netflix.com/jobs


• Yeah, it's awesome. If you want to know
more, visit netflix.com/jobs

• Do watch that 128-slide corporate culture
presentation. They are dead serious about
every single page.

About the Code


About the Code

• Not great JavaScript examples.


About the Code

• Not great Greasemonkey examples, either.


About the Code

• They don't have to be great.


About the Code

• They don't have to be great.
• All they have to do is run once, for the
right person.


What We Already
Know About
Prototyping


What We Already
Know About
Prototyping
• Working prototypes work best.


What We Already
Know About
Prototyping
• It's very hard to get the experience right.


What We Already
Know About
Prototyping
• It's expensive. Really, really expensive.


What We Already
Know About
Prototyping
• It's expensive. Really, really expensive.
• You throw it away when you're done.

About Engineers


About Engineers
• They already know why what you're asking
for is impossible, and are already frustrated
that you're not listening to them when they
explain why. (Yes, they already know
everything. That's why they are engineers.)


About Engineers
• They already know why what you're asking
for is impossible, and are already frustrated
that you're not listening to them when they
explain why. (Yes, they already know
everything. That's why they are engineers.)
• If they build prototypes for too long, it will
make them crazy. They will burn out and
go someplace their work lasts longer and is
seen by more people.

How Designers
See Engineers


How Designers
See Engineers
• Flinchy.


How Designers
See Engineers
• Flinchy.
• Hypersensitive to deadlines.


How Designers
See Engineers
• Flinchy.
• Full of reasons why it cannot be done.


How Designers
See Engineers
• Flinchy.
• Full of reasons why it cannot be done.
• Full of reasons why it should not be done.


How Engineers
See Designers


How Engineers
See Designers
• Flighty.


How Engineers
See Designers
• Flighty.
• Unable to understand the concept that
time continues to progress at the rate of
one second per second, no matter what.


How Engineers
See Designers
• Flighty.
• Unable to understand the concept that
time continues to progress at the rate of
one second per second, no matter what.
• Full of reasons why it has to be done even
though it cannot (and should not, dammit!)
be done.

Tearing Down the Wall


• Involve your engineers early.


• Ask for help before the important choices
have already been made.


• Please don't ask for the logo to spin and be
on ﬁre.


• Please don't ask for the logo to spin and be
on ﬁre.
• Other non-starters: IE6 support for
rounded corners, drop shadows, and PNG
transparency. Don't even go there.

Plan B: Do It Yourself


• If what you are looking for is an
incremental change, try building it.


• It will work well enough to show to your
boss, or to a user test group.


• It will work well enough to show to your
boss, or to a user test group.
• When you show it to an engineer, she will
be impressed with your commitment and
initiative, and much more likely to want to
help out when the project gets real.

Strategy


Strategy
• Bring up the page in your browser.
• After it renders, make changes to the
structure, presentation, and behavior.
• Do this by injecting JavaScript into the
browser.
• For best results, do this automatically
when the page loads.


JavaScript Injection


• from the console:
javascript:alert('ding');


• with a toolbar bookmarklet


• with a toolbar bookmarklet
• with a scripting tool, such as Greasemonkey


Toolbar Bookmarklets


• limited in size (~2000 characters)


• tricky to set up for installation


• hard to debug


• hard to debug
• very powerful: can include foreign scripts


• hard to debug
• very powerful: can include foreign scripts
• have to be installed, managed, and manually
clicked with every page load


Bookmarklet Examples
<a href="javascript:alert('ding');">Annoy Me</a>

<a href="javascript:(function(){var
%20a=document.getElementsByTagName('A');for(i=0;i<a
.length;i++){a[i].style.color='#f00';}})();">Turn
My Links Red</a>

<a href="javascript:(function(){var
%20t=document.getElementsByTagName('TITLE')
[0];t.textContent='HACKED! '+t.textContent;})
();">Hack My Title</a>


Greasemonkey Scripts


• Do exactly what toolbar bookmarklets do:
modify the page after it's loaded.


• Can be much more complex; have local
storage and a robust API.


• Have a much better development
environment, right there in Firefox.


• Have a much better development
environment, right there in Firefox.
• Work automatically, with every page load.

Fixing Your Editor


Fixing Your Editor
• Enter about:config


Fixing Your Editor
• Reassure Firefox that you know what
you're doing.


Fixing Your Editor
you're doing.
• Enter greasemonkey in Filter.


Fixing Your Editor
you're doing.
• Enter greasemonkey in Filter.
• Click greasemonkey.editor and pick
your favored editor. I'll be using TextMate
tonight.

Load Your Script
• Go back to kentbrewster.com/baychi

Load Your Script
• Make sure Greasemonkey is running. (You
should see a smiling brown monkey, not a
constipated-looking gray monkey).

Load Your Script

• Click the view raw link at the bottom of
the page after the script listing, and then
Install in the Greasemonkey add box.

Load Your Script

• Click the view raw link at the bottom of
the page after the script listing, and then
Install in the Greasemonkey add box.
• Go to twitter.com and see if you notice
anything different.

Edit Your Script


Edit Your Script
• Right-click the monkey at the bottom of
your page.


Edit Your Script
your page.
• Choose Manage User Scripts


Edit Your Script
your page.
• Monkeying with Twitter should be
highlighted; if it isn't, click it.


Edit Your Script
your page.
• Click the Edit button at the bottom left.
Your editor should launch.


Edit Your Script
your page.
• Click the Edit button at the bottom left.
Your editor should launch.
• Make changes, save, and reload the page.

Intermission

(In which much hacking occurs.)


Sharing Your Scripts


• In your editor, do Save As


• Name your script yourfile.user.js


• Save it to your desktop.


• Save it to your desktop.
• To install somewhere else, make sure
Greasemonkey is enabled and drag it into
the browser.


All Done?


All Done?

• Don't forget to disable Greasemonkey. Do
this by clicking the little brown monkey-
face and making it turn gray.


All Done?

• Don't forget to disable Greasemonkey. Do
this by clicking the little brown monkey-
face and making it turn gray.
• Or, maybe you want to leave him running.
Find more monkey-powered awesomeness
at userscripts.org


BayCHI 5/11/2010 Greasemonkey Intro

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

BayCHI 5/11/2010 Greasemonkey Intro

Editor's Notes