I was reading my twitter feed the other day and saw this exchange come through…
and I couldn’t agree more. So I decided to do something about it!
Getting to know Greasemonkey
I remember hearing about Greasemonkey scripts back in Firefox’s heyday. According to Wikipedia, Greasemonkey “… allows users to install scripts that make on-the-fly changes to HTML web page content …” Even better than that, Google Chrome treats the scripts as extensions right out of the box.
Of course, I have never written a Greasemonkey script so, I went to the worlds repository of these scripts, Userscripts.org. Right off the bat, Userscripts made it super easy to get my bearings; they allow you to view the source of existing scripts right in the browser.
My next stop is over at github to figure out what CSS I need to replace.
Alright, time to use those F12 tools! I browsed over to the MonoDevelop project on github and inspected the element that contained source code.
Great! Now I know the CSS selectors that I need to override. With this knowledge in hand I started my first user script.
First, I borrowed a bit of code for injecting a new style elements into the page head. I then copied the CSS for github’s pre element over to my script and added Consolas to the beginning of the font family definition. Just like that, I had the first version of my script.
Bringing it together
I created an account on Userscripts.org and navigated to script management. Uploading was as simple as pointing to my script file and filling out some metadata about the script. Time to see it in action!
The finish line!
I went to the Consolas for github script page with Chrome and clicked the install button.
Followed the prompts..
.. and Success!
After some twiddling, I get the in-browser editor using Consolas as well.
Install it. Enjoy it. Remix it. Please just don’t make Comic Sans for github.