网页背景颜色更改

Greasy Fork is available in English.
网页背景颜色更改

通过设置界面自定义背景颜色和类名以适应更多网页
当前为 2024-07-17 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         网页背景颜色更改
// @namespace    http://tampermonkey.net/
// @version      0.9
// @description  通过设置界面自定义背景颜色和类名以适应更多网页
// @author       You
// @license MIT
// @include      *
// @grant        GM_registerMenuCommand
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // 默认设置
    let settings = JSON.parse(localStorage.getItem('backgroundChangerSettings')) || {};

    // 当前网站的设置
    let currentSite = window.location.hostname;
    if (!settings[currentSite]) {
        settings[currentSite] = {
            classes: [],
            backgroundColor: 'white'
        };
    }

    function saveSettings() {
        localStorage.setItem('backgroundChangerSettings', JSON.stringify(settings));
    }

    function changeBackgroundColor() {
        let siteSettings = settings[currentSite];
        siteSettings.classes.forEach(className => {
            const elements = document.querySelectorAll(`.${className}`);
            elements.forEach(function(element) {
                element.style.setProperty('background', siteSettings.backgroundColor, 'important');
            });
        });
    }

    // 添加设置菜单
    GM_registerMenuCommand("设置背景颜色", showSettingsDialog);

    // 显示设置对话框
    function showSettingsDialog() {
        const dialog = document.createElement('div');
        dialog.style.position = 'fixed';
        dialog.style.top = '50%';
        dialog.style.left = '50%';
        dialog.style.transform = 'translate(-50%, -50%)';
        dialog.style.backgroundColor = 'white';
        dialog.style.border = '1px solid black';
        dialog.style.padding = '20px';
        dialog.style.zIndex = '1001';
        dialog.style.width = '80%';
        dialog.style.maxWidth = '400px';

        const classInput = document.createElement('input');
        classInput.type = 'text';
        classInput.value = settings[currentSite].classes.join(', ');
        classInput.placeholder = '输入类名英文","逗号分隔';
        classInput.style.width = '100%';
        classInput.style.marginBottom = '10px';
        dialog.appendChild(classInput);

        const colorInput = document.createElement('input');
        colorInput.type = 'color';
        colorInput.value = settings[currentSite].backgroundColor;
        colorInput.style.width = '100%';
        colorInput.style.marginBottom = '10px';
        dialog.appendChild(colorInput);

        const buttonContainer = document.createElement('div');
        buttonContainer.style.display = 'flex';
        buttonContainer.style.justifyContent = 'space-between';

        const saveButton = document.createElement('button');
        saveButton.innerText = '保存';
        saveButton.addEventListener('click', () => {
            settings[currentSite].classes = classInput.value.split(',').map(cls => cls.trim()).filter(cls => cls);
            settings[currentSite].backgroundColor = colorInput.value;
            saveSettings();
            changeBackgroundColor();
            document.body.removeChild(dialog);
        });
        buttonContainer.appendChild(saveButton);

        const cancelButton = document.createElement('button');
        cancelButton.innerText = '取消';
        cancelButton.addEventListener('click', () => {
            document.body.removeChild(dialog);
        });
        buttonContainer.appendChild(cancelButton);

        dialog.appendChild(buttonContainer);
        document.body.appendChild(dialog);
    }

    // Initial change on load
    window.addEventListener('load', changeBackgroundColor);

    // Use MutationObserver to listen for changes in the DOM
    const observer = new MutationObserver(changeBackgroundColor);
    observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'style'] });

    // Add throttled event listeners for specific events that may change the DOM
    document.addEventListener('click', function() {
        setTimeout(changeBackgroundColor, 100); // Delay to allow changes to take effect
    }, true);

    document.addEventListener('input', function() {
        setTimeout(changeBackgroundColor, 100); // Delay to allow changes to take effect
    }, true);
})();