Tampermonkey/Greasemonkey exercises

A few weeks ago I ran some tutorial sessions for Tampermonkey (and all that knowledge is transferable to Greasemonkey).

You can check them in this git repository.

There are three sets of exercises:

• beginner - 5 exercises with extremely detailed hints, appropriate even for people with no Javascript knowledge
• intermediate - same 5 exercises, except without all the hints, appropriate for people with some Javascript/DOM skills who want to learn Tampermonkey
• advanced - some more complicated ideas if you need inspiration for more

I'm not sure how useful it is without 5 minute introduction on how to install and use Tampermonkey, but give it a try.

Greasemonkey and jQuery easier than ever

Last year I wrote a short Greasemonkey tutorial, in which I explained how to use it with jQuery for some really simple scripts. Since then it became even easier, so here a few more useful scripts.

Since version 0.8 Greasemonkey has @require feature, in which your scripts can be made to depend on some external Javascript files - like jQuery. Unfortunately there are a few gotchas:

• jQuery 1.4 doesn't work with Greasemonkey, you need to use jQuery 1.3 (or keep pestering them until it's fixed)
• @require only works on installation time, you cannot use it with "New User Script..." feature, nor can you change @requires from the editor. If you simply use published scripts and don't write anything - you don't need to worry. If you write your own scripts you need to prepare something.user.js file somewhere, then open it from Firefox (copy&paste it's file path to Firefox URL bar, then click Install).

Show spoilers on tvtropes

Let's start with something really trivial. I don't care about spoilers. Maybe 1% of "spoilers" significantly diminish viewing pleasure, vast majority of them do not. I knew that Vader is Luke's father, that Snape killed Dumbledore, and that Titanic sunk before watching/reading, and it made it no less enjoyable.


On the other hand I'm quite annoyed that to read tvtropes I needed to constantly select "spoiler" text for everything to see it - but no more. This trivial script solves it entirely:

// ==UserScript==
// @name           Show all spoilers on tvtropes
// @namespace      http://t-a-w.blogspot.com/
// @include        http://tvtropes.org/*
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

$(".spoiler").removeClass('spoiler');

It's really simple - @name is unique name for the script, which should really be a very short description. We're not going to rely on @namespace at all, so put anything you feel like there.


@include is a pattern of URLs for which the script should be executed. @require is the jQuery library we're including. And thanks to jQuery, removing spoiler tags is really easy.

You can download this script here.

Always sort by seeders on The Pirate Bay

And extremely annoying thing about The Pirate Bay search engine is how it sorts results by its idea of "relevance" - usually giving you some dead ISO of three year old Ubuntu version when you obviously want the most recent one. And nearly always sorting by seeders is the right thing to do.

There is actually a GreaseMonkey script that claims to do exactly that, but it doesn't always work correctly, and the author decided to obfuscate the source for lulz. I'll have none of that, so I just wrote my own. Again, thanks to jQuery it's truly trivial.

// ==UserScript==
// @name           Always order by seed count
// @namespace      http://t-a-w.blogspot.com/
// @include        http://thepiratebay.org/*
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

$("input[name='orderby']").val(7);

You can download this script here.

Download Stewart and Colbert from bittorrent

Now a more complicated and perhaps more useful script. One of the recent developments on the Internet I hate the most are geographic restrictions - Americans can view whatever they like, for everyone else it's "Sorry, Videos are not currently available in your country" or other such nonsense.

Personally I don't care about licensing restrictions which led to this - I'm not going to accept development like that if I can help it. Fortunately in this case I can - all Stewart and Colbert is available on bittorrent.

The script does the following:

• Find all dates on the page. They're not kind enough to use consistent class for those, I found at least 3, and perhaps I still missed a few.
• Convert every date to from "Month DD, YYYY" to "YYYY MM DD" format, as this is what most torrents use. Half of the script is just doing that because Javascript doesn't have anything like Ruby's Date.parse.
• Append link to bittorrent site next to the date. I'm using yourbittorrent here, as ThePirateBay is down due to overload far too often.

So every time someone on Reddit posts a "omg Colbert totally pwned Glenn Beck" link, I can actually see the pwnage now thanks to this script.

// ==UserScript==
// @name           View Stewart and Colbert on bittorrent
// @namespace      http://t-a-w.blogspot.com/
// @description    No more "Sorry, Videos are not currently available in your country"
// @include        http://www.thedailyshow.com/*
// @include        http://www.colbertnation.com/*
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

var month_names = {
  'January': '01',
  'February': '02',
  'March': '03',
  'April': '04',
  'May': '05',
  'June': '06',
  'July': '07',
  'August': '08',
  'September': '09',
  'October': '10',
  'November': '11',
  'December': '12'
};

$(".date, .airDate, .clipDate").each(function() {
  var txt = $(this).text();
  var m = txt.match(/(\S+)\s*(\d+),\s*(\d{4})/);
  var date = m[3] + "+" + month_names[m[1]] + "+" + m[2];
  var url;
  if(window.location.hostname == "www.thedailyshow.com") {
    url = 'http://www.yourbittorrent.com/?q=Daily+Show+' + date;
  } else {
    url = 'http://www.yourbittorrent.com/?q=Colbert+Report+' + date;
  }
  $(this).append("<div><a href='"+ url + "'>Download on bittorrent</a></div>");
});

You can download the script here.

See how easy it all was? Now start writing your own scripts and share them.

Best addons for Firefox 3.6

Every now and then I reinstall operating system, and what I usually do is use such occasions to update my Firefox addons collection - remove the ones which don't work that well for me, find better
replacements, and try a few new things.

In case you're curious, here are links to my previous post for Firefox 1.5, 2.0, 3.0.

Web annoyances

The first thing we need to do is make web less annoying. Remember year 2000? There were popups, popunders, and big flash ads covering everything on every website. This made people very angry, angry people elected George Bush, and here we are with a global recession. Is it a coincidence that popularity of Firefox and popularity of GOP are inversely correlated? I don't think so. Obnoxious ads are responsible for the Great Recession! It's as good a theory as any other proposed, and has about as much evidence behind it.

So, first let's install AdBlock Plus, and the Easy List, or whatever is the most geographically appropriate block list for your area. That mostly solves the problem, but to make web even more pleasant, you can install extensions to skip forced registration, and wait screens. Much better now.

To keep everything clean, it's a good idea to move adblock plus control icon from toolbar to statusbar, or delete it altogether (it will still be available from menu and from keyboard shortcut on rare occasions that you need it).

Greasemonkey

Now something more technical. Firefox's awesomeness comes from extensions, and how easy they are to write compared to plugins for other browsers. But they're still relatively heavyweight, and you're unlikely to have more than 10-20 of them. Fortunately there's a Firefox extension for writing very lightweight Firefox mini-extensions, usually for fixing something just on one site.

You'll need to install two addons - Greasemonkey, and Greasefire on top of it. Now it gives you access to a huge library of tiny hacks for particular websites. Not entirely happy about something? Right click on the money icon on the status bar, and it will tell you what sort of mini-extensions are available for it. There seem to be 198 for blogspot, 313 for google, 868 for facebook (18 for Mafia Wars alone), and so on.

I won't give you any particular recommendations, as it depends on which websites you visit, but I'd be really shocked if you didn't find something for yourself. And it's really easy to write your own (would be even easier if Greasemonkey had integrated jQuery...).

UI enhancements

There are a few things about Firefox user interface which could be better. Moving downloads from a separate window to statusbar is one I find the most essential. Then you can make textareas resizable - were you ever annoyed trying to write a small essay explaining why author was wrong in 4-row comment box? Now it will be much easier.

Other useful UI tweaks are Safari-style progress bar in form of url bar shader, and a Greasemonkey-based addon which redirects all mail: links to your favourite webmail - by default Gmail. It wouldn't hurt to turn this one into a proper extension... Oh well.

One extension which I'm trying out right now - and while I like it now, I'm not really sure if I won't change my mind later - is tree-based view for tabs. I had to tweak its configuration a bit to make it usable, turning off opening new url in new tabs (if I wanted that, I'd press Cmd-T, not Cmd-L you silly extension!), and tree autocollapse (my monitor is big enough to display all tabs, thank you very much). Give it a try - you might love it, or you might hate it. In either case, UI experimentation is what move the web forward.

