Greasy Fork

Hide Twitch Viewer Count on Specific Page

Hi there!

I'm looking for a script to hide the viewer count on the Twitch player page (see here). I am able to do this through uBlock Origin, but it hides it on every user page, and I like seeing on other pages.

In theory, the most flexible way to do this would be to hide it on the user's specific page, but if the scope is too large, my page is specifically https://www.twitch.tv/marotheit .

Thank you very much!

uBlock cosmetic filters support conditions:

twitch.tv##YOUR_COUNT_SELECTOR:if(meta[property="og:url"]:not([content*="/marotheit"]))

I cannot for the life of me get this to work. It won't even let me create a rule, let alone attempt to see if it works.

If I go directly into the filters and modify it there, it actually takes, but the result doesn't seem to change anything at all.

This is the code I am using to do so:

www.twitch.tv##.tw-mg-r-1.tw-inline-flex.tw-c-text-live > .tw-inline-flex.tw-tooltip-wrapper > .tw-stat:if(meta[property="og:url"]:not([content*="/marotheit"]))

I'm not familiar with twitch, but from what I see here in devtools on https://www.twitch.tv/marotheit, your selector's first part (.tw-mg-r-1.tw-inline-flex.tw-c-text-live >) is not a parent of the following parts so it doesn't catch anything even without :if. Try removing it.

So after combing through the uBlock Origin wiki, and asking gorhill himself for help, hiding an element on a specific page is not something that is possible through uBlock Origin, leading me back to my original post. Any help would be incredibly appreciated!

Edit: This is the script I've come up with, it doesn't work but I feel like it's close enough that I'm probably just missing something. .tw-stat is the div element I'm attempting to hide. If you're testing it out, keep in mind that the .tw-stat div won't show until I'm actually streaming, so it would be better to test it on another stream that is live.

// ==UserScript==
// @name         Remove Viewer Count
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Removes the 'Watching Now' counter on the user's Twitch page.
// @author       Marotheit
// @include      https://www.twitch.tv/marotheit
// @grant        none
// ==/UserScript==

document.getElementsByClassName('.tw-stat')[0].remove()

Since twitch.tv is an AJAX-driven site that dynamically updates its pages, you need to detect the page was changed by using a MutationObserver-based approach. Also, no need to actually delete the element if you can simply hide it via CSS.

// ==UserScript==//
// @name    twitch hide viewers
// @match   https://www.twitch.tv/*
// @grant   GM_addStyle
// ==/UserScript==

let style;
new MutationObserver(run).observe(document.body, {childList: true});
run();

function run() {
  const applied = style && style.parentNode;
  if (location.pathname.startsWith('/marotheit')) {
    if (applied) style.remove();
    return;
  }
  if (applied) return;
  if (!style) {
    style = GM_addStyle(`
      .tw-mg-r-1.tw-inline-flex.tw-c-text-live > .tw-inline-flex.tw-tooltip-wrapper > .tw-stat {
        display: none !important;
      }
    `);
  }
  document.documentElement.appendChild(style);
}

wOxxOm, I can't thank you enough for your help. I really, really appreciate it.

The script you gave me originally did the opposite of the intended script (which, after re-reading my initial post, may have been my fault,) which made the viewer count appear only on the specific page. This meant that I could see the viewer count on my page, but no others.

It was a very simple fix. I also made it a little more dynamic, as I think this would be a great tool for other Twitch streamers. Just in case someone stumbles upon this page at a later date, this is the final script I ended up using. All you would have to do is replace my username with yours, and you should be good to go! Don't forget to thank wOxxOm as well, 99% of the script is his work, I just tweaked it a tad.

// ==UserScript==//
// @name         Remove Viewer Count
// @version      1.0
// @description  Removes the 'Watching Now' counter on the predetermined user's Twitch page.
// @author       wOxxOm
// @match        https://www.twitch.tv/*
// @grant        GM_addStyle
// ==/UserScript==

let style;
new MutationObserver(run).observe(document.body, {childList: true});
var user = "bobross";
run();
function run() {
  const applied = style && style.parentNode;
  if (location.pathname != ('/' + user)) {
    if (applied) style.remove();
    return;
  }
  if (applied) return;
  if (!style) {
    style = GM_addStyle(`
      .tw-mg-r-1.tw-inline-flex.tw-c-text-live > .tw-inline-flex.tw-tooltip-wrapper > .tw-stat {
        display: none !important;
      }
    `);
  }
  document.documentElement.appendChild(style);
}