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.
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./Parts of the above code were taken from this post by badp
// Your custom code goes here
@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.
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.
Filed under Uncategorized