Website integration

We're all Web 2.0 now, and that means using many complex websites, some of which benefit greatly from an extension or two. Obviously you'll need a webmail notifier  - it also helps if you're not getting too much spam or otherwise useless messages - and fortunately Gmail filters can make sure this is true. If there are some low-value emails that you might want to keep anyway - like let's say build failure notifications, create a filter to label them with something and move straight to archive.

Next, the lovely Twitter - it's probably past its cool days already, and your mum might have started using it, or will do so soon, just as happened with Facebook and countless other social sites before that. Echofon seems like a fairly decent Twitter extension - except you really need to turn off popups, and reduce frequency with which it checks for new tweets, or you'll get ADHD from it, or maybe even Aspergers.

Another Web 2.0 website - actually it might have been the first "Web 2.0" site ever, it's that old - is delicious. They have an official extension, but it tries too many things - so install it, switch to "Classic mode", and remove all its icons from toolbar and statusbar. Much saner this way. Cmd-D will work just like it's supposed to, and everyone searches bookmarks by going to the website anyway.


If you have too much time, you might want to install StumbleUpon. Unlike Reddit, Digg and its likes, it provides decently personalized website recommendations. Even works quite well for porn. Or so I've heard.

Web development

Now a few of you don't develop any websites, in which case just skip this section. If you do, you know you need to install Firebug - and that's about it. I tried a few non-Firebug-based webdev addons like Venkman, but I never really liked them.

There are many extensions you can install on top of Firebug. Probably the most useful is FireQuery (thanks for the pointer @sroussey) - which lets you add jQuery to any website which lacks it. And you know what pain in the ass it is to develop or debug websites without it.

Depending on what you want, there are many many more extensions for Firebug - just pick and choose.

FastestFox

I found one extension of the kind I don't really like that much - one which tries to do way too many completely unrelated things at once - but which I installed anyway as it does some really awesome things. That's FastestFox.

There are two features it provides that I really love. One is AwesomeBar extension to do google search as you type, and add google results as suggestions, mixed with browsing history. It is the best thing since... well, since the AwesomeBar itself.

The second amazing feature is endless pages. You know how back in the days of Web 1.0 you had to click Next to get a few more search results, kitten pictures, or blog posts? Now a few websites like lookbook.nu will load more results as you scroll to the bottom - which is absolutely awesome, but still very rarely done - probably because it lowers page view statistics, and results in fewer ads being served. FastestFox adds this functionality to every website. Now it's not as smooth as with sites which support this natively, but I already cannot imagine going back to browsing without it - it's that good.


As I said, FastestFox tries to do ten or so other unrelated things which I don't really care about, so I disabled most of them - but try them out, you might find some of them useful.

And a few final tweaks

I rarely use IRC, but I installed ChatZilla anyway, as it's one of the less-annoying IRC clients for casual use.

Probably more due to being freaked out by EFF Panopticlick - try it yourself too - I installed BetterPrivacy addon, even though I doubt it will do that much.




And finally, there's one Firefox setting which I simply had to change, as defaults were infuriating - I switched browser.tabs.closeWindowWithLastTab in about:config to false - so the Firefox window does not close just because I closed the last tab. Seriously, who had ever thought it would be a good idea?


That's it for today. I'll probably update the list when Firefox 4.0 gets out. Enjoy your Firefox.

Use Greasemonkey to vote for hotter girls

This summary is not available. Please click here to view the post.

All the Firefox extensions you need

Here's the third edition of my insanely popular (who am I kidding, people only come here for angry rants and Ruby tricks) series on all the Firefox plugins you need to turn it into a useful browser.

