49

Just went down the rabbit hole... Finding the sidebars, hot questions, chat, jobs extremely distracting.

There's already a good question: Hide the Stack Exchange sidebar.

I'm trying to find a script that hides everything EXCEPT the linked questions. Most scripts miss a thing or two.

Requirements,

  • linked questions should still be visible in the sidebar
  • hides jobs, community bulletin, hot questions, chat, newsletter, footer, left sidebar, top banner sign up box and title banner
  • should work on all Stack Exchange sites, even the ones you did not sign up for yet.

enter image description here

9
  • 15
    Wouldn't this make more sense on Stack Apps?
    – Catija StaffMod
    Commented Apr 29, 2021 at 5:47
  • The box you have highlighted is not the “linked questions”. The “linked questions” are beneath that box. If you truly want a focus on “linked question”, you can simply use, e.g. meta.stackoverflow.com/questions/linked/407190 Seems your question is not actually “Hide everything … except linked questions” but “Hide that one specific box” with no relation to “linked questions”.
    – Holger
    Commented Apr 29, 2021 at 7:14
  • 19
    Honestly, I think something like this really needs to be built in. The sidebar is incredibly distracting. I have the Hot Network Questions blocked in most of the sites. Any time I have to use a different computer or something, I'm shocked that anyone can actually get work done with all that stuff there - it's like having reddit jammed into your IDE. Commented Apr 29, 2021 at 7:31
  • 5
    @Catija But then it'd never make the Hot Meta Posts ;)
    – Scratte
    Commented Apr 29, 2021 at 10:34
  • Good luck, made an extension for this myself, but after the selectors for it broke a few times I gave up.
    – zero298
    Commented Apr 29, 2021 at 15:33
  • Somewhat related: Is there any way I can turn Stack Overflow Meta off? Commented Apr 30, 2021 at 17:49
  • 2
    Don't forget the cookies!
    – 0-1
    Commented May 2, 2021 at 20:08
  • @Catija thought the same right after I posted an answer. If only there's a function to migrate questions over somehow. stackapps is relatively newer, just found out about that too. on second thought, Scratthe has a good point. :)
    – tinker
    Commented May 3, 2021 at 7:13
  • @0-1 good catch, noticed the pop up does appear on some new stackexchange sites. Feel free to add another function in the code. :)
    – tinker
    Commented May 3, 2021 at 7:18

8 Answers 8

7

Here is my pure CSS version of tinker's userscript.

  • There is no flash of hidden content while the page is loading
  • It hides hot meta posts and Stack Overflow blog. The OP requested hiding everything except related questions.
  • It works on more Stack Exchange sites in addition to Stack Overflow: AskUbuntu, Server Fault, Super User, and *.stackexchange.com.
  1. First, install Stylus
  2. Then, install the stylesheet here
@-moz-document domain("stackoverflow.com"), domain("stackexchange.com"), domain("superuser.com"), domain("serverfault.com"), domain("askubuntu.com") {
#hireme,
/* Hides the Looking for a Job module from the sidebar */
 #sidebar > :first-child,
/*Hides the Community Bulletin module from the sidebar*/
 .s-sidebarwidget,
/* Hides Stack Overflow Blog, Featured on Meta, Hot Meta Posts */
 #sidebar #chat-feature,
/* Hides the Chat module from the sidebar */
 #sidebar #newsletter-ad, #left-sidebar,
/* Hides the "Love This Site?" (weekly newsletter) module from the sidebar */
 #footer, .js-dismissable-hero,
/* Hides the Hero box, asking to sign up for new users. */
 .site-header--container,
/* Hides the top title banner bar appearing only in some stackexchange sites. */
 #hot-network-questions
/* Hides hot network questions. */
 {
    display: none;
}
}
7
  • 3
    "Does not depend on jQuery" - this isn't really an argument. Stack Overflow itself uses jQuery, so it's already included on the page regardless of userscripts. Commented Apr 30, 2021 at 15:51
  • 4
    @Zoe It doesn't wait for the JavaScript/JQuery on the page to load before activating– it blocks things as they appear. Commented Apr 30, 2021 at 17:33
  • 1
    @Zoe I think it is, and a good one at that. As we all know, jQuery usage is in decline and relying on it helps keep alive the outdated "single global variable" practice as well. In a year from now, SE may decide to ditch it. Granted, they also can change CSS, so that's not a silver bullet. But not relying on jQuery (and especially on JS at all) sounds like an advantage to me
    – 0Valt
    Commented Apr 30, 2021 at 19:22
  • 1
    @noɥʇʎԀʎzɐɹƆ great work, I preferred to use CSS too, hides faster without flashing it once. This seems to work well when I tested in couple of stackexchange sites so far. Only advantage of doing in javascript is if things get harder to hide pure in CSS.
    – tinker
    Commented May 3, 2021 at 6:56
  • 1
    @noɥʇʎԀʎzɐɹƆ suggest including instructions to use install Stylus (stylish replacement). Equally easy to setup this as tampermonkey.
    – tinker
    Commented May 3, 2021 at 6:57
  • @noɥʇʎԀʎzɐɹƆ it's missing some stackexchange sites like mathoverflow.net, would be nice if it's complete. not sure if it the domain function supports wildcards
    – tinker
    Commented May 3, 2021 at 8:00
  • @tinker Added Stylus Commented May 10, 2021 at 17:40
