9

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™?

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

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

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))  
3

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .