PageWatcher

Show the thread's page in the Thread Watcher

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         PageWatcher
// @namespace    https://www.4chan.org/
// @version      1.0.0
// @description  Show the thread's page in the Thread Watcher
// @author       Wolvan
// @match        *://www.4chan.org/*
// @match        *://boards.4chan.org/*
// @grant        none
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// ==/UserScript==
/* jshint -W097 */
'use strict';

this.$ = this.jQuery = jQuery.noConflict(true);

// Your code here...
function addCSS( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
        style.styleSheet.cssText = code;
    } else {
        style.innerHTML = code;
    }
    document.getElementsByTagName("head")[0].appendChild( style );
}

var cache = {};
function getThreadPages() {
    cache = {};
    var watched_threads = $("#thread-watcher #watched-threads div");
    var boards = {};
    watched_threads.each(function(index, thread) {
        var id = $(thread).data("full-i-d");
        var boardId = id.split(".")[0]; var threadId = id.split(".")[1];
        if (!boards[boardId]) {
            boards[boardId] = [threadId];
        } else {
            if (boards[boardId].indexOf(threadId) === -1) {
                boards[boardId].push(threadId);
            }
        }
    });
    $.each(boards, function(boardId, value) {
        $.getJSON("//a.4cdn.org/" + boardId + "/catalog.json", "", function (data) {
            value.forEach(function (threadId) {
                var threadCode = boardId + "." + threadId;
                var foundThreadId = false;
                data.forEach(function (pageObj) {
                    if (foundThreadId) { return; }
                    var page = pageObj.page;
                    pageObj.threads.forEach(function (thread) {
                        if (thread.no === parseInt(threadId)) {
                            cache[threadCode] = page;
                            var pageTxt = page;
                            if (page < 10) {
                                pageTxt = "0" + page;
                            }
                            var watcher_link = watched_threads.filter('[data-full-i-d="' + threadCode + '"]').find(".watcher-link");
                            if (watcher_link.find(".watcher-page").length) {
                                watcher_link.find(".watcher-page").text("[" + pageTxt + "]");
                            } else {
                                watcher_link.prepend("<span class='watcher-page'>[" + pageTxt + "]</span>");
                            }
                            if (page === 10) {
                                watcher_link.find(".watcher-page").addClass("page10");
                            } else {
                                watcher_link.find(".watcher-page").removeClass("page10");
                            }
                            foundThreadId = true;
                        }
                    });
                });
            });
        });
    });
}
function setFromCache() {
    mutObs_keepPages.disconnect();
    $.each(cache, function(threadCode, page) {
        var watched_threads = $("#thread-watcher #watched-threads div");
        var pageTxt = page;
        if (page < 10) {
            pageTxt = "0" + page;
        }
        var watcher_link = watched_threads.filter('[data-full-i-d="' + threadCode + '"]').find(".watcher-link");
        if (watcher_link.find(".watcher-page").length) {
            watcher_link.find(".watcher-page").text("[" + pageTxt + "]");
        } else {
            watcher_link.prepend("<span class='watcher-page'>[" + pageTxt + "]</span>");
        }
        if (page === 10) {
            watcher_link.find(".watcher-page").addClass("page10");
        } else {
            watcher_link.find(".watcher-page").removeClass("page10");
        }
    });
    mutObs_keepPages.observe($("#watched-threads")[0], {
        childList: true,
        subtree: true,
        characterData: true
    });
}

var mutObs_keepPages = new MutationObserver(function (mutations) {
    setFromCache();
});

var mutObs_refresh = new MutationObserver(function (mutations) {
    var mutationHandled = false;
    mutations.forEach(function (mutation) {
        if (mutationHandled) { return; }
        getThreadPages();
        mutationHandled = true;
    });
});
var mutObs_threadwatcherWait = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if(!mutation.addedNodes || mutation.addedNodes.length < 1) { return; }
        $.each(mutation.addedNodes, function(index, node) {
            if(node.id === "thread-watcher") {
                getThreadPages();
                mutObs_refresh.observe($(node).find(".refresh.fa.fa-refresh")[0], {
                    attributes: true
                });
                mutObs_keepPages.observe($("#watched-threads")[0], {
                    childList: true,
                    subtree: true,
                    characterData: true
                });
                mutObs_threadwatcherWait.disconnect();
            } else {
                return;
            }
        });
    });
});

$(document).ready(function() {
    addCSS(".watcher-page { margin-right: 2px; }");
    addCSS(".watcher-page.page10 { color: red; }");
    if ($("#thread-watcher").length) {
        getThreadPages();
        mutObs_refresh.observe($("#thread-watcher").find(".refresh.fa.fa-refresh")[0], {
            attributes: true
        });
        mutObs_keepPages.observe($("#watched-threads")[0], {
            childList: true,
            subtree: true,
            characterData: true
        });
    } else {
        mutObs_threadwatcherWait.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
});