14

Update 2023-02-28,

Added another answer below which works better with latest version of Tampermonkey. This code seems to error out now, as @include is deprecated with @match.

I'm currently using the CSS answer (marked as accepted), to avoid the flash of hidden content while the page is loading.

Original answer

Tampermonkey userscript. Simply install the extension in Chrome/Firefox. Partly inspired by SOX.

// ==UserScript==
// @name         Stackoverflow hide EVERYTHING except linked questions
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  even works on new stackexchange sites, without logging in.
// @author       You
// @require      http://code.jquery.com/jquery-3.4.1.min.js
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/(questions/\d+/|review/*)
// @exclude      /^https://*.*/review/(suggested-edits|reopen)/*
// @exclude      /^https://*.*/review($|.*/(history|stats)$)
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...

    jQuery.noConflict();

    const sox = {
        hideHireMe: function() {
            // Description: Hides the Looking for a Job module from the sidebar

            $('#hireme').remove();
        },

        hideCommunityBulletin: function() {
            // Description: Hides the Community Bulletin module from the sidebar

            $('#sidebar').children().first().remove();
        },

        hideJustHotMetaPosts: function() {
            // Description: Hide just the 'Hot Meta Posts' sections in the Community Bulletin

            const $hotMetaPostsHeader = $('#sidebar div:contains("Hot Meta Posts"):eq(1)');
            if ($hotMetaPostsHeader.length) {
                $hotMetaPostsHeader.nextAll().remove();
                $hotMetaPostsHeader.remove();
            }
        },

        hideChatSidebar: function() {
            // Description: Hides the Chat module from the sidebar

            $('#sidebar #chat-feature').remove();
        },

        hideLoveThisSite: function() {
            // Description: Hides the "Love This Site?" (weekly newsletter) module from the sidebar

            $('#sidebar #newsletter-ad').remove();
        },

        hideFooter: function() {
            // Description: Hides the "Love This Site?" (weekly newsletter) module from the sidebar

            $('#footer').remove();
        },

        hideLeftSidebar: function() {
            // Description: Hides the "Love This Site?" (weekly newsletter) module from the sidebar

            $('#left-sidebar').remove();
        },

        hideTopHeroBox: function() {
            // Description: Hides the Hero box, asking to sign up for new users.

            $('.js-dismissable-hero').remove();
        },

        hideTitleBanner: function() {
            // Description: Hides the top title banner bar appearing only in some stackexchange sites.

            $('.site-header--container').remove();
        },
    }

    (() => {
        Object.values(sox).forEach(value => {
            if(typeof value === 'function') {
                value.call();
            }
        })
    })();

})();
15
  • 11
    2cents - why even use map if you are not going tot use the returns from the callback? forEach looks more suitable for the job. Also you could make the runAll an IIFE since you don't use the variable anywhere else :)
    – 0Valt
    Commented Apr 29, 2021 at 0:35
  • 3
    oh, and while we are at it - at first, I thought the choice for function and var syntax was to make the userscript compatible with ES5- environments, but then I noticed you use an arrow function as the map method callback, so that's not the case. Why not change everything to arrow funcs then? Should result in a cleaner and shorter code
    – 0Valt
    Commented Apr 29, 2021 at 6:54
  • 4
    Consider leaving out the // Your code here... and change the "@description" and "@author". I'd have probably made the "@name" shorter so it doesn't fill out that column in the script overview in the user script manager :)
    – Scratte
    Commented Apr 29, 2021 at 8:05
  • 3
    Also, what’s the point of value.call()? Simply value() is equivalent. Method syntax ({ hideHireMe(){},}) is also shorter. Commented Apr 29, 2021 at 9:36
  • 4
    How about a non-jQuery version? There's nothing in that script that would cause major headaches when done with "vanilla JS". The "Hot Meta Posts" part is equivalent to (might need some checks to make it foolproof): [...document.querySelectorAll('#sidebar div.s-sidebarwidget--header')].filter(d => d.textContent.trim().toLowerCase() === "hot meta posts").forEach(d => { while (d.nextElementSibling) { d.nextElementSibling.remove(); } d.remove(); })
    – Andreas
    Commented Apr 29, 2021 at 9:43
  • 1
    @OlegValter thanks for the inputs, var was because i'm used to eslint autocorrect to let/const. Unfortunately the autocorrect wasn't available in the browser env. IIFE point is good, I just copy pasted that part from somewhere, didn't bother to refactor it further since it worked. Feel free to edit the code answer. :)
    – tinker
    Commented May 3, 2021 at 6:32
  • @Andreas that's a good idea, you can post a separate answer for that. I just took the path of least resistance. And prioritised code clarity and conciseness, so in case SO decides to break the script, I can modify it easily. :)
    – tinker
    Commented May 3, 2021 at 6:34
  • @SebastianSimon good points. function signature taken directly from SOX codebase. value.call() should prolly be changed to just value(), but that requires testing. Feel free to edit the code. :)
    – tinker
    Commented May 3, 2021 at 6:39
  • @Scratte made the name slightly shorter, can't think of a shorter name that clearly specifies how this is different from other similar scripts.
    – tinker
    Commented May 3, 2021 at 6:40
  • @tinker - done! Yeah, linters get us too comfortable sometimes :)
    – 0Valt
    Commented May 3, 2021 at 6:41
  • 1
    @tinker - re:call, nope, that does not need testing - semantics is absolutely the same (if thisArg had been specified, it would've been another matter, but that's not our case)
    – 0Valt
    Commented May 3, 2021 at 6:43
  • 1
    @tinker “but that requires testing” — Not really. value.call() calls value without this context; but none of the functions use this, so that’s inconsequential. value() also calls value without this context. It’s equivalent. Commented May 3, 2021 at 6:43
  • @OlegValter sure go ahead if you're confident without testing. :)
    – tinker
    Commented May 3, 2021 at 7:11
  • @tinker - there is literally no way to screw this up :) Ok, there actually is one - overriding the call method for one or more of the functions, but thankfully there are no surprises in the lookup object.
    – 0Valt
    Commented May 3, 2021 at 7:25
  • lately, i'm seeing chat box on the sidebar. this needs to be updated. anyone has an updated script can edit the answer directly.
    – tinker
    Commented Dec 23, 2021 at 3:05
