YouTube - Normalize Titles

youtube-normalize-title.user.js

// ==UserScript==
// @name         YouTube - Normalize Titles
// @namespace    https://gist.github.com/lbmaian/36b05afd0c595874c8bcb8a7616c8774
// @downloadURL  https://gist.github.com/lbmaian/36b05afd0c595874c8bcb8a7616c8774/raw/youtube-normalize-title.user.js
// @updateURL    https://gist.github.com/lbmaian/36b05afd0c595874c8bcb8a7616c8774/raw/youtube-normalize-title.user.js
// @version      0.1
// @description  Normalize YouTube titles that abuse unicode for bold/italics/etc.
// @author       lbmaian
// @match        https://www.youtube.com/*
// @exclude      https://www.youtube.com/embed/*
// @icon         https://www.youtube.com/favicon.ico
// @run-at       document-start
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const DEBUG = false;

    const logContext = '[YouTube - Normalize Titles]';

    var debug;
    if (DEBUG) {
        debug = function(...args) {
            console.debug(logContext, ...args);
        }
    } else {
        debug = function(...args) {}
    }

    function log(...args) {
        console.log(logContext, ...args);
    }

    function warn(...args) {
        console.warn(logContext, ...args);
    }

    function error(...args) {
        console.error(logContext, ...args);
    }

    // Note: Following all relies on YT internals.

    function updatePageData(pageData, logContext) {
        const contents = pageData.response?.contents?.twoColumnWatchNextResults?.results?.results?.contents;
        if (contents) {
            for (let i = 0; i < contents.length; i++) {
                normalizeTextData(contents[i]?.videoPrimaryInfoRenderer?.title,
                                  logContext + '.response.contents.twoColumnWatchNextResults.results.results.contents[' + i + '].videoPrimaryInfoRenderer.title');
            }
        }
        normalizeTextData(pageData.response?.playerOverlays?.playerOverlayRenderer?.videoDetails?.playerOverlayVideoDetailsRenderer?.title,
                          logContext + '.response.playerOverlays.playerOverlayRenderer.videoDetails.playerOverlayVideoDetailsRenderer.title');
    }

    function updatePlayerResponse(playerResponse, logContext) {
        normalizeTextData(playerResponse.microformat?.playerMicroformatRenderer?.title,
                          logContext, 'microformat.playerMicroformatRenderer.title');
        transformPropLogged(playerResponse.videoDetails, 'title', normalizeText, logContext + '.videoDetails.title');
    }

    function normalizeTextData(textData, logContext) {
        transformPropLogged(textData, 'simpleText', normalizeText, logContext + '.simpleText');
        if (textData?.runs) {
            for (let i = 0; i < textData.runs.length; i++) {
                transformPropLogged(textData.runs[i], 'text', normalizeText, logContext + '.runs[' + i + ']');
            }
        }
    }

    function normalizeText(text) {
        return text.normalize('NFKC')
            .replaceAll(/[【〖〘〚]/g, '[').replaceAll(/[】〗〙〛]/g, ']')
            .replaceAll(/[「『」』]/g, '"')
            .replaceAll(/[〈《]/g, '<').replaceAll(/[〉》]/g, '>');
    }

    function transformPropLogged(obj, prop, transform, logContext) {
        if (obj?.[prop]) {
            const oldVal = obj[prop];
            const newVal = transform(oldVal);
            if (oldVal !== newVal) {
                obj[prop] = newVal;
                log(logContext, '\n', oldVal, '=>', newVal);
            }
        }
    }

    function pollUntil(target, options, func) {
        if (func([])) {
            return;
        }
        new MutationObserver((records, observer) => {
            if (func(records)) {
                observer.disconnect();
            }
        }).observe(target, options);
    }

    // Navigating to YouTube watch page can happen via AJAX rather than new page load.
    // We can monitor this with YT's custom yt-page-data-fetched event,
    // which conveniently also fires even for new/refreshed pages.
    // yt-navigate-finish would also work (evt.detail.detail) but yt-page-data-fetched fires earlier.
    document.addEventListener('yt-page-data-fetched', evt => {
        debug('Navigated to', evt.detail.pageData.url);
        debug(evt);
        updatePageData(evt.detail.pageData, 'yt-page-data-fetched.detail.pageData');
    });

    // Change the title ASAP, so also update head>title and ytInitialPlayerResponse
    pollUntil(document.head, { childList: true }, () => {
        const title = document.head.getElementsByTagName('TITLE')[0];
        if (title?.textContent) {
            transformPropLogged(title, 'textContent', normalizeText, 'head>title');
            return true;
        }
    });
    pollUntil(document.documentElement, { childList: true }, () => {
        if (!document.body) {
            return;
        }
        pollUntil(document.body, { childList: true }, () => {
            if (window.ytInitialPlayerResponse) {
                updatePlayerResponse(window.ytInitialPlayerResponse, 'ytInitialPlayerResponse');
                return true;
            }
        });
        return true;
    });
})();

thanks, you are my savior.