■非エンジニアだけどClaude3に増田ミュート作ってもらったよ

これを改善してってお願いした。何書いてあるかわからないけど動いたよ。

https://anond.hatelabo.jp/20240125203115

// ==UserScript==
// @name         増田ミュート（白塗り版）
// @namespace    http://tampermonkey.net/
// @version      2024-06-26
// @description  ミュートワードを含む最小限の範囲を白塗りにする
// @author       You
// @match        https://anond.hatelabo.jp/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=hatelabo.jp
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const muteWords = [
        "弱者男性",
        "弱男",
        "弱者",
        "婚活",
        "男",
        "女",
        "年収",
        "下方婚",
        "発達障害",
        "発達",
        "ハッタツ",
        "ハッタショ",
        "ﾊｯﾀｼｮ",
        "競プロ",
        "競技プログラミング",
        "AtCoder",
    ];

    function whiteoutElement(element) {
        element.style.backgroundColor = 'white';
        element.style.color = 'white';
        element.style.textShadow = 'none';
        element.style.cursor = 'default';
        element.style.userSelect = 'none';  // テキスト選択を防止
        element.style.borderBottom = '1px dashed #ccc'; // 枠線を追加してテキストがあることを示す

        // リンクの場合、クリックを無効化
        if (element.tagName === 'A') {
            element.style.pointerEvents = 'none';
            element.removeAttribute('href');
        }

        // 子要素にも適用
        Array.from(element.children).forEach(child => {
            child.style.backgroundColor = 'white';
            child.style.color = 'white';
            child.style.textShadow = 'none';
        });

        // ツールチップを追加
        element.title = 'この内容にはミュートワードが含まれています';
    }

    function shouldMute(text) {
        return muteWords.some(word => {
            const parts = word.split('');
            const regex = new RegExp(parts.map(char => `${char}\\s*`).join(''), 'i');
            return regex.test(text);
        });
    }

    function findSmallestMuteableElement(element) {
        if (element.nodeType === Node.TEXT_NODE) {
            return shouldMute(element.textContent) ? element.parentElement : null;
        }

        if (element.tagName === 'PRE' || element.tagName === 'CODE') {
            return shouldMute(element.textContent) ? element : null;
        }

        for (let child of element.childNodes) {
            const result = findSmallestMuteableElement(child);
            if (result) return result;
        }

        return shouldMute(element.textContent) ? element : null;
    }

    function processElement(element) {
        const muteableElement = findSmallestMuteableElement(element);
        if (muteableElement) {
            whiteoutElement(muteableElement);
        }
    }

    function processAllElements(root = document.body) {
        const walker = document.createTreeWalker(
            root,
            NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
            null,
            false
        );

        let node;
        while (node = walker.nextNode()) {
            if (node.nodeType === Node.ELEMENT_NODE) {
                processElement(node);
            } else if (node.nodeType === Node.TEXT_NODE && node.parentElement) {
                processElement(node.parentElement);
            }
        }
    }

    function handleClickEvent(event) {
        setTimeout(() => {
            processAllElements(event.target);
        }, 100);
    }

    // 初回実行
    processAllElements();

    // クリックイベントの監視
    document.body.addEventListener('click', handleClickEvent);

    // DOM変更の監視
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach(node => {
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        processAllElements(node);
                    }
                });
            } else if (mutation.type === 'characterData') {
                processElement(mutation.target.parentNode);
            }
        });
    });

    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
})();

Permalink | 記事への反応(3) | 16:34

ツイートシェア