Take the 2-minute tour ×
Stack Apps is a question and answer site for apps, scripts, and development with the Stack Exchange API. It's 100% free, no registration required.

Inspired by this MSO question.

This tiny userscript will add a link to the timeline for any post, just below the "favorite question" star button.

Example image:

timeline button example

This is the code:

// ==UserScript==
// @name        Add Timeline Button
// @namespace   none
// @description Adds a "View Timeline" Button to StackOverflow
// @match       http://*.askubuntu.com/questions/*
// @match       http://*.onstartups.com/questions/*
// @match       http://*.serverfault.com/questions/*
// @match       http://*.stackapps.com/questions/*
// @match       http://*.stackexchange.com/questions/*
// @match       http://*.stackoverflow.com/questions/*
// @match       http://*.superuser.com/questions/*
// @author      csharpler
// @version     0.2
// ==/UserScript==

/*
 * Version History
 *      * 0.1 (2013-06-11): First release
 *      * 0.2 (2013-06-12): * changed includes
 *                          * improved regex
 *                          - removed unsafeWindow, replaced with function wrapper
 */

withPages_jQuery(run);

function withPages_jQuery (NAMED_FunctionToRun) {
    //--- Use named functions for clarity and debugging...
    var funcText        = NAMED_FunctionToRun.toString ();
    var funcName        = funcText.replace (/^function\s+(\w+)\s*\((.|\n|\r)+$/, "$1");
    var script          = document.createElement ("script");
    script.textContent  = funcText + "\n\n";
    script.textContent += 'jQuery(document).ready( function () {' + funcName + '(jQuery);} );';
    document.body.appendChild (script);
};

function run(){
    var uri = location.href;
    var post = location.pathname.match(/questions\/(\d+)\D/i);
    var newuri = "";
    if(post && post.length > 1){
        newuri = location.protocol + "//" + location.host + "/posts/" + post[1] + "/timeline";
    }
    $(".favoritecount").after("<a href='" + newuri + "'>View Timeline</a>");
}

Feel free to submit any bugs, feature requests and comments on the script.

This script was tested with the following settings:

  • Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:20.0) Gecko/20130520 Firefox/20.0 PaleMoon/20.1-x64
  • SO and MSO pages, other SE pages will probably work (please tell me if they don't!)
  • Greasemonkey 1.9
share|improve this question
1  
Note that there are at least 3 other userscripts that do this. There's mine, below. There's this one from April 2011. And, there's this one from Feb 2011. –  Brock Adams Jun 12 '13 at 19:22

1 Answer 1

Good idea. There's a few minor niggles, though:

  1. Don't use unsafeWindow, this will break in Chrome and will not even work in Firefox+Greasemonkey if the effective @grant changes.

  2. Avoid leading * wildcards in @includes, if you can help it. This is a big performance hit. @match limits the wildcard scope and performs much better and reports the sites/security correctly on Chrome. This gets all current SE sites:

    // @match       *://*.askubuntu.com/questions/*
    // @match       *://*.onstartups.com/questions/*
    // @match       *://*.serverfault.com/questions/*
    // @match       *://*.stackapps.com/questions/*
    // @match       *://*.stackexchange.com/questions/*
    // @match       *://*.stackoverflow.com/questions/*
    // @match       *://*.superuser.com/questions/*
    
  3. The regex match needs to be more robust, to account for all legal characters in the URL, and for anchors.

  4. Use injection so that the script will work on most userscript-capable browsers (Chrome, Firefox, Opera, Safari, etc.).


Here's a variant of the script I've been using. It also adds a "revisions" link since a post's history is sometimes hidden. It works on Chrome and Firefox, and should work on most other userscript-capable browsers:

View the source at GitHub Gist.

Install from GitHub Gist


// ==UserScript==
// @name        Stack Exchange: Add Timeline and Revisions links to posts
// @description Adds links to posts to always show history and links to questions to show the Timeline".
// @namespace   StackExchange
// @match       *://*.askubuntu.com/questions/*
// @match       *://*.mathoverflow.net/questions/*
// @match       *://*.serverfault.com/questions/*
// @match       *://*.stackapps.com/questions/*
// @match       *://*.stackexchange.com/questions/*
// @match       *://*.stackoverflow.com/questions/*
// @match       *://*.superuser.com/questions/*
// @version     1.2
// @history     1.2 Updated match list
// @history     1.1 Added revisions link
// ==/UserScript==

function addUtilityLinks ($) {

    $(".post-menu").each ( function (J) {
        var jThis   = $(this);
        var href    = jThis.find ('a[class="short-link"]').attr ("href");
        var idMtch  = href.split (/[qa]\/(\d+)/);
        if (idMtch.length > 2) {
            var id  = idMtch[1];
            jThis.append (
                '<span class="lsep">|</span><a href="/posts/' + id + '/revisions">revisions</a>'
            );

            if (J === 0) {  //-- Question only
                jThis.append (
                    '<span class="lsep">|</span><a href="/posts/' + id + '/timeline">timeline</a>'
                );
            }
        }
    } );
    $(".revcell3.vm>div").each (function () {
        //-- Looks like a timebomb...
        guid = $(this).find ("a").attr ("href").match (/\w{8} (?:-\w{4} ){3}-\w{12}/)[0];
        $(this).prepend ('<a href="#rev' + guid + '">link</a><span class="lsep">|</span>');
    } );
}

withPages_jQuery (addUtilityLinks);

function withPages_jQuery (NAMED_FunctionToRun) {
    //--- Use named functions for clarity and debugging...
    var funcText        = NAMED_FunctionToRun.toString ();
    var funcName        = funcText.replace (/^function\s+(\w+)\s*\((.|\n|\r)+$/, "$1");
    var script          = document.createElement ("script");
    script.textContent  = funcText + "\n\n";
    script.textContent += 'jQuery(document).ready( function () {' + funcName + '(jQuery);} );';
    document.body.appendChild (script);
};
share|improve this answer
1  
thanks, I included some of your proposals :) –  pascalhein Jun 12 '13 at 16:15
    
I tweaked this for my own use by putting the text in the title attribute and including &#x1f4c5; (a calendar symbol) as the <a> text instead. It looks pretty snazzy, especially with an increased font-size. –  Nathan Tuggy Jul 22 at 21:24
    
Thanks, @NathanTuggy. I updated the script above, you may want to include the new @match directives. I didn't include the altered link for personal philosophy reasons. ... On a "completely unrelated" note, you may wish to peruse this article and it's linked sources. πŸ˜‡ –  Brock Adams Jul 22 at 22:02
    
Don't you mean "you may wish to peruse this article and its linked sources πŸ˜‡"? :P (I consider the use of representative icons as links to be perfectly legitimate, assuming they actually do represent that thing, but the bar is lower for my own personal use.) –  Nathan Tuggy Jul 22 at 22:07
    
@NathanTuggy: Yes, I missed a typo, but you must admit that that article is a few "linked sources", after a fashion. –  Brock Adams Jul 22 at 23:28
    
@BrockAdams Double-check what I linkified. ;) –  Nathan Tuggy Jul 22 at 23:34
    
Oh Ho! I couldn't even see that that WAS a link (already visited), due to this site's horrid visual contrast and cues. Touché. Well played, sir. –  Brock Adams Jul 22 at 23:47

You must log in to answer this question.

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