Twitchのチャット欄にNG機能を追加します。Chat Filter for Twitch chat
// ==UserScript==
// @name Twitch Chat Filter
// @namespace TwitchChatFilterScript
// @version 0.9.5
// @description Twitchのチャット欄にNG機能を追加します。Chat Filter for Twitch chat
// @author bd
// @match https://www.twitch.tv/*
// @icon https://www.google.com/s2/favicons?domain=twitch.tv
// @license MIT
// @noframes
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
const SCRIPT_PREFIX = 'TCF'; // スクリプト接頭辞（ログやID用）
const log = (...args) => console.log(`[${SCRIPT_PREFIX}]`, ...args);
const error = (...args) => console.error(`[${SCRIPT_PREFIX}]`, ...args);
// GMストレージのキー
const STORAGE_KEYS = {
BANNED_WORDS: `${SCRIPT_PREFIX}_BannedWords`,
BANNED_USERS: `${SCRIPT_PREFIX}_BannedUsers`,
AUTO_BAN: `${SCRIPT_PREFIX}_AutoBan`,
SHOW_BAN_BUTTON: `${SCRIPT_PREFIX}_ShowBanButton`,
};
// --- 設定管理 ---
const config = {
bannedWordPatterns: [], // 正規表現オブジェクトの配列
bannedUserIds: new Set(), // 高速検索のためのSet
rawBannedWords: "", // 生のNGワード文字列（テキストエリア用）
rawBannedUsers: "", // 生のNGユーザー文字列（テキストエリア用）
autoBanEnabled: false, // NGワード発言者の自動BANが有効か
showBanButton: true, // チャットにNGボタンを表示するか
// 設定をストレージから読み込む
load() {
this.rawBannedWords = GM_getValue(STORAGE_KEYS.BANNED_WORDS, "");
this.rawBannedUsers = GM_getValue(STORAGE_KEYS.BANNED_USERS, "");
this.autoBanEnabled = GM_getValue(STORAGE_KEYS.AUTO_BAN, false);
this.showBanButton = GM_getValue(STORAGE_KEYS.SHOW_BAN_BUTTON, true);
this.parseLists(); // 読み込んだ文字列を内部形式（RegExp[], Set）に変換
log("設定を読み込みました。");
},
// 設定をストレージに保存する
save() {
// Setを改行区切りの文字列に戻す
this.rawBannedUsers = Array.from(this.bannedUserIds).join('\n');
GM_setValue(STORAGE_KEYS.BANNED_WORDS, this.rawBannedWords);
GM_setValue(STORAGE_KEYS.BANNED_USERS, this.rawBannedUsers);
GM_setValue(STORAGE_KEYS.AUTO_BAN, this.autoBanEnabled);
GM_setValue(STORAGE_KEYS.SHOW_BAN_BUTTON, this.showBanButton);
log("設定を保存しました。");
this.parseLists(); // 保存後、内部状態も最新に保つために再パース
ui.updatePanelValues(); // 保存後にパネルの表示も更新
},
// 生の文字列リストを内部形式（RegExp[], Set）にパースする
parseLists() {
// NGワードを正規表現オブジェクトの配列に変換
this.bannedWordPatterns = this.rawBannedWords
.split(/\r?\n/) // 改行で分割
.map(word => word.trim()) // 前後の空白を削除
.filter(word => word !== "") // 空行を除去
.map(word => {
try {
// '*' や '.*' だけのような広すぎるパターンを基本的なチェックで除外
if (word === '*' || word === '.*') return null;
// 大文字小文字を区別しない正規表現を作成
return new RegExp(word, 'i');
} catch (e) {
// 無効な正規表現はスキップしてエラーログを出力
error(`無効な正規表現パターンをスキップしました: "${word}"`, e);
return null;
}
})
.filter(pattern => pattern !== null); // null（無効/スキップされたパターン）を除去
// NGユーザーをSetに変換
this.bannedUserIds = new Set(
this.rawBannedUsers
.split(/\r?\n/) // 改行で分割
.map(id => id.trim()) // 前後の空白を削除
.filter(id => id !== "") // 空行を除去
);
},
// NGワードを追加する（内部リストへの直接追加、保存は別途必要）
addBannedWord(word) {
word = word.trim();
// 単語が存在し、かつ現在のリストに含まれていない場合に追加
if (word && !this.rawBannedWords.split(/\r?\n/).includes(word)) {
this.rawBannedWords = (this.rawBannedWords ? this.rawBannedWords + "\n" : "") + word;
}
},
// NGユーザーを追加する（内部リストへの直接追加、保存は別途必要）
addBannedUser(userId) {
userId = userId.trim();
// ユーザーIDが存在し、かつSetに含まれていない場合に追加
if (userId && !this.bannedUserIds.has(userId)) {
this.bannedUserIds.add(userId);
}
}
};
// --- UI管理 ---
const ui = {
panelElement: null, // 設定パネルの要素
bannedWordsTextarea: null, // NGワード入力欄
bannedUsersTextarea: null, // NGユーザー入力欄
usersCountSpan: null, // NGユーザー数の表示欄
bannedCountSpan: null, // 非表示にしたチャット数の表示欄
saveButton: null, // 保存ボタン
toggleButton: null, // パネル表示切り替えボタン（フィルターアイコン）
autoBanCheckbox: null, // 自動BANチェックボックス
showBanButtonCheckbox: null, // NGボタン表示チェックボックス
isPanelVisible: false, // パネルが表示されているか
bannedMessageCount: 0, // 非表示にしたメッセージのカウント
// CSSスタイルをページに注入する
injectStyles() {
GM_addStyle(`
/* フィルターボタンとそのパネルを含むコンテナ */
#${SCRIPT_PREFIX}-panel-container {
position: relative; /* パネルの絶対配置の基準点 */
display: inline-flex; /* 他の要素とインラインで並び、内部要素をflexで配置 */
vertical-align: middle; /* 隣接要素と垂直方向中央揃え */
margin-right: 5px; /* 右隣の要素（設定ボタン）との間にスペース */
}
/* フィルターアイコンのボタン自体 */
#${SCRIPT_PREFIX}-panel-toggle-button {
/* Twitchのクラスで高さやパディングが制御されることが多い。必要ならここで調整 */
/* height: 3rem; */
/* padding: 0 5px; */
}
/* 設定パネル本体 */
#${SCRIPT_PREFIX}-panel {
position: absolute; /* 絶対配置 */
bottom: calc(100% + 5px); /* ボタンの真上、5pxの間隔をあける */
/* *** MODIFIED: left: 0 から right: 0 に変更 *** */
right: 0; /* コンテナの右端を基準に配置 */
width: 300px; /* パネル幅 */
max-width: 90vw; /* 最大幅はビューポートの90% */
background-color: rgba(24, 24, 27, 0.95); /* 背景色（Twitchダークテーマ風） */
border: 1px solid var(--color-border-base); /* 境界線 */
border-radius: var(--border-radius-medium); /* 角丸 */
z-index: 1000; /* 他の要素より手前に表示 */
display: none; /* デフォルトでは非表示 */
padding: 15px; /* 内側余白 */
color: var(--color-text-base); /* テキスト色 */
font-size: 1.3rem; /* フォントサイズ */
flex-direction: column; /* 内部要素を縦に並べる */
gap: 12px; /* 内部要素間の間隔 */
}
#${SCRIPT_PREFIX}-panel.visible {
display: flex; /* パネルを表示 */
}
/* パネル内部の要素 */
#${SCRIPT_PREFIX}-panel textarea {
width: 100%; /* 幅いっぱい */
box-sizing: border-box; /* borderを含めて幅計算 */
min-height: 120px; /* 最小高さ */
background-color: var(--color-background-input); /* 背景色 */
color: var(--color-text-input); /* テキスト色 */
border: 1px solid var(--color-border-input); /* 境界線 */
border-radius: var(--border-radius-small); /* 角丸 */
font-family: inherit; /* 親要素のフォントを継承 */
font-size: 1.2rem; /* フォントサイズ */
}
#${SCRIPT_PREFIX}-panel label {
display: flex; /* チェックボックスとテキストを横並び */
align-items: center; /* 垂直方向中央揃え */
gap: 8px; /* 要素間の間隔 */
font-size: 1.2rem; /* フォントサイズ */
cursor: pointer; /* クリック可能なカーソル */
}
#${SCRIPT_PREFIX}-panel input[type="checkbox"] {
cursor: pointer; /* クリック可能なカーソル */
}
#${SCRIPT_PREFIX}-panel span[id$="-count"] { /* "-count"で終わるIDを持つspan要素（ユーザー数、非表示数） */
font-size: 1rem; /* フォントサイズ */
color: var(--color-text-alt-2); /* テキスト色（少し薄め） */
}
/* チャットメッセージに追加するNGボタン */
.${SCRIPT_PREFIX}-ban-button {
background: none; border: none; padding: 0; /* ボタンのデフォルトスタイルを解除 */
margin-left: 5px; /* 左側の要素との間隔 */
cursor: pointer; /* クリック可能なカーソル */
color: var(--color-text-alt-2); /* デフォルトの色（薄め） */
vertical-align: middle; /* 垂直方向中央揃え */
display: inline-flex; /* アイコンが正しく配置されるように */
opacity: 0.6; /* デフォルトでは少し透明 */
}
.${SCRIPT_PREFIX}-ban-button:hover {
color: var(--color-text-error); /* ホバー時に赤色に */
opacity: 1; /* ホバー時に不透明に */
}
.${SCRIPT_PREFIX}-ban-button svg {
width: 14px; height: 14px; /* アイコンサイズ */
fill: currentColor; /* アイコンの色をテキスト色に合わせる */
}
/* チャットメッセージにホバーしたときにNGボタンを表示 */
.chat-line__message:hover .${SCRIPT_PREFIX}-ban-button,
[data-test-selector="video-chat-message-list-item"]:hover .${SCRIPT_PREFIX}-ban-button {
opacity: 1;
}
/* パネル内の保存ボタン */
.${SCRIPT_PREFIX}-save-button {
padding: 5px 15px; /* 内側余白 */
background-color: var(--color-background-button-primary-default); /* 背景色 */
color: var(--color-text-button-primary); /* テキスト色 */
border: none; /* 境界線なし */
border-radius: var(--border-radius-medium); /* 角丸 */
cursor: pointer; /* クリック可能なカーソル */
align-self: flex-end; /* パネル内で右端に配置 */
}
.${SCRIPT_PREFIX}-save-button:hover {
background-color: var(--color-background-button-primary-hover); /* ホバー時の背景色 */
}
`);
},
// パネルを作成し、指定された要素（設定ボタン）の *前* にフィルターボタンを挿入する
createPanel(settingsButtonElement) {
// settingsButtonElement が見つからないか、既にパネルが存在する場合は何もしない
if (!settingsButtonElement || document.getElementById(`${SCRIPT_PREFIX}-panel-container`)) {
if(!settingsButtonElement) error("位置指定のためのチャット設定ボタンが見つかりませんでした。");
return;
}
this.injectStyles(); // CSSを注入
// フィルターボタンとパネル全体を囲むコンテナを作成
const panelContainer = document.createElement('div');
panelContainer.id = `${SCRIPT_PREFIX}-panel-container`;
// フィルターアイコンボタンのHTML
const toggleButtonHTML = `
<button class="ScCoreButton-sc-1qn4ixc-0 jGqsfG ScButtonIcon-sc-o7ndmn-0 fNzXyu" id="${SCRIPT_PREFIX}-panel-toggle-button" aria-label="チャットフィルター設定を開く">
<div class="ScIconLayout-sc-1bgeryd-0 dxXcWw tw-icon" style="display: flex; align-items: center; justify-content: center;">
<svg width="20px" height="20px" viewBox="0 0 20 20" fill="currentColor">
<path d="M3 3h14l-5 7v5l-4 2v-7L3 3z" />
</svg>
</div>
</button>`;
// 設定パネルのHTML（簡略化版）
const panelHTML = `
<div id="${SCRIPT_PREFIX}-panel">
<span>NGワード <small>(正規表現)</small></span>
<textarea id="${SCRIPT_PREFIX}-banned-words" rows="7"></textarea>
<span>NGユーザー <small>(ID)</small></span>
<span id="${SCRIPT_PREFIX}-users-count">0人</span>
<textarea id="${SCRIPT_PREFIX}-banned-users" rows="7"></textarea>
<label>
<input type="checkbox" id="${SCRIPT_PREFIX}-show-ban-button-checkbox"> NGボタン表示
</label>
<label>
<input type="checkbox" id="${SCRIPT_PREFIX}-auto-ban-checkbox"> NGワード発言者を自動NG
</label>
<span id="${SCRIPT_PREFIX}-banned-count">0件のチャットを非表示</span>
<button class="${SCRIPT_PREFIX}-save-button" id="${SCRIPT_PREFIX}-save-button">保存</button>
</div>`;
panelContainer.innerHTML = toggleButtonHTML + panelHTML;
// フィルターボタンのコンテナを、指定された設定ボタン要素の *前* に挿入
settingsButtonElement.before(panelContainer);
log("フィルターボタンコンテナを設定ボタンの前に挿入しました。");
// パネル内の各要素への参照を取得（innerHTMLを設定した後でないと取得できない）
this.panelElement = document.getElementById(`${SCRIPT_PREFIX}-panel`);
this.bannedWordsTextarea = document.getElementById(`${SCRIPT_PREFIX}-banned-words`);
this.bannedUsersTextarea = document.getElementById(`${SCRIPT_PREFIX}-banned-users`);
this.usersCountSpan = document.getElementById(`${SCRIPT_PREFIX}-users-count`);
this.bannedCountSpan = document.getElementById(`${SCRIPT_PREFIX}-banned-count`);
this.saveButton = document.getElementById(`${SCRIPT_PREFIX}-save-button`);
this.toggleButton = document.getElementById(`${SCRIPT_PREFIX}-panel-toggle-button`);
this.autoBanCheckbox = document.getElementById(`${SCRIPT_PREFIX}-auto-ban-checkbox`);
this.showBanButtonCheckbox = document.getElementById(`${SCRIPT_PREFIX}-show-ban-button-checkbox`);
this.attachPanelEvents(); // イベントリスナーを設定
this.updatePanelValues(); // 初期値をパネルに表示
log("設定パネルが作成され、ボタンが追加されました。");
},
// パネルの表示値を現在の設定に合わせて更新する
updatePanelValues() {
if (!this.panelElement) return; // パネルが存在しない場合は何もしない
this.bannedWordsTextarea.value = config.rawBannedWords;
this.bannedUsersTextarea.value = Array.from(config.bannedUserIds).join('\n'); // Setから文字列に戻す
this.usersCountSpan.textContent = `${config.bannedUserIds.size}人`;
this.autoBanCheckbox.checked = config.autoBanEnabled;
this.showBanButtonCheckbox.checked = config.showBanButton;
this.updateBannedCountDisplay(); // 非表示カウント表示も更新
},
// パネル関連のイベントリスナーを設定する
attachPanelEvents() {
// フィルターボタンクリック時の動作
this.toggleButton.addEventListener('click', (e) => {
e.stopPropagation(); // 親要素へのイベント伝播を停止
this.togglePanelVisibility(); // パネル表示切り替え
});
// 保存ボタンクリック時の動作
this.saveButton.addEventListener('click', () => this.savePanelSettings());
// 自動BANチェックボックス変更時の動作
this.autoBanCheckbox.addEventListener('change', (e) => {
config.autoBanEnabled = e.target.checked;
config.save(); // 変更を即時保存
});
// NGボタン表示チェックボックス変更時の動作
this.showBanButtonCheckbox.addEventListener('change', (e) => {
config.showBanButton = e.target.checked;
config.save(); // 変更を即時保存
});
// パネル外クリック時にパネルを閉じる動作
document.addEventListener('click', (e) => {
// パネルが表示されていて、クリックがパネル内でもフィルターボタンでもない場合
if (this.isPanelVisible && this.panelElement && this.toggleButton && !this.panelElement.contains(e.target) && !this.toggleButton.contains(e.target)) {
this.togglePanelVisibility(); // パネルを閉じる
}
}, true); // キャプチャフェーズでイベントを捕捉（他の要素のクリックイベントより先に処理するため）
},
// パネルの表示/非表示を切り替える
togglePanelVisibility() {
this.isPanelVisible = !this.isPanelVisible;
if (this.panelElement) {
// 'visible' クラスの付け外しで表示を制御 (CSSで display: flex/none を切り替え)
this.panelElement.classList.toggle('visible', this.isPanelVisible);
}
},
// パネルの内容を設定に保存する
savePanelSettings() {
config.rawBannedWords = this.bannedWordsTextarea.value; // NGワードを読み取り
// NGユーザーを読み取り、Setに変換
const usersFromTextarea = this.bannedUsersTextarea.value
.split(/\r?\n/)
.map(id => id.trim())
.filter(id => id !== "");
config.bannedUserIds = new Set(usersFromTextarea);
config.save(); // 設定オブジェクトのsaveメソッドを呼び出す（内部でストレージ保存、再パース、パネル更新が行われる）
log("パネル設定を保存しました。");
// 保存後もパネルは開いたままにする（ユーザーが手動で閉じる）
},
// 非表示にしたチャット数の表示を更新する
updateBannedCountDisplay() {
if(this.bannedCountSpan) {
this.bannedCountSpan.textContent = `${this.bannedMessageCount}件のチャットを非表示`;
}
},
// 非表示にしたチャット数を1増やす
incrementBannedCount() {
this.bannedMessageCount++;
this.updateBannedCountDisplay(); // 表示を更新
},
// チャットメッセージにNGボタンを追加する
addBanButton(containerElement, userId) {
// 設定で非表示、または既にボタンが存在する場合は追加しない
if (!config.showBanButton || containerElement.querySelector(`.${SCRIPT_PREFIX}-ban-button`)) return;
const button = document.createElement('button');
button.className = `${SCRIPT_PREFIX}-ban-button`;
button.setAttribute('aria-label', `ユーザー「${userId}」をNGに追加`);
button.dataset.userId = userId; // クリックハンドラ用にユーザーIDを保持
// ボタンアイコンのSVG
button.innerHTML = `<svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>`;
// ボタンクリック時の動作
button.addEventListener('click', (e) => {
e.stopPropagation(); // チャットメッセージ自体のクリックイベントを発火させない
const userIdToBan = e.currentTarget.dataset.userId; // 保持しておいたIDを取得
log(`手動でユーザーをNGに追加: ${userIdToBan}`);
config.addBannedUser(userIdToBan); // 設定に追加
config.save(); // 設定を保存（内部でパネルのユーザー数も更新される）
// 親のチャット要素を見つけて非表示にする
const chatElement = e.currentTarget.closest(selectors.chatMessageWrapperSelector);
if(chatElement) {
this.hideElement(chatElement);
}
});
// メッセージ本文要素を探す
const messageBody = containerElement.querySelector(selectors.textContainerSelector);
if (messageBody) {
// メッセージ本文の末尾（通常は最後のspanやテキストノード）の後ろにボタンを挿入
if (messageBody.lastChild && messageBody.lastChild.nodeType === Node.ELEMENT_NODE) {
messageBody.lastChild.after(button);
} else {
messageBody.appendChild(button); // 末尾が要素でない場合のフォールバック
}
} else {
// メッセージ本文が見つからない場合のフォールバック（コンテナの末尾に追加、位置はずれる可能性あり）
containerElement.appendChild(button);
}
},
// 要素を非表示にする
hideElement(element) {
element.style.display = 'none';
// スクリプトによって非表示にされたことを示す属性を付与（再処理防止用）
element.dataset.tcfHidden = 'true';
},
};
// --- セレクター定義 ---
let selectors = {}; // ページの種類に応じて設定されるセレクターを格納するオブジェクト
// ページの種類（ライブ配信かVOD/Clipか）に基づいてセレクターを設定する
const setSelectors = (streaming) => {
if (streaming) { // ライブ配信の場合
selectors = {
chatScrollableArea: '.chat-scrollable-area__message-container', // チャットメッセージが表示されるコンテナ
chatMessageWrapperSelector: '.chat-line__message', // 個々のチャットメッセージ全体を囲む要素
textContainerSelector: '[data-a-target="chat-line-message-body"]', // メッセージ本文（テキストやエモート）を含む要素
displayNameSelector: '.chat-author__display-name', // ユーザー表示名
// chatButtonsContainer: '.chat-input__buttons-container div:last-child', // 参考：ボタン群を含むコンテナ（現在は直接使用せず）
chatSettingsButton: '[data-a-target="chat-settings"]', // フィルターボタンの配置基準となるチャット設定ボタン
};
} else { // VOD/Clipの場合
selectors = {
chatScrollableArea: '.video-chat__message-list-wrapper > div[role="list"]',
chatMessageWrapperSelector: '[data-test-selector="video-chat-message-list-item"]',
textContainerSelector: '[data-a-target="chat-message-text"]',
displayNameSelector: '[data-a-target="chat-message-username"]',
// chatButtonsContainer: '.video-chat__input .video-chat__input-buttons-container', // 参考：VODのボタンコンテナ
chatSettingsButton: '[data-a-target="chat-settings"]', // VODのチャット設定ボタン
};
}
log(`セレクターをモードに合わせて設定: ${streaming ? 'ライブ配信' : 'VOD/Clip'}`);
};
// --- コアロジック ---
// 指定されたセレクターに一致する最初の要素を取得するヘルパー関数
const getElement = (selector, parent = document) => parent.querySelector(selector);
// 指定されたセレクターに一致するすべての要素を取得するヘルパー関数
const getElements = (selector, parent = document) => parent.querySelectorAll(selector);
// チャット要素からユーザー情報を抽出する
function getUserInfo(chatElement) {
const nameElement = getElement(selectors.displayNameSelector, chatElement);
if (!nameElement) return null; // 名前要素が見つからなければnull
const name = nameElement.textContent?.trim() || ''; // 名前のテキストを取得
// ユーザーIDは名前要素自身か、その親の data-a-user 属性にあることが多い
const idElement = nameElement.closest('[data-a-user]') || nameElement;
const id = idElement.getAttribute('data-a-user') || name; // IDがなければ名前をフォールバックとして使用
return { name, id };
}
// チャット要素からメッセージ本文（エモートのaltテキスト含む）を抽出する
function getMessageText(chatElement) {
const textContainer = getElement(selectors.textContainerSelector, chatElement);
if (!textContainer) return ''; // テキストコンテナが見つからなければ空文字
let text = '';
// 子ノードを走査してテキストとエモートのaltテキストを結合
textContainer.childNodes.forEach(node => {
if (node.nodeType === Node.TEXT_NODE) { // テキストノードの場合
text += node.textContent;
} else if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'IMG') { // IMG要素（エモート）の場合
text += node.alt; // alt属性値を使用
} else if (node.nodeType === Node.ELEMENT_NODE) { // その他の要素（spanなど）の場合
// ネストされたテキストも取得
text += node.textContent;
}
});
return text.trim(); // 前後の空白を削除
}
// メッセージがブロック対象かどうかを判定する
function isBlocked(userId, messageText) {
// NGユーザーリストに含まれているかチェック（高速）
if (config.bannedUserIds.has(userId)) {
return { blocked: true, reason: 'User' };
}
// NGワードの正規表現パターンに一致するかチェック
for (const pattern of config.bannedWordPatterns) {
// 空メッセージに対する複雑な正規表現チェックは避ける（必要なら調整）
if (messageText || pattern.source !== '.*') {
if (pattern.test(messageText)) { // test()で一致判定
return { blocked: true, reason: 'Word', pattern: pattern.source }; // 一致したらブロック対象
}
}
}
// どちらにも一致しなければブロックしない
return { blocked: false };
}
// 個々のチャットメッセージ要素を処理する
function processChatMessage(chatElement) {
// スクリプトで既に非表示にされているか、正しいチャット要素でない場合はスキップ
if (chatElement.dataset?.tcfHidden || !chatElement.matches(selectors.chatMessageWrapperSelector)) {
return;
}
try {
const userInfo = getUserInfo(chatElement); // ユーザー情報取得
if (!userInfo) return; // ユーザー情報が取れなければ中断
const messageText = getMessageText(chatElement); // メッセージ本文取得
const blockCheck = isBlocked(userInfo.id, messageText); // ブロック対象か判定
if (blockCheck.blocked) { // ブロック対象の場合
ui.hideElement(chatElement); // 要素を非表示
ui.incrementBannedCount(); // 非表示カウントを増やす
//log(`メッセージをブロック: ${userInfo.id} (理由: ${blockCheck.reason}${blockCheck.pattern ? ` - "${blockCheck.pattern}"` : ''})`);
// 自動BANロジック
if (blockCheck.reason === 'Word' && config.autoBanEnabled && !config.bannedUserIds.has(userInfo.id)) {
log(`ユーザーを自動NGに追加: ${userInfo.id} (原因ワード: "${blockCheck.pattern}")`);
config.addBannedUser(userInfo.id); // ユーザーをNGリストに追加
config.save(); // 設定を即時保存（内部でUIも更新）
}
} else if(config.showBanButton) { // ブロック対象外で、NGボタン表示が有効な場合
ui.addBanButton(chatElement, userInfo.id); // NGボタンを追加
}
} catch (e) {
error("チャットメッセージ処理中にエラー:", e, chatElement);
}
}
// --- DOM監視 (Observers) ---
let chatObserver = null; // チャット欄の変更を監視するオブザーバー
let initObserver = null; // 初期化に必要な要素の出現を監視するオブザーバー
// チャットコンテナ内の新しいメッセージを監視する
function observeChat(chatContainer) {
if (chatObserver) chatObserver.disconnect(); // 既存のオブザーバーがあれば停止
// 新しいノードが追加されたときに発火するMutationObserverを作成
chatObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => { // 追加された各ノードについて処理
if (node.nodeType === Node.ELEMENT_NODE) { // 要素ノードのみ対象
// 追加されたノード自体がチャットメッセージの場合
if (node.matches(selectors.chatMessageWrapperSelector)) {
processChatMessage(node);
}
// 追加されたノードの子孫にチャットメッセージが含まれる場合（ネストされている場合など）
getElements(selectors.chatMessageWrapperSelector, node).forEach(processChatMessage);
}
});
});
});
// 監視を開始（子リストの変更と、サブツリーの変更を監視）
chatObserver.observe(chatContainer, { childList: true, subtree: true });
log("チャット監視を開始しました。");
// 既に表示されているメッセージも処理する
log("既存メッセージを処理中...");
getElements(selectors.chatMessageWrapperSelector, chatContainer).forEach(processChatMessage);
}
// 初期化に必要な要素（チャット欄、設定ボタン）が表示されるのを待つ
function waitForElements() {
// 現在のページがライブ配信か、VOD/Clipかを判定
const isStreaming = !location.pathname.startsWith('/videos/') && !location.pathname.includes('/clip/');
setSelectors(isStreaming); // ページ種別に応じてセレクターを設定
// DOMの変更を監視するMutationObserverを作成
initObserver = new MutationObserver((mutations, observer) => {
const chatContainer = getElement(selectors.chatScrollableArea); // チャット欄
const chatSettingsBtn = getElement(selectors.chatSettingsButton); // 配置基準となる設定ボタン
// チャット欄と設定ボタンの両方が見つかったら初期化処理へ
if (chatContainer && chatSettingsBtn) {
// 既に初期化済みでないかチェック（複数回発火することがあるため）
if (!document.getElementById(`${SCRIPT_PREFIX}-panel-container`)) {
log("チャットコンテナと設定ボタンが見つかりました。");
initialize(chatContainer, chatSettingsBtn); // 初期化関数を呼び出す
}
// 必要な要素が見つかったら、このオブザーバーは停止する
observer.disconnect();
log("初期化監視を停止しました。");
}
});
// body要素全体の変更（子要素の追加・削除、サブツリーの変更）を監視開始
initObserver.observe(document.body, { childList: true, subtree: true });
log("チャットコンテナとチャット設定ボタンを待機中...");
}
// --- 初期化処理 ---
// スクリプトのメイン処理を開始する
function initialize(chatContainer, settingsButtonElement) {
// 二重初期化防止
if (document.getElementById(`${SCRIPT_PREFIX}-panel-container`)) {
log("初期化スキップ: 既に初期化済みです。");
return;
}
log("Twitchチャットフィルターを初期化中...");
config.load(); // 設定読み込み
ui.createPanel(settingsButtonElement); // UI（フィルターボタンとパネル）を作成・配置
observeChat(chatContainer); // チャット監視を開始
log("初期化完了。");
}
// --- スクリプト開始 ---
// ページの読み込み状態に応じてwaitForElementsを呼び出す
// Tampermonkey 4.0以降のより信頼性の高い方法
if (typeof GM_info === 'object' && GM_info.scriptHandler === 'Tampermonkey' && GM_info.version >= "4.0") {
// 既にページが読み込み完了またはインタラクティブ状態なら即時実行
if(document.readyState === 'complete' || document.readyState === 'interactive') {
waitForElements();
} else {
// DOMContentLoadedイベントを待って実行（一度だけ実行）
window.addEventListener('DOMContentLoaded', waitForElements, { once: true });
}
} else {
// 古い環境や他のスクリプトマネージャー用のフォールバック
if (document.readyState === 'loading') { // まだ読み込み中の場合
document.addEventListener('DOMContentLoaded', waitForElements); // DOMContentLoadedを待つ
} else { // 既に読み込み完了している場合
waitForElements(); // 即時実行
}
}
})();