☰

B站弹幕屏蔽词导入器

一个可以快速导入Bilibili弹幕屏蔽词的油猴脚本，网页端导入并同步至移动端

// ==UserScript==
// @name         B站弹幕屏蔽词导入器
// @namespace    https://github.com/xingguang2333/BiliBlocklistImporter/
// @version      1.0.1
// @description  一个可以快速导入Bilibili弹幕屏蔽词的油猴脚本，网页端导入并同步至移动端
// @author       StarsOcean
// @match        https://www.bilibili.com/video/*
// @match        https://www.bilibili.com/
// @icon         https://www.bilibili.com/favicon.ico
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @grant        GM_notification
// @grant        GM_download
// @connect      *
// @license      GPLv3
// ==/UserScript==

(function() {
    'use strict';

    // 配置项
    const CONFIG = {
        CHECK_INTERVAL: 300,      // 操作间隔时间(ms)
        MAX_WAIT_TIME: 5000,     // 元素等待最大时间(ms)
        RETRY_TIMES: 3,           // 失败重试次数
        FIRST_USE_KEY: 'BHELPER_PRO_FIRST_USE' // 本地存储键名
    };

    // 元素选择器
    const SELECTORS = {
        DROPDOWN_WRAP: '.bui-dropdown-wrap',              // 设置面板容器
        CURRENT_SETTING: '.bui-dropdown-name',           // 当前设置显示
        MENU_ITEM: '.bui-dropdown-item',                  // 菜单项
        BLOCK_INPUT: '.bpx-player-block-add-input',       // 规则输入框
        ADD_BUTTON: '.bui-area.bui-button-gray',          // 添加按钮
        SETTING_BUTTON: '.video-settings-button'           // 设置按钮
    };

    // 样式注入
    GM_addStyle(`
    .bili-helper-pro {
        position: fixed;
        right: 25px;
        bottom: 25px;
        z-index: 2147483647;
    }
    .main-btn-pro {
        width: 56px;
        height: 56px;
        background: #00a1d6;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .main-btn-pro:hover {
        transform: scale(1.15) rotate(15deg);
        background: #0091c8;
    }
    .menu-pro {
        position: absolute;
        right: 0;
        bottom: 70px;
        width: 200px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
    }
    .menu-pro.show {
        opacity: 1;
        transform: translateY(0);
    }
    .menu-item-pro {
        padding: 14px 20px;
        font-size: 14px;
        color: #1a1a1a;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
    }
    .menu-item-pro:hover {
        background: #f5f5f7;
        padding-left: 25px;
    }
    .input-modal-pro {
        /* 保持原有输入框样式 */
    }
    .input-modal-pro {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        z-index: 2147483647;
        min-width: 300px;
    }
    .url-input {
        width: 100%;
        padding: 8px;
        margin: 10px 0;
        border: 1px solid #ddd;
    }
    .btn-group {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }
    .confirm-btn, .cancel-btn {
        flex:1;
        padding: 8px;
        background: #00a1d6;
        color: white;
        border: none;
        border-radius: 4px;
    }
    .cancel-btn {
        background: #f0f0f0;
        color: #333;
    }
    .close-btn {
        margin-top: 15px;
        padding: 8px 16px;
        background: #00a1d6;
        color: white;
        border-radius: 4px;
    }
    .about-modal-pro {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 2147483647;
    min-width: 400px;
    max-width: 500px;
    font-family: Arial, sans-serif;
    cursor: move;
    }
    .about-modal-pro h3 {
        margin: 0 0 15px;
        font-size: 20px;
        color: #00a1d6;
    }

    .about-modal-pro p {
        margin: 10px 0;
        font-size: 14px;
        color: #333;
    }

    .about-modal-pro ul {
        margin: 10px 0;
        padding-left: 20px;
    }

    .about-modal-pro ul li {
        margin: 5px 0;
        font-size: 14px;
        color: #555;
    }

    .about-modal-pro a {
        color: #00a1d6;
        text-decoration: none;
    }

    .about-modal-pro a:hover {
        text-decoration: underline;
    }

    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #f0f0f0;
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #333;
    }

    .close-btn:hover {
        background: #e0e0e0;
    }
    .guide-modal-pro {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        z-index: 2147483647;
        min-width: 500px;
        max-width: 600px;
        font-family: Arial, sans-serif;
        cursor: move;
    }
    .guide-modal-pro h2 {
        color: #00a1d6;
        margin: 0 0 15px;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 10px;
    }
    .guide-content {
        max-height: 60vh;
        overflow-y: auto;
        padding-right: 10px;
    }
    .dont-show-again {
        display: flex;
        align-items: center;
        margin: 15px 0;
        font-size: 14px;
    }
    .dont-show-again input {
        margin-right: 8px;
    }
    .progress-container {
        position: fixed;
        left: 20px;
        bottom: 20px;
        width: 300px;
        background: rgba(255,255,255,0.9);
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 2147483646;
        display: none;
    }
    .progress-bar {
        height: 12px;
        background: #e0e0e0;
        border-radius: 6px;
        overflow: hidden;
        margin: 8px 0;
    }
    .progress-fill {
        height: 100%;
        background: #00a1d6;
        width: 0%;
        transition: width 0.3s ease;
    }
    .progress-text {
        font-size: 12px;
        color: #666;
        text-align: center;
    }
    `);

    // 主界面
    const createUI = () => {
        const container = document.createElement('div');
        container.className = 'bili-helper-pro';

        const mainBtn = document.createElement('div');
        mainBtn.className = 'main-btn-pro';
        mainBtn.innerHTML = '🛡️';

        const menu = document.createElement('div');
        menu.className = 'menu-pro';

        // 菜单项
        const menuItems = [
            { name: '使用必看', icon: '📘', action: showGuide },
            { name: 'TXT导入', icon: '📁', action: handleLocalImport },
            { name: '在线导入', icon: '🌐', action: handleWebImport },
            {
                name: '屏蔽词库',
                icon: '📚',
                action: () => {
                    // 在新标签页打开规则仓库
                    window.open(
                        'https://github.com/xingguang2333/BiliBlocklistImporter/tree/main/Blocklist',
                        '_blank',
                        'noopener,noreferrer'
                    );
                    // 可选：添加点击统计
                    console.log('[统计] 屏蔽词库菜单点击');
                }
            },
            { name: '关于', icon: 'ℹ️', action: showAbout }
        ];

        menuItems.forEach(item => {
            const btn = document.createElement('div');
            btn.className = 'menu-item-pro';
            btn.innerHTML = `${item.icon} ${item.name}`;
            btn.addEventListener('click', item.action);
            menu.appendChild(btn);
        });

        // 事件绑定
        mainBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            menu.classList.toggle('show');
        });

        document.addEventListener('click', () => {
            menu.classList.remove('show');
        });

        container.appendChild(menu);
        container.appendChild(mainBtn);
        document.body.appendChild(container);

        const progressContainer = document.createElement('div');
        progressContainer.className = 'progress-container';
        progressContainer.innerHTML = `
            <div class="progress-bar">
                <div class="progress-fill"></div>
            </div>
            <div class="progress-text">准备就绪</div>
        `;
        document.body.appendChild(progressContainer);
    };

    // 本地导入处理
    const handleLocalImport = async () => {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = '.txt';
        input.onchange = async (e) => {
            const file = e.target.files[0];
            try {
                const text = await file.text();
                await processRules(text);
                showToast('本地导入成功!', 'success');
            } catch (err) {
                showToast(`导入失败: ${err}`, 'error');
            }
        };
        input.click();
    };

    // 在线导入处理
    const handleWebImport = () => {
        const modal = document.createElement('div');
        modal.className = 'input-modal-pro';
        modal.innerHTML = `
            <h3>在线导入</h3>
            <input type="url" placeholder="输入TXT文件URL" class="url-input">
            <div class="btn-group">
                <button class="confirm-btn">确定</button>
                <button class="cancel-btn">取消</button>
            </div>
        `;

        modal.querySelector('.confirm-btn').onclick = async () => {
            const url = modal.querySelector('.url-input').value;
            if (!url) return;

            try {
                const text = await fetchWithRetry(url, CONFIG.RETRY_TIMES);
                await processRules(text);
                showToast('在线导入成功!', 'success');
            } catch (err) {
                showToast(`导入失败: ${err}`, 'error');
            }
            modal.remove();
        };

        modal.querySelector('.cancel-btn').onclick = () => modal.remove();
        document.body.appendChild(modal);
    };

    const processRules = async (text) => {
        const progressContainer = document.querySelector('.progress-container');
        const progressFill = document.querySelector('.progress-fill');
        const progressText = document.querySelector('.progress-text');

        try {
            // 显示进度条
            progressContainer.style.display = 'block';
            progressFill.style.width = '0%';
            progressText.textContent = '初始化中...';

            // 展开屏蔽设置
            if (!await checkCurrentSetting()) {
                await expandSettingsPanel();
                await selectBlockSetting();
            }

            // 执行规则导入
            const rules = text.split('\n').filter(l => l.trim());
            let successCount = 0;
            const total = rules.length;

            for (let i = 0; i < rules.length; i++) {
                const rule = rules[i];
                try {
                    await waitForElement(SELECTORS.BLOCK_INPUT, CONFIG.MAX_WAIT_TIME);
                    const input = document.querySelector(SELECTORS.BLOCK_INPUT);
                    const addBtn = document.querySelector(SELECTORS.ADD_BUTTON);

                    if (!input || !addBtn) throw new Error('页面元素未找到');

                    input.value = rule.trim();
                    addBtn.click();
                    successCount++;

                    // 更新进度
                    const progress = ((i + 1) / total * 100).toFixed(1);
                    progressFill.style.width = `${progress}%`;
                    progressText.textContent = `处理中 ${i + 1}/${total} (${progress}%)`;

                    await wait(CONFIG.CHECK_INTERVAL);
                } catch (err) {
                    console.error(`规则 "${rule}" 导入失败:`, err);
                }
            }

            // 完成时更新状态
            progressFill.style.width = '100%';
            progressText.textContent = `完成！成功导入 ${successCount}/${total} 条规则`;

            // 3秒后隐藏进度条
            setTimeout(() => {
                progressContainer.style.display = 'none';
            }, 3000);

        } catch (error) {
            // 错误处理
            progressContainer.style.display = 'none';
            showToast(`导入中断: ${error.message}`, 'error');
            throw error;
        }
    };

    // 辅助函数
    const checkCurrentSetting = async () => {
        const current = document.querySelector(SELECTORS.CURRENT_SETTING);
        return current?.textContent.includes('屏蔽设定');
    };

    const expandSettingsPanel = async () => {
        const dropdown = document.querySelector(SELECTORS.DROPDOWN_WRAP);
        if (dropdown) {
            dropdown.classList.add('bui-dropdown-unfold');
            await wait(800);
        }
    };

    const selectBlockSetting = async () => {
        const items = await waitForElements(SELECTORS.MENU_ITEM);
        const target = Array.from(items).find(el =>
            el.textContent.match(/屏蔽设定|block setting/i)
        );

        if (target) {
            target.click();
            await wait(1000);
        }
    };

    const wait = (ms) => new Promise(r => setTimeout(r, ms));

    const waitForElement = (selector, timeout = 5000) => {
        return new Promise((resolve, reject) => {
            const start = Date.now();
            const check = () => {
                const el = document.querySelector(selector);
                if (el) return resolve(el);
                if (Date.now() - start > timeout) {
                    reject(new Error(`Element ${selector} not found`));
                } else {
                    setTimeout(check, 100);
                }
            };
            check();
        });
    };

    const waitForElements = (selector) => waitForElement(selector).then(() =>
        document.querySelectorAll(selector)
    );

    const fetchWithRetry = async (url, retries = 3) => {
        for (let i = 0; i < retries; i++) {
            try {
                return await new Promise((resolve, reject) => {
                    GM_xmlhttpRequest({
                        method: 'GET',
                        url: `https://api.codetabs.com/v1/proxy?quest=${encodeURIComponent(url)}`,
                        onload: (res) => res.status === 200 ?
                            resolve(res.responseText) :
                            reject(new Error(`HTTP ${res.status}`)),
                        onerror: reject
                    });
                });
            } catch (err) {
                if (i === retries - 1) throw err;
                await wait(1000 * (i + 1));
            }
        }
    };

    const showToast = (message, type = 'info') => {
        const colors = {
            info: '#2196F3',
            success: '#4CAF50',
            error: '#F44336'
        };
        const toast = document.createElement('div');
        toast.textContent = message;
        toast.style.bottom = '150px';
        toast.style.cssText = `
            position: fixed;
            bottom: 150px;
            right: 30px;
            background: ${colors[type]};
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            animation: slideIn 0.3s ease-out;
        `;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 3000);
    };

    const showGuide = (isFirstTime = false) => {
        // 添加首页元素存在性检测
        if (!document.querySelector(SELECTORS.SETTING_BUTTON) && window.location.pathname === '/') {
            console.log('检测到当前为首页，跳过播放器元素检测');
        }
        const modal = document.createElement('div');
        modal.className = 'guide-modal-pro';
        modal.innerHTML = `
            <h2>📖 使用必读指南</h2>
            <div class="guide-content">
                <p><strong>重要提示：</strong>使用本插件前请仔细阅读以下内容</p>
                <ul>
                    <li>🔒 本插件仅用于学习交流，请勿用于商业用途</li>
                    <li>⚙️ 导入规则前请确保格式为每行一个关键词</li>
                    <li>🔄 更新插件后建议清除旧规则重新导入</li>
                    <li>⚠️ 必须在视频页面导入才有效果</li>
                </ul>
                <p><strong>你可以用下面方式获得规则：</strong></p>
                <ol>
                    <li><a href="https://github.com/xingguang2333/BiliBlocklistImporter/tree/main/Blocklist" target="_blank">屏蔽词库</a></li>
                    <li></li>
                    <li>热心b友分享，并把他们保存在一个txt文件，一行一个屏蔽词</li>
                </ol>
            </div>
            ${isFirstTime ? `
            <div class="dont-show-again">
                <input type="checkbox" id="dontShow">
                <label for="dontShow">不再显示此提示</label>
            </div>
            ` : ''}
            <button class="bui-button bui-button-blue" style="width:100%">
                ${isFirstTime ? '我已知晓，开始使用' : '关闭'}
            </button>
            <button class="close-btn">×</button>
        `;

        // 关闭功能
        const closeModal = () => {
            if (isFirstTime) {
                const dontShow = modal.querySelector('#dontShow').checked;
                if (dontShow) {
                    localStorage.setItem(CONFIG.FIRST_USE_KEY, '1');
                }
            }
            modal.remove();
        };

        modal.querySelector('button.bui-button').onclick = closeModal;
        modal.querySelector('.close-btn').onclick = closeModal;

        // 拖动功能（复用about窗口的拖动逻辑）
        let isDragging = false;
        let offsetX, offsetY;
        modal.addEventListener('mousedown', (e) => {
            if (!e.target.closest('button, input, a')) {
                isDragging = true;
                offsetX = e.clientX - modal.offsetLeft;
                offsetY = e.clientY - modal.offsetTop;
            }
        });
        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                modal.style.left = `${e.clientX - offsetX}px`;
                modal.style.top = `${e.clientY - offsetY}px`;
            }
        });
        document.addEventListener('mouseup', () => isDragging = false);

        document.body.appendChild(modal);
    };

    // 新增：首次访问检测
    const checkFirstUse = () => {
        if (!localStorage.getItem(CONFIG.FIRST_USE_KEY)) {
            showGuide(true);
        }
    };

    const showAbout = () => {
        const modal = document.createElement('div');
        modal.className = 'about-modal-pro';
        modal.innerHTML = `
            <h3>B站弹幕屏蔽词导入 v1.0</h3>
            <p>一个可以快速导入Bilibili弹幕屏蔽词的油猴脚本，网页端导入并同步至移动端。A Tampermonkey script that can quickly import Bilibili subtitle blocking words, import on the web page and synchronize to the mobile terminal.</p>
            <p>相关链接：</p>
            <ul>
                <li><a href="https://moestars.top" target="_blank">个人网站</a></li>
                <li><a href="https://github.com/xingguang2333/BiliBlocklistImporter/" target="_blank">GitHub</a></li>
                <li><a href="https://greasyfork.org/zh-CN/scripts/your-script" target="_blank">GreasyFork</a></li>
                <li><a href="https://github.com/xingguang2333/BiliBlocklistImporter/tree/main/Blocklist" target="_blank">屏蔽词库</a></li>
            </ul>
            <button class="close-btn">×</button>
        `;

        // 关闭按钮
        modal.querySelector('.close-btn').onclick = () => modal.remove();

        // 拖动功能
        let isDragging = false;
        let offsetX, offsetY;

        modal.addEventListener('mousedown', (e) => {
            if (e.target.tagName.toLowerCase() !== 'a') { // 避免拖动时误点击链接
                isDragging = true;
                offsetX = e.clientX - modal.offsetLeft;
                offsetY = e.clientY - modal.offsetTop;
            }
        });

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                modal.style.left = `${e.clientX - offsetX}px`;
                modal.style.top = `${e.clientY - offsetY}px`;
            }
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });

        document.body.appendChild(modal);
    };

    // 初始化
    (function init() {
        const checkDOMLoaded = () => {
            if (document.readyState === 'complete' || document.readyState === 'interactive') {
                createUI();
                checkFirstUse();
            } else {
                document.addEventListener('DOMContentLoaded', () => {
                    createUI();
                    checkFirstUse();
                });
            }
        };

        // 无论当前页面类型都执行初始化
        checkDOMLoaded();
    })();

})();