13

I just use the Adblocker Ultimate plugin. Right click on the page, and in the AdBlocker Ultimate menu select "Block ad on this website". This will allow you to select any element on the screen you wish to block from displaying.

enter image description here

enter image description here

enter image description here

5
  • I tried this method, but the challenge is you need to do this on all the stackexchange sites. if there's a way to apply the same rules to similar domains, then it's easier to maintain/copy paste the rules section.
    – tinker
    Commented May 3, 2021 at 6:41
  • btw, if someone has the FULL list of rules implemented in ublock origin(i use this instead of adblock), i'd be interested to know. :)
    – tinker
    Commented May 3, 2021 at 7:00
  • 1
    @tinker Just click "Apply this rule to every web site". That's exactly what I've done and it blocks that section on all their sites. Commented May 3, 2021 at 18:42
  • not all sites have "stackexchange.com" in them. eg. serverfault.com, stackoverflow.com, askubuntu.com. "Applying the rule to every website" on the internet literally might break a lot of unrelated sites.
    – tinker
    Commented May 11, 2021 at 1:19
  • @tinker it's certainly possible, but only if those sites have a section called "hot-network-questions". If it breaks a site, you can just whitelist it in the plugin. Commented May 11, 2021 at 14:57
7

Here's my version of the user script:

