PTT預設字型使用微軟正黑體

PTT字型用微軟正黑體比較不傷眼

// ==UserScript==
// @name         PTT預設字型使用微軟正黑體
// @namespace    https://github.com/livinginpurple
// @version      2024.02.17.13
// @description  PTT字型用微軟正黑體比較不傷眼
// @license      WTFPL
// @author       livinginpurple
// @match        **://*.ptt.cc/*
// @match        **://disp.cc/b/*
// @match        **://disp.cc/m/*
// @match        **://disp.cc/ptt/*
// @run-at       document-end
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

(() => {
    'use strict';
    console.log(`${GM_info.script.name} is loading.`);

    const fontSetting = 'fontSetting';
    const options = [
        { label: '微軟正黑體', value: 'Microsoft JhengHei' },
        { label: 'Noto Sans CJK TC Regular', value: 'Noto Sans CJK TC Regular' },
        { label: 'Noto Sans Mono CJK TC Regular', value: 'Noto Sans Mono CJK TC Regular' },
        { label: 'Noto Sans TC', value: 'Noto Sans TC' },
        { label: 'Noto Serif TC', value: 'Noto Serif TC' },
        { label: '微軟雅黑體', value: 'Microsoft YaHei' },
        { label: 'MiSans', value: 'MiSans' },
        { label: 'MiSans TC', value: 'MiSans TC' }
    ];

    changeFont(GM_getValue(fontSetting, options[0].value)); // 預設使用第一個選項

    GM_registerMenuCommand('字型設定', openOptionsMenu);

    let container;

    function openOptionsMenu() {
        container = createContainer();

        const label = createLabel('請選擇字型：');
        const select = createSelect(options);
        select.value = GM_getValue(fontSetting, options[0].value); // 設定下拉選單的值
        const button = createButton('Save', saveOptions);

        appendChildren(container, [label, select, button]);
        document.body.appendChild(container);
    }

    function saveOptions() {
        const selectedOption = container.querySelector('select').value;
        GM_setValue(fontSetting, selectedOption);
        changeFont(selectedOption);
        container.remove();
    }

    function changeFont(font) {
        const fontSelector = location.hostname === 'disp.cc' ? 'body' : '.bbs-content';
        $(fontSelector).css({ 'font-family': font });
        console.log(`字型已切換成：${font}`);
    }

    function createContainer() {
        const container = document.createElement('div');
        Object.assign(container.style, {
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            padding: '20px',
            borderRadius: '10px',
            backgroundColor: '#fff',
            boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.5)',
            zIndex: '9999',
        });
        return container;
    }

    function createLabel(text) {
        const label = document.createElement('label');
        Object.assign(label, {
            textContent: text,
            style: 'display: block; margin-bottom: 5px; font-size: 14px; font-weight: bold;',
        });
        return label;
    }

    function createSelect(options) {
        const select = document.createElement('select');
        Object.assign(select.style, {
            marginBottom: '10px',
            width: '100%',
            height: '30px',
            border: '1px solid #ccc',
            borderRadius: '5px',
            backgroundColor: '#fff',
            fontSize: '14px',
            color: '#333',
            padding: '5px',
        });

        options.forEach(option => {
            const optionElement = document.createElement('option');
            Object.assign(optionElement, {
                value: option.value,
                textContent: option.label,
            });
            select.appendChild(optionElement);
        });

        return select;
    }

    function createButton(text, clickHandler) {
        const button = document.createElement('button');
        Object.assign(button, {
            textContent: text,
            style: 'width: 100%; height: 30px; border: none; border-radius: 5px; background-color: #007bff; color: #fff; font-size: 14px; cursor: pointer;',
        });
        button.addEventListener('click', clickHandler);
        return button;
    }

    function appendChildren(parent, children) {
        children.forEach(child => parent.appendChild(child));
    }

    console.log(`${GM_info.script.name} is running.`);
})();