DesignMode 切换器

Greasy Fork is available in English.
DesignMode 切换器

使用 Ctrl+Shift+E 切换页面的 DesignMode 状态
换行
// ==UserScript==
// @name         DesignMode 切换器
// @namespace    http://tampermonkey.net/
// @version      1.0
// @license MIT
// @description  使用 Ctrl+Shift+E 切换页面的 DesignMode 状态
// @author       Nuclear_Fish_cyq
// @match        *://*/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // 初始化状态变量
    let designModeActive = false;

    // 添加键盘事件监听器
    document.addEventListener('keydown', function(event) {
        // 检查是否按下了 Ctrl+Shift+E
        if (event.ctrlKey && event.shiftKey && event.key === 'E') {
            event.preventDefault(); // 阻止默认行为

            // 切换designMode状态
            designModeActive = !designModeActive;

            if (designModeActive) {
                document.designMode = 'on';
                console.log('DesignMode 已开启 - 现在可以编辑页面内容');
            } else {
                document.designMode = 'off';
                console.log('DesignMode 已关闭');
            }
        }
    });

    // 显示状态通知的函数
    function showNotification(message, type) {
        // 移除已存在的通知
        const existingNotification = document.getElementById('designModeNotification');
        if (existingNotification) {
            existingNotification.remove();
        }

        // 创建通知元素
        const notification = document.createElement('div');
        notification.id = 'designModeNotification';
        notification.textContent = message;
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            background-color: ${type === 'success' ? '#4CAF50' : '#2196F3'};
            color: white;
            border-radius: 5px;
            font-family: Arial, sans-serif;
            font-size: 16px;
            font-weight: bold;
            z-index: 999999;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            opacity: 0.95;
            transition: opacity 0.3s;
        `;

        // 添加到页面
        document.body.appendChild(notification);

        // 3秒后淡出并移除
        setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }

    // 添加说明提示（仅在首次加载时显示）
    if (!localStorage.getItem('designModeHintShown')) {
        setTimeout(() => {
            localStorage.setItem('designModeHintShown', 'true');
        }, 1000);
    }

    // 添加样式以便在DesignMode开启时显示提示
    const style = document.createElement('style');
    style.textContent = `
        [contenteditable="true"], [designmode="on"] {
            outline: 2px dashed rgba(0, 150, 255, 0.3) !important;
        }

        .design-mode-active::before {
            content: "✎ 可编辑模式";
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: #4CAF50;
            color: white;
            padding: 5px 10px;
            border-radius: 3px;
            font-size: 12px;
            font-family: Arial, sans-serif;
            z-index: 999999;
            pointer-events: none;
        }
    `;
    document.head.appendChild(style);

    // 监听designMode变化，为body添加/移除类
    const observer = new MutationObserver(function(mutations) {
        if (document.designMode === 'on') {
            document.body.classList.add('design-mode-active');
        } else {
            document.body.classList.remove('design-mode-active');
        }
    });

    observer.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['designmode']
    });

    console.log('DesignMode 切换器已加载。按 Ctrl+Shift+E 切换编辑模式。');
})();