// ==UserScript==
// @name         Stackoverflow - hide EVERYTHING except linked questions
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @require      http://code.jquery.com/jquery-3.4.1.min.js
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/(questions/\d+/|review/*)
// @include     /^https://stackoverflow.com/
// @exclude      /^https://*.*/review/(suggested-edits|reopen)/*
// @exclude      /^https://*.*/review($|.*/(history|stats)$)
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Description: Hides the Looking for a Job module from the sidebar
    $('#hireme').remove();

    // Description: Hides the Community Bulletin module from the sidebar
    $('#sidebar').children().first().remove();

    // Description: Hide just the 'Hot Meta Posts' sections in the Community Bulletin
    const $hotMetaPostsHeader = $(
        '#sidebar div:contains("Hot Meta Posts"):eq(1)'
    );
    if ($hotMetaPostsHeader.length) {
        $hotMetaPostsHeader.nextAll().remove();
        $hotMetaPostsHeader.remove();
    }

    // Description: Hides the Chat module from the sidebar
    $('#sidebar #chat-feature').remove();

    // Description: Hides the "Love This Site?" (weekly newsletter) module from the sidebar
    $('#sidebar #newsletter-ad').remove();

    // Description: Hides the "Love This Site?" (weekly newsletter) module from the sidebar
    $('#hot-network-questions').remove();

    $('#footer').remove();

    // Description: Hides the "Love This Site?" (weekly newsletter) module from the sidebar
    $('#left-sidebar').remove();

    // Description: Hides the Hero box, asking to sign up for new users.
    $('.js-dismissable-hero').remove();

    // Description: Hides the top title banner bar appearing only in some stackexchange sites.
    $('.site-header--container').remove();
})();

I simplified it to remove logic that wasn't doing anything.

Also, I want it to run a bit more widely - like, on the stackoverflow.com front page etc.

2
  • 1
    This completely breaks my inbox and comments functionality.
    – mathrick
    Commented Apr 30, 2021 at 16:32
  • It leaves me unable to post answers, too. Commented May 1, 2021 at 9:15
6

Here's my own take on it, which features the ability to toggle the left and right side bars:

You can install it here (although you might have to tinker around with the @includes and @excludes though):

https://github.com/SpectricSO/stack-scripts/blob/main/scripts/focus-mode/v1/script.min.js

Un-minified version if you want to give it a little twist or are wary of what it does:

https://github.com/SpectricSO/stack-scripts/blob/main/scripts/focus-mode/v1/script.js

3
  • 1
    love the ability to toggle, i tested this, the orange box is still showing. hot meta posts, community bulletin. you might have missed that. the left sidebar should be completely hidden without the toggle. honestly don't ever need to view that.
    – tinker
    Commented May 3, 2021 at 7:08
  • it'll be nice if the toggle doesn't follow you as you scroll down, you'd have to scroll up anyway after you toggle, because the linked questions are fixed at the top. also, in landscape mode it looks ok, but when going portrait mode, smaller widths the arrows tend to overlap the content. if there's a way to make it a little responsive would be perfect.
    – tinker
    Commented May 3, 2021 at 7:21
  • @tinker It's not hiding the orange box? Hmmm... can't seem to reproduce - tested both minified and unminified version. Could you provide a screenshot or GIF? That would be helpful.
    – Spectric
    Commented May 3, 2021 at 15:02
2

FWIW Here is the removal script without the dependency on JQuery.

