How to make Stack Exchange behave exactly how you want it to

So you’ve been using Stack Exchange for a while now and, like most other programmers, expect to be able to customize the website. I’ve seen many feature requests on the main meta, and a large fraction of them never get implemented because:

• It’s not a feature that everyone will like — Stack Exchange tries not to provide too many customization options, so features that will be annoying to some won’t be implemented
• It’s a rather minor feature that may be only useful to some people (or will be used rarely), and not worth the developer time
• The developers are all busy working on something else

It could be something as simple as adding a small reply button to comments. It could also be something more elaborate; like a script that lets one manage and use a bank of boilerplate comments or a script that makes editing long posts easy.

Whatever it is, it’s not always easy to get a feature implemented. In many such cases, userscripting proves to be a viable alternate solution. For those who haven’t heard of userscripts, a userscript is a block of JavaScript code loaded into the browser by the user. It contains some metadata, including instructions for the browser on what type of pages it is meant to be loaded on. They’re very useful if you want to tweak the behavior of a website.

Tips for creating a userscript for Stack Exchange

Firstly, here’s the userscript template that I use:

// ==UserScript==
// @name Script name here
// @description Short description goes here
// @namespace Manishearth (This is to avoid conflicts with userscripts that share a name)
// @author Your name here
// @license GNU GPL v3 (http://www.gnu.org/copyleft/gpl.html)
// @include http://stackoverflow.com/*
// @include http://serverfault.com/*
// @include http://superuser.com/*
// @include http://meta.stackoverflow.com/*
// @include http://meta.serverfault.com/*
// @include http://meta.superuser.com/*
// @include http://stackapps.com/*
// @include http://.stackexchange.com/
// @include http://askubuntu.com/*
// @include http://meta.askubuntu.com/*
// @include http://answers.onstartups.com/*
// @include http://meta.answers.onstartups.com/*
// @include http://mathoverflow.net/*
// @include http://meta.mathoverflow.net/*
// @include http://discuss.area51.stackexchange.com/*
// @exclude http://chat./


// ==/UserScript==
function with_jquery(f) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.textContent = "(" + f.toString() + ")(jQuery)";
    document.body.appendChild(script);
};

with_jquery(function($) {

// Your custom code goes here

});

The @include directives tell the browser which sites to load the script on. You may wish to tweak these to your needs. You may omit the with_jquery bits if you’re not planning on using jQuery, and instead just write your code after the // ==/UserScript== line. If the file is saved as a .user.js file and loaded into your browser (instructions for each browser here), then it will run the code on each SE site you visit.

Make sure you’re familiar with the Chrome Developer tools (or Firebug) as well. Remember that building a userscript is different from using JS for making a dynamic webpage. In the former case, there are many more unknowns, so one can’t always accurately predict how the page will react to your code. With this in mind, I find that it is easier to develop userscripts bit-by-bit on the console, instead of writing a large portion of the script at once and then testing it. I start by testing smaller code snippets on the console, and slowly assembling them into larger code snippets. Then I assemble the larger snippets off-console. This way, you can catch bugs before they get buried in large chunks of code. For example, while writing this script, there were a few issues with the predefined behavior of the preview and edit history that would have been quite hard to catch if I had written the code in bulk.   Another thing to remember is that Stack Exchange has many dynamically-created elements. If, for example, you want to add a  keyboard shortcut to the markdown editor, you will need to make sure that the corresponding event handlers are delegated. This post (and this documentation page, under the “direct and delegated events” section) are good places to learn event delegation via jQuery.

The Stack Exchange API is currently limited to mostly read actions, but it’s another useful tool for writing userscripts and apps. You may have to register for an API key, depending on the nature of the script.

A final, very useful resource is the unminified javascript. The normal Stack Exchange javascript files that one sees in the debugger  look like this (there is also stub,js, full-anon.js, and wmd.js), but by modifying the cdn in the URL to cdn-dev, one gets this page, which is much easier to read. The URLs may change — if the above links change, go to http://dev.stackoverflow.com/ and look for the URL of /js/full-anon.js in the source code or the sources tab of the Chrome developer tools.

Publishing your script on StackApps

StackApps is a repository of apps and scripts for Stack Exchange. You can just post your script by asking a question tagged with the [script] tag. Give links to the script source code, and instructions for installation and usage. Note that installing a userscript on Chrome is currently a slightly roundabout process, so it is advisable to link to the [script] tag wiki for further instructions. Here’s an example of a complete StackApps script post.

Some great userscripts

There are a lot  of  awesome userscripts on StackApps, which can be directly installed. Here are some of those that I find quite useful:

• Keyboard Shortcuts for Stack Exchange
• “Reply” links in comments
• Auto-scrolling in the preview for editing long posts
• Make a post printer friendly
• Better handling of the tab key for code indentation
• Boilerplate comment manager
• Punching users through the internet

Well, there you have it. You should now be able to tweak the behavior of SE to your tastes with relative ease.