Show Twitch channel chatter count next to the channel viewer count.

twitch-chatter-count.js

// ==UserScript==
// @name        Twitch Chatters Count
// @author      Flipeador
// @version     1.0.2
// @icon        https://www.google.com/s2/favicons?sz=128&domain=twitch.tv
// @homepageURL https://gist.github.com/flipeador/7cdead05b6f00b34b743dbde071db34d
// @downloadURL https://gist.githubusercontent.com/flipeador/7cdead05b6f00b34b743dbde071db34d/raw/twitch-chatter-count.js
// @match       *://www.twitch.tv/*
// @run-at      document-idle
// ==/UserScript==

let viewers, chatters;

class Twitch {
    static gqlUrl = 'https://gql.twitch.tv/gql';
    static clientId = 'kimne78kx3ncx6brgo4mv6wki5h1ko';

    static getCurrentChannelName() {
        return location.pathname.split('/')[1];
    }

    static getViewersElement() {
        return document.querySelector('[data-a-target=animated-channel-viewers-count]');
    }

    static async gql(query, variables) {
        return fetch(Twitch.gqlUrl, {
            method: 'POST',
            headers: {
                'Client-ID': Twitch.clientId,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ query, variables })
        }).then(response => response.json());
    }

    static async getChattersCount(name) {
        const query = `
            query GetChannelChattersCount($name: String!) {
                channel(name: $name) {
                    chatters {
                        count
                    }
                }
            }`;

        const json = await Twitch.gql(query, { name });
        return json?.data?.channel?.chatters?.count;
    }
}

function checkElementTime($element, ms, ts=Date.now()) {
  const timestamp = Number($element.dataset.timestamp);
  if (timestamp && ts - timestamp <= ms) return;
  return $element.dataset.timestamp = ts;
}

async function updateChattersCount($viewers) {
    if (!checkElementTime($viewers, 60000)) return;
    const channel = Twitch.getCurrentChannelName();
    chatters = await Twitch.getChattersCount(channel);
    console.log('Channel chatters count:', chatters);
}

function setTwitchTrackerClickHandler($viewers) {
  if ($viewers.dataset.twitchtracker) return;
  $viewers.dataset.twitchtracker = true;
  $viewers.title = 'Twitch Tracker';
  $viewers.style.cursor = 'pointer';
  $viewers.addEventListener('click', () => {
    const channel = Twitch.getCurrentChannelName();
    open(`https://twitchtracker.com/${channel}`, '_blank');
  });
}

async function main() {
    const $viewers = Twitch.getViewersElement();
    if ($viewers) {
      setTwitchTrackerClickHandler($viewers);
      const count = parseInt($viewers.textContent);
      const haslb = $viewers.textContent.includes('[');
      if (viewers !== count || !haslb) {
        if (viewers !== count)
          await updateChattersCount($viewers, viewers = count);
        $viewers.replaceChildren($viewers.firstChild);
        $viewers.append(new Text(` [${chatters}]`));
      }
    }
    setTimeout(main, 1000);
}

main();

Description

Show Twitch channel chatter count next to the channel viewer count.

Installation

1. Install Tampermonkey or Violentmonkey.
2. Create a new script from the extension control panel.
3. Paste the content of the twitch-chatter-count.js script.
4. Save the newly created script and you are done.