Dive Into Greasemonkey

bookburro

I don’t think “nuisance breeds innovation” was ever a common phrase, but that is exactly how greasemonkey, the firefox extension, came into life. Greasemonkey lets users add their own scripts to web pages they visit. Yeah, I didn’t really jump out my seat when I heard that in January, but then I started to see people apply it. Sure there’s the standard “remove all advertising” hacks and the slightly more interesting “skip full ad pages”, but there is so much more you can do. You can beat stupidly designed web pages into submission: force Ain’t It Cool News headlines to use reasonable font sizes and turn off that stupid highlighting crap, clean up Slashdot’s ugly section colors, replace Pitchfork’s flash menu with text links. Greasemonkey can do so much more though. It can be used to combine the information of multiple sites like some sort of magical duct tape (not that duct tape isn’t already magical). Check out the screenshot of Book Burro above. You can also imbed information from IMDB into your Netflix pages or vice versa. Of course all of this rampant page modification hasn’t gone unnoticed. Greasemonkey and its scripts are really easy to install (falling down the stairs level of ease). So, there is no reason not to try it out. Check out the excellent free online book Dive Into Greasemonkey to get started.

Comments

  1. werejag says:

    this website is going to shit i see now we are posting software.

    where is the damn beef…. err hacks

  2. Tyler singer says:

    Actualy I would rate this as a hack. It isn’t just software. If you have a beef about a webpage this gives you the chance to fix it up the way you want.

    No complaints at all, this is the first time I’ve seen greasemonkey, and I freakin’ love it! Thank you hackaday.com!

  3. Alex says:

    uh…software can definately be a hack.

  4. ikkaruss says:

    agreed

  5. xenodious says:

    I haven’t used this, but it sounds quite a bit like The Proxomitron.

    http://www.proxomitron.info/index.html

    It’s a great litle program, allowing you to modify your entire browsing experience. You can change headers, requests, and you can filter anything. The scripting language is a litle weird at first, but once you get the hang of it, hacking up webpages is a snap.

  6. barbobot says:

    Yeah the only reason I would think this is a hack is because this is a clever way to get around a problem.

  7. werejag says:

    wow! what next google rated as a hack

  8. xcham says:

    google is a hack omgwtfbbq

  9. Wow, I might actually be able to stay at Ain’t It Cool News long enough to figure out what it is. Yaay.

    Right now I’m trying to write a script that takes away the lower-case attrubute on this site. :D

  10. Matt says:

    “to use reasonable font sizes and turn off that *stupid highlighting crap*” Just something to consider; hover your mouse over your headlines sometime.

  11. skidx says:

    I can do this with a favorite in IE.
    1. Just change the URL of a favorite to this:
    javascript:window.alert(window.setTimeout(‘script1=document.createElement(‘script’);script1.src=’YOURSCRIPTURLGOESHERE';document.getElementsByTagName(‘head’)[0].appendChild(script1)’,200));

    2. Change YOURSCRIPTURLGOESHERE to the location of your script.

    3. Ignore the warning when you click ok.

    4. Goto a page and click the favorite

    5. click ok on the alert (got to be there)

    6. your script is now embeded into the page.

    Should this be a hack of the day I should post?

    I usally use “document.onkeypress = YOURFUNCTIONNAME” to execute stuff on the page. Mostly I use it for my debugger script that creates a floatable window on the page that show object current values. I would give you the url to mine, but its on my lonely box and I know you would pound it hard (wimper). But here is a link to an older version I posted in the newgroups:

    http://groups-beta.google.com/group/comp.lang.javascript/browse_thread/thread/47c28ff7965e9da7/48b1c9f12be464f3?q=kewl+debugger+script&rnum=1&hl=en&auth=DQAAAHAAAABwPhZ2uUXO6S8jUtSwt495apV94E2ftZap4Xs_YW5qvULb9pR29cMSEEopH3bEN2Kj99ayEHsski4qjg5kdF-Fqe1mGrmIt__rQWbOWHBRhs9sHSzEmbVkIZby6m0ziDJVoS08E44AbOyInMhXFnlD

  12. skidx says:

    It lowercased everthing, so it will not work as posted. Lets try one more time.

    Here is is again with a “?” in front of every char that needs to be a capital. Understand?

    javascript:window.alert(window.set?timeout(‘script1=document.create?element(‘script’);script1.src=’yourscripturlgoeshere';document.get?elements?by?tag?name(‘head’)[0].append?child(script1)’,200));

    Be sure to remove the “?” also. :)

  13. Josh, You could just capitalize everything ;-). I don’t know how far you’ve gotten on your script, but I think if you cut out the main column and replace it with the text from the RSS feed (since it is capitalized) you’d be off to a good start. That wouldn’t fix the commenting. It is a start though. Of course skipping the rendering engine entirely might be the best move if possible.

  14. I did it in about 10-15 min’s. I think it just applies a CSS class over the site that counteracts the one from the one that makes things lower-case. Seems to work fine but it’s hard to tell because about half the text here was written in lower-case in the first place. The main part of the code (without the comments, etc.) looks like:

    // ==UserScript==
    // @name Caps for Hackaday
    // @namespace http://wholesomecoolness.keenspace.com
    // @description Hopefully a script that gets rid of that pesky lower-case on hackaday.com. :P
    // @include http://*.hackaday.com/*
    // ==/UserScript==

    function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName(‘head’)[0];
    if (!head) { return; }
    style = document.createElement(‘style’);
    style.type = ‘text/css';
    style.innerHTML = css;
    head.appendChild(style);
    }

    addGlobalStyle(‘p { text-transform: none ! important; }’);

    I don’t know what a lot of the javascript means *exactly*, but as far as I can tell it just applies a new class on top of everything. It’s a good thing that e-book had example code. :P This could probably be done much more elegantly.

  15. Wow, nice job. It works great. The story titles still don’t capitalize though. Of course I’m going to have to turn this thing off to see it how everyone else does ;-). I was suprised that when I cut and pasted your code the capitalization was correct. i.e. addglobalstyle had the capital G and S. Once again, great job!

  16. PARARDOX says:

    i have been having some trouble with fire fox just opening at random times and i didn’t even click on it. i dont think its a pop up becasue the page its on when it pops up is the mozzila home page. do you guys think greasemonkey can help me with this?

  17. Bifurcatonix says:

    This is about on par with proxomitron. It’s perhaps better as it’s not as annoying as a loopback proxy. Having not made the comparison myself I couldn’t claim with certainty that it seems that using FX+proxomitron uses fewer resources that FX+GM. Since pages arrive at FX tweaked from proxomitron and pages arrive at FX and then are tweaked by GM then rendered it seems I might be right.

    Promimodo at SourceForge is the reincarnation of proxomitron after the death of Scott Lemon.

    If GreaseMonkey is too much for you too handle there’s now a shiny happy “front end” for it in

    http://Platypus.mozdev.org

    Admittedly you’ll sacrafice alot of power for point and click simplity of Ardvark ;) But it has a few advantages over RIP

    http://rip.mozdev.org

    cheers all and death to liberalism

  18. Polobunny says:

    Haha, great script there Josh. =)

  19. Amos says:

    BUMP!

    Josh: Just use an asterisk (*) for a selector instead of (p)aragraph when you call addGlobalStyle:

    addGlobalStyle(‘* { text-transform: none !important; }’);

    (Yes, I recently learned about the wildcard selector, too ;)

    This is what I use in my user style-sheet in Opera to hack hack-a-day (No plug-in required ;)

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 93,723 other followers