The Firefox world has changed a lot since the first (May 2006) and second (May 2007) editions of this list - and now with Firefox 3 released an update is very much in order.

The Web the way it's supposed to be

Internet out of the box is crap. It's full of ads and sites which require registration, bookmarks disappear when you switch computers, and Google Images links to tiny thumbnails instead of images it's supposed to. All these annoyances can be cured by aggressive Firefox plugin therapy.

First install Adblock Plus. Filterset.G Updater isn't recommended any more, so you can skip this step. Adblock Plus blocks vast majority of ads of all kinds (flash, banner, text, css pseudo-popups etc.) without disrupting too many websites (in fact crappy ads are much more likely to disrupt a website than Adblock Plus). The reason it works so well is that on almost all websites ads are provided by a third party external request (image, iframe, script etc.), so it's very easy to tell the difference between website content and ad content. Technology used by Adblock Plus wouldn't really work against other kinds of unwanted content like malware, spam, porn etc., because there's no first party-third party separation in their case. It also won't that well work against ads on search results pages, but these tend to be less obnoxious. The only website of any use that I found not working with Adblock Plus was TubeJP. If you need to fix TubeJP or any other website, try adding "@@tubejp.co.uk" exception to your Adblock Plus's list (@@ means exception) and reloading the page. It should work. Or you could completely disable Adblock Plus from Adblock Plus Preferences, and reenable it when you're done.

Once you've done that let's move to the next problem - websites which require registration. I'm getting an impression that they are fewer in number these days, but in case you find one it's good to have BugMeNot extension installed. Just right click on the form, select "Login with BugMeNot", and the annoyance hopefully goes away. Or not if they're good at deleting shared accounts, as YouTube seems to be. If it doesn't work you can always register with a disposable email address and crappy random data. They usually only check that the email address is routable and you selected that you're older than 18, so happily tell them you're Albert van der Putin, a 95 year old gold farmer from Thailand, living at 1337 Eric Cartman Street, New Buenos Aires, post code 12345 or whatever. It's in their best interest to let you do that, as this kind of crap is easy to filter. If they actually try to verify that what you're filling in makes sense then just google some realistically looking address and phone number and use them to make their lives more difficult when they try to analyze their user data.

Now let's make your bookmarks work. You probably already have a del.icio.us account. If not, create one before you go on reading this post. Then you could test your new del.icio.us account by bookmarking this blog for instance. del.icio.us Firefox extension disables browser-side bookmarks and replaces them with server-side bookmarks that you can access from everywhere and share with others. To bookmark something press Control-D, and most of the form will be prefilled for you - URL, page title, and even suggestions for keywords based on how others tagged that page. It's just an insanely fast way of creating del.icio.us bookmarks. For accessing bookmarks you can use methods provided by the plugin but personally I always type http://del.icio.us/USERNAME/TAG in URL bar instead. Much faster if you know what you're looking for.

The next plugin requires some work to get it right, but as you'll spend significant portion of your online time with Google services you might want to use it anyway. It's CustomizeGoogle and it's used to (surprise) customize various Google services. There's a nice two-minute screencast showing some of the basic options, and there's a lot more of them.

Some of the things you might want to enable are:

• Disable ads on services where they don't make much sense. You can leave them on Google Search but disable on Google Images etc., any way you wish.
• Switch sensitive services like Google Mail to SSL.
• Make Google Images results point directly to images instead of the thumbnail+frames page.
• Make search results AJAX-stream. Especially important for Google Images.
• Add links to other search engines on search results page. I mostly use it to search Wikipedia.
• Hide Google Mail spam counters and invite box, which are simply annoying.
• Filter your search results.
• Enable Google Suggest.
• and much more.

Google won the search engine wars, the web mail wars, the image search wars, the map search wars, and for that matter almost any wars it got into, so we're spending a lot of time with Google things that it'd really be a horrible waste not to customize them a bit.

Making Firefox a better browser