// ==UserScript==
// @name         Stackoverflow - Focus on the Q&A
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Focus mode for StackExchange, without jQuery!
// @author       You
// @match        https://stackoverflow.com/*
// @icon         https://www.google.com/s2/favicons?domain=stackoverflow.com
// @include      https://*stackoverflow.com/*
// @include      https://*serverfault.com/*
// @include      https://*superuser.com/*
// @include      https://*askubuntu.com/*
// @include      https://*mathoverflow.net/*
// @include      https://*.stackexchange.com/*
// @exclude      https://data.stackexchange.com/*
// @exclude      https://contests.stackoverflow.com/*
// @exclude      *chat.*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const removals = [];

    const sidebar = document.querySelector('#sidebar');

    // Description: Hides the Community Bulletin module
    // from the sidebar
    removals.push(sidebar.childNodes[0]);

    // Description: Hide just the 'Hot Meta Posts' sections in the Community Bulletin
    [...sidebar.querySelectorAll('div')]
        .filter(div => contains(div, 'Hot Meta Posts'))
        .forEach(hotMetaElement => removals.push(hotMetaElement))

    // Description: Hides the Chat module
    // from the sidebar
    removals.push(sidebar.querySelector('#chat-feature'));

    // Description: Hides the "Love This Site?" (weekly newsletter) module
    // from the sidebar
    removals.push(sidebar.querySelector('#newsletter-ad'));

    // Description: Hides the "Love This Site?" (weekly newsletter) module
    // from the sidebar
    removals.push(document.querySelector('#hot-network-questions'));

    removals.push(document.querySelector('#footer'));

    // Description: Hides the "Love This Site?" (weekly newsletter) module
    // from the sidebar
    removals.push(document.querySelector('#left-sidebar'));

    // Description: Hides the Hero box, asking to sign up for new users.
    removals.push(document.querySelector('.js-dismissable-hero'));

    // Description: Hides the top title banner bar appearing
    // only in some stackexchange sites.
    removals.push(document.querySelector('.site-header--container'));

    // Remove selected elements.
    removals.forEach(elementToRemove => {
        elementToRemove?.remove();
    })

    /**
    * If element contains text.
    */
    function contains(elem, text) {
        return (elem.textContent || elem.innerText || getText(elem)).indexOf(text) > -1;
    }

    /**
    * Get the text inside an element.
    */
    function getText(elem) {
        var node,
           ret = "",
           i = 0,
           nodeType = elem.nodeType;

        if ( !nodeType ) {
            // If no nodeType, this is expected to be an array
            for ( ; (node = elem[i]); i++ ) {
                // Do not traverse comment nodes
                ret += getText( node );
            }
        } else if ( nodeType === 1 || nodeType === 9 || nodeType === 11 ) {
            // Use textContent for elements
            // innerText usage removed for consistency of new lines
            if ( typeof elem.textContent === "string" ) {
                return elem.textContent;
            } else {
                // Traverse its children
                for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
                    ret += getText( elem );
                }
           }
        } else if ( nodeType === 3 || nodeType === 4 ) {
            return elem.nodeValue;
        }
        // Do not include comment or processing instruction nodes

        return ret;
    };
})();
2

This version works better with the latest version of Tampermonkey tested on 2023-02-28. You also have the option to put the linked questions at the bottom of the page, and expand the width of the content area. Just comment out the relevant line to enable it.

There is still a flash of hidden content while the page is loading. Use the CSS version in another answer if this bothers you. But that may not have all the functions below,

// ==UserScript==
// @name         StackExchange Focus mode (with linked questions)
// @description  hide distractions except linked questions
// @namespace    minimal-stackexchange.js
// @version      0.1
// @grant        none
// @match        https://stackoverflow.com/*
// @match        https://superuser.com/*
// @match        https://stackexchange.com/*
// @match        https://stackapps.com/*
// @match        https://mathoverflow.com/*
// @match        https://askubuntu.com/*
// @require      http://code.jquery.com/jquery-latest.min.js
// @grant        none
// ==/UserScript==

// adapted from
// https://gist.github.com/ykgoon/4fd8aad7c70918b636a687e671f68577@

var $ = window.jQuery;

function hideStuff() {

    // top bar stuff hiding
    $('.user-logged-in').hide();
    $('.-marketing-link').hide();

    // hide header and footer
    //$('header').hide();
    $('footer').hide();

    // Ask a question button
    //$('.aside-cta').hide();

    $("#hot-network-questions").hide();
    $('#hireme').hide();
    $('.everyonelovesstackoverflow').hide();
    $(".community-bulletin").hide();
    $('.module.community-bulletin').hide();
    $('#js-gdpr-consent-banner').hide();

    // hide left sidebar
    $('.left-sidebar').hide();

    // expand main content
    //$('#mainbar').css('width', '100%');

    // some random ad thing
    $('#newsletter-ad').hide();

    // RIGHT SIDEBAR
    // push to bottom of page and expand
    $('#sidebar').css({ float: 'none', width: '600px'});

    // remove StackOverflow promotions
    $('.mb16').hide()

    // remove spacer element
    $('.js-sidebar-zone').hide();

    // remove chat element
    $('.js-chat-ad-rooms').hide();
    $('#chat-feature').hide();
    // END RIGHT SIDEBAR
}

hideStuff();
1

I may be biased, but I kind of like this plugin for Firefox, which does the job. enter image description here

2
  • found a couple of extensions too, posted on the stackapps question. But this removed the sidebar totally. does not show the linked questions.
    – tinker
    Commented May 3, 2021 at 7:02
  • however, removing the whole sidebar is a good option if you REALLY want to focus. if you're the type that find linked questions interesting enough to sidetrack to :)
    – tinker
    Commented May 3, 2021 at 7:10

You must log in to answer this question.

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