Can we have a per-tag "Make Spoilers Visible" button?

Question

To turn this frustration into something concrete, I have a suggestion:

Could we have a "Make Spoilers Visible" button or checkbox?

It would be per tag, so I could elect to show spoilers for things I've seen and keep them hidden (the default) for things I haven't seen. This would improve the readability of questions and answers with a plethora of spoilers, such as the one linked above.

Answer 1

I created a UserScript which does just this – you specify a list of tags, and it will unhide spoilers on any question that uses those tags.

I developed and tested it with TamperMonkey in Chrome 47 on OS X, although I see no reason why it shouldn’t work in other browsers – this is just vanilla JavaScript.

Here’s the code for the script:

// ==UserScript==
// @name         SFF.SE Show spoilers on questions with particular tags
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Show all spoilers on SFF.SE questions with specified tags
// @author       alexwlchan
// @match         *://scifi.stackexchange.com/questions/*
// @match         *://meta.scifi.stackexchange.com/questions/*
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';


// If every tag on a question is in this array, then the spoilers on this
// question will be shown.
var SHOW_ME_SPOILERS_IF_TAGGED = [
    "harry-potter-tag",
    "not-star-wars",
];
// (Tags tweaked so you don't get inadvertently
// spoiled while testing this script.)


// Returns an array of tags on a question
var getTagsOnQuestion = function() {
    var taglist = document.getElementsByClassName("post-taglist")[0];
    var hrefs = taglist.getElementsByClassName("post-tag");

    var tags = [];
    for (var ii = 0; ii < hrefs.length; ii++) {
        tags.push(hrefs[ii].innerText);
    }
    return tags;
}


// Returns true/false depending on whether the spoilers on this question
// should be shown -- that is, whether every tag on the question is in
// SHOW_ME_SPOILERS_IF_TAGGED.
var shouldShowSpoilersOnQuestion = function() {

    // Get the tags on a question.  All questions have at least one tag.
    var tags = getTagsOnQuestion();

    for (var jj = 0; jj < tags.length; jj++) {
        // If we don't find the tag in the array of spoiler-able tags,
        // then we have to reject the question.
        if (SHOW_ME_SPOILERS_IF_TAGGED.indexOf(tags[jj]) == -1) {
            return false;
        }
    }
    return true;
}


// Modify all the spoilers on the page to show their spoiler text
var showSpoilers = function() {
    var spoilers = document.getElementsByClassName("spoiler");
    for (var kk = 0; kk < spoilers.length; kk++) {
        spoilers[kk].transition = "none";
        spoilers[kk].style.color = "#222426";
    }
}

if (shouldShowSpoilersOnQuestion()) {
    showSpoilers();
}

You need to put a list of all the tags where you don’t want spoilers into the SHOW_ME_SPOILERS_IF_TAGGED array, and any question whose tags are a subset of that array will have the spoilers unhidden.

Notes:

• Rather than showing up immediately, the spoilers have the same 1-second fade-in when you hover over them; it just kicks in immediately. Would be nice if it snapped to position.
• Only works on desktop browsers; I think the mobile spoiler layout is a bit different.
• If you’d like to moan about my JavaScript (it’s something I’ve only dabbled in), please direct criticism to Code Review.

Answer 2

While not exactly what you're looking for, I took some time this afternoon to create a UserScript that will allow you to toggle spoilers on a per-question basis. It creates a checkbox in the question info block in the sidebar that will toggle spoilerification:

There's no caching involved, so you'll have to manually tick the box each time you visit the question.

Here's what it looks like on How could Leia sense a specific death among so many? (images are thumbnails, because the whole screen is rather long; click for the full image):

• Before:

  

• After:

  

The script was created and tested in TamperMonkey and Chrome 47 on Windows 10, but it should work on Firefox with Greasemonkey. Don't know what to do if you're using any other browsers.

You can find the code on GitHub, or (if you already have Greasemonkey or Tampermonkey installed) you can install the script with this handy link: Install

If you run into any problems with this script, leave a comment here or open an issue or pull request on GitHub.