The Web just became a better place, so let's apply a few fixes to the browser. First let's get rid of the downloads window, which is an ugly remnant of the pre-tabs days. Opera uses a downloads tab which is a far better solution than a window, but we can do even better than that with a Download Statusbar. If Firefox developers won't incorporate something like that in Firefox 4 that's a definite proof they're really a sleeper cell of al-Redmont and they should be ie6boarded until they start to cooperate.

Crash recovery (aka session management) was greatly improved in Firefox 3, but it's still better to use Session Manager which saves sessions also on exit, so you won't have to killall -9 firefox as a crude "Save Session" button.

Just these two extensions plus the ones I mentioned in the previous section are probably sufficient for most users. To add some finishing touches you may want to install ColorfulTabs for color-coded tab labels (switch to URL-based colors and fading 7 for best results), Fission for Safari-style progress bar integrated with URL bar, Tabs Open Relative for new tabs that open next to the current tab instead of the end of the tab list, and ReloadEvery for web site autoreload functionality like in Opera.

User Agent Switcher lets you pretend you're using some browser other than Firefox. Fortunately web sites requiring Internet Explorer are pretty much thing of the past. The only one I've had problems with in the last year was one supporting Firefox 2 but not Firefox 3 beta, what was really stupid, but they've fixed it already.

Unfortunately at the time of writing this post TinyURL creator for Firefox. didn't support Firefox 3. That's a shame as it was a very useful plugin.

Web development

If you do any web development at all, and as you're reading this blog there's a high chance you do, you absolutely positively need to install Firebug. It's more important for web development than Ruby on Rails, TextMate, jQuery, and Selenium taken together. Of course that's no reason not to use Ruby on Rails, TextMate, jQuery and Selenium together with Firebug. Here are some screencasts to get you started.

In addition to Firebug there are a few small plugins you might want to install, like Web Developer which provides a right click menu with some extras not included in Firebug, like manipulating cookies, disabling Javascript and so on. Nothing really big, but having all these small nitfy functions in one place is useful.

If you're using Windows you may want to use IE Tab. This of course doesn't give you Firebug for IE, and unless it lets you run multiple versions of IE simultaneously (does it, I have no way of testing that?) it's not even that useful for compatibily testing.

XPath Checker helps you write XPath expressions for page elements and therefore prepare some test cases for view layer unit testing somewhat more easily.

Web 2.0 Integration

CustomizeGoogle, del.icio.us, and BugMeNot are technically about website integration but I don't really think of them this way - they're just too fundamental to the way the Web works.

If you use Twitter like I do you will probably want to install Twitterfor extension, which is very simple and gets Twitter integration done right.

If you have too much time to waste you will want to install StumbleUpon plugin. Just vote up or down a few pages and you'll start getting your own personalized reading list. By selecting the right categories you can even use it for personalized lolcats or porn or lolcat porn.

If you have a Gmail account, Gmail Notifier is very useful for getting notifications.

Total Conversion

Some mods are standalone applications living inside Firefox, for things like IRC, BitTorrent, FTP and so on. They're usually not as good as the best standalone applications, but are fully crossplatform, so if you're switching your systems often you may want to take a look at them anyway. The only one I've used extensively is ChatZilla which seems to be the best cross-platform IRC client out there.

Non on the list

I've heard that Greasemonkey is absolutely awesome, but I never quite got to trying it out.

NoScript seems to be quite popular, but it didn't get on the list, as I really don't see a point of using it for web browsing (what next, NoCSS, NoHTTP1.1 ?), and for compatibility testing Web Developer extension already provides this functionality. By the way it doesn't provide you as much privacy as you think, plain CSS can leak your browsing habits quickly enough.

One plugin that you should definitely disable are "Ubuntu Firefox Modifications". It's automatically enabled by default on Ubuntu and the only thing it seems to do is breaking right click functionality on many websites.

Final words

That's the list of Firefox plugins I'm using. Of course your needs are different, so your list won't be exactly the same. I hope you've found some suggestions in this blog post and I'd love to hear back from you on how you're using your Firefox.

As Firefox is changing quite rapidly I'll probably post an updated list in a year or so, perhaps incorporating some of your suggestions.