☰

清除高亮|禁止划线[同桌英语|四六级题库]

在https://cet.itongzhuo.com/网站中添加一个浮动按钮来移除所有元素的highlighted类，并取消默认的高亮逻辑

// ==UserScript==
// @name         清除高亮|禁止划线[同桌英语|四六级题库]
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在https://cet.itongzhuo.com/网站中添加一个浮动按钮来移除所有元素的highlighted类，并取消默认的高亮逻辑
// @author       earth_developer@outlook.com
// @match        https://cet.itongzhuo.com/*
// @grant        none
// @license MIT License
// ==/UserScript==

(function() {
    'use strict';

    let isTextHighlightingDisabled = false;

    // 创建浮动按钮
    function createFloatingButton() {
        const button = document.createElement('button');
        const box = document.createElement('div');
        const switchLabel = document.createElement('label');
        const switchInput = document.createElement('input');
        switchInput.type = 'checkbox';
        switchLabel.appendChild(document.createTextNode(' 禁止划线'));
        switchLabel.appendChild(switchInput);
        button.innerText = '清除高亮';
        box.className = 'floating-div'; // 给按钮添加一个特定的 class 名称
        switchLabel.style.cssText = `
            display: flex;
            color: black !important;
            align-items: center;
            margin-top: 10px;
            cursor: pointer;
        `;
        switchInput.style.cssText = `
            width: 20px;
            height: 20px;
            margin-left:10px;
            background-color: #ccc;
            border-radius: 10px;
            position: relative;
            appearance: none;
            outline: none;
            transition: background-color 0.3s;
        `;
        const disableSelectStyle = `
        body, body * {
            -webkit-user-select: none; /* Chrome所有版本, Safari所有版本 */
            -moz-user-select: none;    /* Firefox所有版本 */
            -ms-user-select: none;     /* IE10+ */
            user-select: none;         /* 潜在的标准化属性 */
        }
    `;
        let style = document.createElement('style');
        switchInput.addEventListener('change', function(e) {
            this.style.backgroundColor = this.checked ? '#28a745' : '#ccc';
            isTextHighlightingDisabled = this.checked;

            if (isTextHighlightingDisabled) {
                // 禁止选择文本
                style.innerHTML = disableSelectStyle;
            } else {
                // 允许选择文本
                style.innerHTML = ''; // 清空样式内容，恢复默认行为
            }
        });
        (document.head || document.body).appendChild(style);
        // 使用内联样式以确保优先级，并使用 !important 确保样式不会被覆盖
        box.style.cssText = `
            position: fixed !important;
            bottom: 20px !important;
            right: 20px !important;
            width: 120px !important; /* 固定宽度 */
            height: 100px !important; /* 固定高度 */
            padding: 10px !important; /* 移除默认填充 */
            background-color: #f5f5f5 !important;
            color: white !important;
            border: 1px solid #ddd !important;
            border-radius: 5px !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
            cursor: move !important;
            z-index: 2147483647 !important; /* 设置尽可能高的 z-index */
            transition: background-color 0.3s !important;
            pointer-events: auto !important;
            user-select: none !important; /* 防止文本选择 */
            display: flex;
            flex-direction: column;
            align-items: center;
        `;
        button.addEventListener('click', removeHighlightedClass);
        button.style.cssText = `
            width: 100%; /* 按钮宽度占满盒子 */
            height: 40px;
            margin-bottom: 10px;
            padding: 0;
            background-color: #28a745; /* 主色调 */
            color: white; /* 辅助色 */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        `;
        // 初始化按钮的位置
        let rect = box.getBoundingClientRect();
        box.style.left = `${window.innerWidth - rect.width - 200}px`;
        box.style.top = `${window.innerHeight - rect.height - 200}px`;

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

        box.onmousedown = function(e) {
            isDragging = true;
            e.preventDefault(); // 防止默认行为（如文本选中）

            // 获取鼠标相对于按钮的偏移量
            rect = box.getBoundingClientRect();
            offsetX = e.clientX - rect.left;
            offsetY = e.clientY - rect.top;

            box.style.cursor = 'grabbing';
        };

        document.onmousemove = function(e) {
            if (isDragging) {
                // 更新按钮位置
                let newLeft = e.clientX - offsetX;
                let newTop = e.clientY - offsetY;

                // 确保按钮不超出窗口边界
                if (newLeft < 0) newLeft = 0;
                if (newTop < 0) newTop = 0;
                if (newLeft + rect.width > window.innerWidth) newLeft = window.innerWidth - rect.width;
                if (newTop + rect.height > window.innerHeight) newTop = window.innerHeight - rect.height;

                box.style.left = `${newLeft}px`;
                box.style.top = `${newTop}px`;
            }
        };

        document.onmouseup = function() {
            isDragging = false;
            box.style.cursor = 'move';
        };

        // 将按钮添加到 body 中
        document.body.appendChild(box);
        box.appendChild(button)
        box.appendChild(switchLabel)

        // 调试信息：打印 body 的 class 列表
        console.log('Body classes:', document.body.classList);
    }

    // 移除 highlighted 类
    function removeHighlightedClass() {
        document.querySelectorAll('.highlighted').forEach(element => {
            element.classList.remove('highlighted');
        });
    }

    // 页面加载完成时执行
    window.addEventListener('load', (event) => {
        createFloatingButton();// 创建浮动按钮
    });

})();