Stack Exchange userscript template / boilerplate

Question

I find it annoying to have to type the entire list of Stack Exchange sites to include every single time I make a new userscript. Furthermore, jQuery isn't automatically included by default.

Is there a template I can use in order be able to start writing code (including jQuery), drag it into my browser, and have it Just Work™?

Related: Complete list of sites to include / match into my script? — Brock Adams, Jul 10 '14 at 21:30

score 9 · Answer 1 · edited Sep 29 '14 at 15:29

9

template.user.js

// ==UserScript==
// @name Stack Exchange Userscript (Template)
// @grant none
// @match *://*.stackexchange.com/*
// @match *://*.stackoverflow.com/*
// @match *://*.superuser.com/*
// @match *://*.serverfault.com/*
// @match *://*.askubuntu.com/*
// @match *://*.stackapps.com/*
// @match *://*.mathoverflow.net/*
// ==/UserScript==

var userscript = function($) {

// INSERT YOUR USERSCRIPT CODE HERE

};

var el = document.createElement('script');
el.type = 'text/javascript';
el.text = '(' + userscript + ')(jQuery);';
document.head.appendChild(el);

This template will

Guarantee that your script can only run on Stack Exchange sites
Run on all Stack Exchange sites (as of 7-10-2014, will be updated as necessary if new sites with unique URLs are added)
Allow you to reliably use $ as jQuery within your userscript
Be compatible with all major browsers (really not that fancy; should work virtually anywhere)

edited Sep 29 '14 at 15:29

Nathan Osman

23,286
11
60
107

answered Jul 10 '14 at 19:38

Doorknob

1,299
8
19

1

This misses some sites and most of the meta sites. Use //*. for all lines. – Brock Adams Jul 10 '14 at 21:31
1

You should also add a @name line since its omission will cause sneaky problems. Likewise @grant none is a good idea as a start/baseline. – Brock Adams Jul 10 '14 at 21:38
@BrockAdams Thanks, forgot about that. Edited. (*.stackoverflow.com doesn't match stackoverflow.com, though.) – Doorknob Jul 10 '14 at 21:42
Yes it does. See https://developer.chrome.com/extensions/match_patterns . – Brock Adams Jul 10 '14 at 21:45
@BrockAdams Hmm, I was not aware of that. Editing again – Doorknob Jul 10 '14 at 21:46
1

PS: recommend changeThis for the @name as it's a hint and easy to set with one double-click. – Brock Adams Jul 10 '14 at 21:49
1

Not bad. I still like using the page's jQ as shown in this post as it avoids some timing issues and makes debugging a bit easier. – Brock Adams Jul 10 '14 at 21:50

score 4 · Answer 2 · answered Jul 15 '14 at 18:25

Here is a one for css too:

// ==UserScript==
// @name          changeMe
// @namespace     http://use.your.homepage/
// @version       0.1
// @description   addSomethingUseful
// @match http*://*.stackoverflow.com/*
// @match http*://*.serverfault.com/*
// @match http*://*.superuser.com/*
// @match http*://*.stackexchange.com/*
// @match http*://*.askubuntu.com/*
// @match http*://*.answers.onstartups.com/*
// @match http*://*.mathoverflow.net/*
// @match http*://stackapps.com/*
// @copyright  2014+, You
// @grant none
// ==/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 (function(){/*
    //Add your code below.  

*/}.toString()
   .slice(14,-3))

@brasofilo yeah, but I got it from here: http://stackoverflow.com/a/15558082/4071709 — Mohammad, Oct 02 '14 at 17:52

score 3 · Answer 3 · answered Sep 29 '14 at 12:06

I'm detecting which page we are using the StackExchange object:

object contents

The property StackExchange.options.routeName can be (among other values):

Questions/Show (/questions/POST-ID)
Questions/List (/questions)
Questions/ListByTag (/questions/tagged/TAG-NAME)

So, to run a script only when viewing an individual post:

var userscript = function($) {

    if( ( StackExchange.options.routeName.indexOf('Questions/Show') === -1 ) ) 
        return;

    // INSERT YOUR USERSCRIPT CODE HERE
};

_{PS: I don't know why, but Chrome detects the object at the root of the userscript, but Firefox only inside our userscript function. Inside our function works on both browsers.}

Stack Exchange userscript template / boilerplate

3 Answers3

Linked