网页工具箱 - 多功能网页增强工具

来自缓存
Greasy Fork is available in English.
网页工具箱 - 多功能网页增强工具

集合多种实用网页工具的增强插件，包括广告屏蔽、阅读模式、网页截图、链接提取等功能
换行
// ==UserScript==
// @name         网页工具箱 - 多功能网页增强工具
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  集合多种实用网页工具的增强插件，包括广告屏蔽、阅读模式、网页截图、链接提取等功能
// @author       shenfangda
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_setClipboard
// @grant        GM_download
// @grant        GM_xmlhttpRequest
// @grant        GM_info
// @connect      *
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // 配置
    const config = {
        // 工具列表
        tools: [
            { id: 'adblock', name: '广告屏蔽', icon: '🚫' },
            { id: 'reader', name: '阅读模式', icon: '📖' },
            { id: 'screenshot', name: '网页截图', icon: '📸' },
            { id: 'links', name: '链接提取', icon: '🔗' },
            { id: 'images', name: '图片提取', icon: '🖼️' },
            { id: 'colorpicker', name: '颜色选择器', icon: '🎨' },
            { id: 'text', name: '文本提取', icon: '📝' },
            { id: 'password', name: '密码生成', icon: '🔑' },
            { id: 'qrcode', name: '二维码生成', icon: '🔲' },
            { id: 'translate', name: '快速翻译', icon: '🌐' }
        ],
        
        // 默认设置
        defaultSettings: {
            adblockSelectors: [
                // 基础广告选择器
                '.ad', '.ads', '.advertisement', '[class*="ad-"]', '[id*="ad-"]',
                '.google-ads', '.banner-ad', '.sidebar-ad', '.popup-ad',
                
                // 常见广告网络
                '[data-ad-client]', '[data-ad-slot]', '[data-google-query-id]',
                '.adsbygoogle', '.google-auto-placed', '.google-ad-block',
                
                // 社交媒体广告
                '.fb-ad', '.facebook-ad', '.twitter-ad', '.instagram-ad',
                
                // 视频广告
                '.video-ad', '.pre-roll-ad', '.post-roll-ad', '.mid-roll-ad',
                
                // 弹窗和浮动广告
                '.modal-ad', '.overlay-ad', '.floating-ad', '.sticky-ad',
                
                // 内容推荐广告
                '.recommended-content', '.related-posts', '[class*="recommend"]',
                '.outbrain', '.taboola', '[data-widget-id]',
                
                // 其他常见广告标识
                '[data-ad]', '[data-advertisement]', '.sponsored', '.promotion',
                '.affiliate', '.partner-content', '.native-ad', '.advertorial'
            ],
            readerMode: {
                maxWidth: 800,
                lineHeight: 1.6,
                fontSize: 16,
                fontFamily: 'Arial, sans-serif'
            }
        }
    };

    // 主要功能类
    class WebToolkit {
        constructor() {
            this.settings = {...config.defaultSettings};
            this.init();
        }

        init() {
            console.log('网页工具箱已启动');
            this.createUI();
            this.bindEvents();
        }

        // 创建用户界面
        createUI() {
            GM_addStyle(`
                #web-toolkit-panel {
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    width: 300px;
                    max-height: 80vh;
                    background: #fff;
                    border: 1px solid #ccc;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    z-index: 10000;
                    font-family: Arial, sans-serif;
                    font-size: 14px;
                    overflow: hidden;
                    display: none;
                }
                
                #web-toolkit-panel-header {
                    background: #2c3e50;
                    color: white;
                    padding: 12px 15px;
                    cursor: move;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                
                #web-toolkit-panel-title {
                    font-weight: bold;
                    font-size: 16px;
                }
                
                #web-toolkit-panel-close {
                    background: none;
                    border: none;
                    color: white;
                    font-size: 20px;
                    cursor: pointer;
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                }
                
                #web-toolkit-panel-close:hover {
                    background: rgba(255,255,255,0.2);
                }
                
                #web-toolkit-panel-content {
                    padding: 15px;
                    overflow-y: auto;
                    max-height: calc(80vh - 50px);
                }
                
                .web-toolkit-section {
                    margin-bottom: 20px;
                }
                
                .web-toolkit-section-title {
                    font-weight: bold;
                    margin-bottom: 12px;
                    color: #2c3e50;
                    border-bottom: 1px solid #eee;
                    padding-bottom: 6px;
                    display: flex;
                    align-items: center;
                }
                
                .web-toolkit-section-title i {
                    margin-right: 8px;
                    font-size: 16px;
                }
                
                .web-toolkit-tools-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 10px;
                }
                
                .web-toolkit-tool-item {
                    padding: 12px;
                    background: #f8f9fa;
                    border: 1px solid #e9ecef;
                    border-radius: 6px;
                    cursor: pointer;
                    transition: all 0.2s;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                }
                
                .web-toolkit-tool-item:hover {
                    background: #e9ecef;
                    transform: translateY(-2px);
                    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                }
                
                .web-toolkit-tool-icon {
                    font-size: 24px;
                    margin-bottom: 8px;
                }
                
                .web-toolkit-tool-name {
                    font-size: 13px;
                    color: #495057;
                }
                
                .web-toolkit-btn {
                    padding: 10px 15px;
                    background: #3498db;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;
                    width: 100%;
                    margin-top: 5px;
                    transition: background 0.2s;
                }
                
                .web-toolkit-btn:hover {
                    background: #2980b9;
                }
                
                .web-toolkit-btn.secondary {
                    background: #95a5a6;
                }
                
                .web-toolkit-btn.secondary:hover {
                    background: #7f8c8d;
                }
                
                .web-toolkit-btn.success {
                    background: #27ae60;
                }
                
                .web-toolkit-btn.success:hover {
                    background: #229954;
                }
                
                .web-toolkit-btn.danger {
                    background: #e74c3c;
                }
                
                .web-toolkit-btn.danger:hover {
                    background: #c0392b;
                }
                
                .web-toolkit-input-group {
                    margin-bottom: 15px;
                }
                
                .web-toolkit-input-group label {
                    display: block;
                    margin-bottom: 5px;
                    font-weight: 500;
                    color: #495057;
                }
                
                .web-toolkit-input {
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    font-size: 14px;
                    box-sizing: border-box;
                }
                
                .web-toolkit-textarea {
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    font-size: 14px;
                    box-sizing: border-box;
                    min-height: 100px;
                    resize: vertical;
                }
                
                .web-toolkit-result {
                    background: #f8f9fa;
                    border: 1px solid #e9ecef;
                    border-radius: 4px;
                    padding: 12px;
                    margin-top: 10px;
                    max-height: 200px;
                    overflow-y: auto;
                }
                
                .web-toolkit-notification {
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: #27ae60;
                    color: white;
                    padding: 12px 20px;
                    border-radius: 4px;
                    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
                    z-index: 10001;
                    display: none;
                }
                
                #web-toolkit-toggle-btn {
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    width: 45px;
                    height: 45px;
                    background: #2c3e50;
                    color: white;
                    border: none;
                    border-radius: 50%;
                    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
                    cursor: pointer;
                    z-index: 9999;
                    font-size: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                #web-toolkit-toggle-btn:hover {
                    background: #34495e;
                    transform: scale(1.05);
                }
                
                .web-toolkit-password-container {
                    display: flex;
                    gap: 10px;
                }
                
                .web-toolkit-password-container .web-toolkit-input {
                    flex: 1;
                }
                
                .web-toolkit-qrcode-container {
                    text-align: center;
                }
                
                .web-toolkit-qrcode-container canvas {
                    max-width: 100%;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                }
            `);

            // 创建主面板
            const panel = document.createElement('div');
            panel.id = 'web-toolkit-panel';
            
            panel.innerHTML = `
                <div id="web-toolkit-panel-header">
                    <div id="web-toolkit-panel-title">网页工具箱</div>
                    <button id="web-toolkit-panel-close">×</button>
                </div>
                <div id="web-toolkit-panel-content">
                    <div class="web-toolkit-section">
                        <div class="web-toolkit-section-title">
                            <span>🔧 常用工具</span>
                        </div>
                        <div class="web-toolkit-tools-grid" id="web-toolkit-tools-grid">
                            <!-- 工具项将通过JS动态添加 -->
                        </div>
                    </div>
                    
                    <div class="web-toolkit-section" id="web-toolkit-tool-details" style="display: none;">
                        <!-- 工具详情将通过JS动态添加 -->
                    </div>
                </div>
            `;
            
            document.body.appendChild(panel);
            
            // 创建切换按钮
            const toggleBtn = document.createElement('button');
            toggleBtn.id = 'web-toolkit-toggle-btn';
            toggleBtn.innerHTML = '🛠️';
            document.body.appendChild(toggleBtn);
            
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = 'web-toolkit-notification';
            notification.id = 'web-toolkit-notification';
            document.body.appendChild(notification);
            
            // 初始化工具网格
            this.initToolsGrid();
        }

        // 初始化工具网格
        initToolsGrid() {
            const toolsGrid = document.getElementById('web-toolkit-tools-grid');
            toolsGrid.innerHTML = '';
            
            config.tools.forEach(tool => {
                const toolItem = document.createElement('div');
                toolItem.className = 'web-toolkit-tool-item';
                toolItem.dataset.toolId = tool.id;
                
                toolItem.innerHTML = `
                    <div class="web-toolkit-tool-icon">${tool.icon}</div>
                    <div class="web-toolkit-tool-name">${tool.name}</div>
                `;
                
                toolsGrid.appendChild(toolItem);
            });
        }

        // 绑定事件
        bindEvents() {
            // 切换面板显示
            document.getElementById('web-toolkit-toggle-btn').addEventListener('click', () => {
                const panel = document.getElementById('web-toolkit-panel');
                panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
            });
            
            // 关闭面板
            document.getElementById('web-toolkit-panel-close').addEventListener('click', () => {
                document.getElementById('web-toolkit-panel').style.display = 'none';
            });
            
            // 拖拽面板
            this.makeDraggable(document.getElementById('web-toolkit-panel-header'), document.getElementById('web-toolkit-panel'));
            
            // 工具点击事件
            document.getElementById('web-toolkit-tools-grid').addEventListener('click', (e) => {
                const toolItem = e.target.closest('.web-toolkit-tool-item');
                if (toolItem) {
                    const toolId = toolItem.dataset.toolId;
                    this.openToolDetail(toolId);
                }
            });
        }

        // 使面板可拖拽
        makeDraggable(header, panel) {
            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            
            header.onmousedown = dragMouseDown;
            
            function dragMouseDown(e) {
                e = e || window.event;
                e.preventDefault();
                // 获取鼠标位置
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;
                document.onmousemove = elementDrag;
            }
            
            function elementDrag(e) {
                e = e || window.event;
                e.preventDefault();
                // 计算新位置
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                // 设置元素新位置
                panel.style.top = (panel.offsetTop - pos2) + "px";
                panel.style.left = (panel.offsetLeft - pos1) + "px";
            }
            
            function closeDragElement() {
                // 停止移动
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }

        // 打开工具详情
        openToolDetail(toolId) {
            const toolDetails = document.getElementById('web-toolkit-tool-details');
            toolDetails.style.display = 'block';
            
            const tool = config.tools.find(t => t.id === toolId);
            if (!tool) return;
            
            switch(toolId) {
                case 'adblock':
                    this.renderAdblockTool(toolDetails);
                    break;
                case 'reader':
                    this.renderReaderTool(toolDetails);
                    break;
                case 'screenshot':
                    this.renderScreenshotTool(toolDetails);
                    break;
                case 'links':
                    this.renderLinksTool(toolDetails);
                    break;
                case 'images':
                    this.renderImagesTool(toolDetails);
                    break;
                case 'colorpicker':
                    this.renderColorPickerTool(toolDetails);
                    break;
                case 'text':
                    this.renderTextTool(toolDetails);
                    break;
                case 'password':
                    this.renderPasswordTool(toolDetails);
                    break;
                case 'qrcode':
                    this.renderQRCodeTool(toolDetails);
                    break;
                case 'translate':
                    this.renderTranslateTool(toolDetails);
                    break;
                default:
                    toolDetails.innerHTML = `<p>工具 "${tool.name}" 尚未实现</p>`;
            }
            
            // 添加返回按钮
            const backButton = document.createElement('button');
            backButton.className = 'web-toolkit-btn secondary';
            backButton.textContent = '← 返回工具列表';
            backButton.onclick = () => {
                toolDetails.style.display = 'none';
                this.initToolsGrid();
            };
            
            toolDetails.appendChild(backButton);
        }

        // 渲染广告屏蔽工具
        renderAdblockTool(container) {
            container.innerHTML = `
                <div class="web-toolkit-section-title">
                    <span>🚫 广告屏蔽</span>
                </div>
                <p>点击下方按钮屏蔽页面中的广告元素</p>
                <button id="web-toolkit-adblock-btn" class="web-toolkit-btn">屏蔽广告</button>
                <div class="web-toolkit-result" id="web-toolkit-adblock-result" style="display: none;"></div>
            `;
            
            document.getElementById('web-toolkit-adblock-btn').addEventListener('click', () => {
                this.blockAds();
            });
        }

        // 渲染阅读模式工具
        renderReaderTool(container) {
            container.innerHTML = `
                <div class="web-toolkit-section-title">
                    <span>📖 阅读模式</span>
                </div>
                <p>点击下方按钮进入阅读模式，专注于文章内容</p>
                <button id="web-toolkit-reader-btn" class="web-toolkit-btn">进入阅读模式</button>
            `;
            
            document.getElementById('web-toolkit-reader-btn').addEventListener('click', () => {
                this.enterReaderMode();
            });
        }

        // 渲染网页截图工具
        renderScreenshotTool(container) {
            container.innerHTML = `
                <div class="web-toolkit-section-title">
                    <span>📸 网页截图</span>
                </div>
                <p>点击下方按钮截取当前网页</p>
                <button id="web-toolkit-screenshot-btn" class="web-toolkit-btn">截取网页</button>
                <div class="web-toolkit-result" id="web-toolkit-screenshot-result" style="display: none;"></div>
            `;
            
            document.getElementById('web-toolkit-screenshot-btn').addEventListener('click', () => {
                this.takeScreenshot();
            });
        }

        // 渲染链接提取工具
        renderLinksTool(container) {
            container.innerHTML = `
                <div class="web-toolkit-section-title">
                    <span>🔗 链接提取</span>
                </div>
                <p>点击下方按钮提取页面中的所有链接</p>
                <button id="web-toolkit-links-btn" class="web-toolkit-btn">提取链接</button>
                <div class="web-toolkit-result" id="web-toolkit-links-result" style="display: none;"></div>
            `;
            
            document.getElementById('web-toolkit-links-btn').addEventListener('click', () => {
                this.extractLinks();
            });
        }
        
        // 渲染图片提取工具
        renderImagesTool(container) {
            container.innerHTML = `
                <div class="web-toolkit-section-title">
                    <span>🖼️ 图片提取</span>
                </div>
                <p>点击下方按钮提取页面中的所有图片</p>
                <button id="web-toolkit-images-btn" class="web-toolkit-btn">提取图片</button>
                <div class="web-toolkit-result" id="web-toolkit-images-result" style="display: none;"></div>
            `;
            
            document.getElementById('web-toolkit-images-btn').addEventListener('click', () => {
                this.extractImages();
            });
        }
        
        // 渲染颜色选择器工具
        renderColorPickerTool(container) {
            container.innerHTML = `
                <div class="web-toolkit-section-title">
                    <span>🎨 颜色选择器</span>
                </div>
                <p>点击下方按钮打开颜色选择器</p>
                <button id="web-toolkit-color-btn" class="web-toolkit-btn">打开颜色选择器</button>
                <div class="web-toolkit-result" id="web-toolkit-color-result" style="display: none;"></div>
            `;
            
            document.getElementById('web-toolkit-color-btn').addEventListener('click', () => {
                this.initColorPicker();
            });
        }

        // 渲染文本提取工具
        renderTextTool(container) {
            container.innerHTML = `
                <div class="web-toolkit-section-title">
                    <span>📝 文本提取</span>
                </div>
                <p>点击下方按钮提取页面中的所有文本内容</p>
                <button id="web-toolkit-text-btn" class="web-toolkit-btn">提取文本</button>
                <div class="web-toolkit-result" id="web-toolkit-text-result" style="display: none;"></div>
            `;
            
            document.getElementById('web-toolkit-text-btn').addEventListener('click', () => {
                this.extractText();
            });
        }

        // 渲染密码生成工具
        renderPasswordTool(container) {
            container.innerHTML = `
                <div class="web-toolkit-section-title">
                    <span>🔑 密码生成</span>
                </div>
                <div class="web-toolkit-input-group">
                    <label>密码长度</label>
                    <input type="number" id="web-toolkit-password-length" class="web-toolkit-input" value="12" min="4" max="128">
                </div>
                <div class="web-toolkit-input-group">
                    <label>
                        <input type="checkbox" id="web-toolkit-password-uppercase" checked> 包含大写字母
                    </label>
                </div>
                <div class="web-toolkit-input-group">
                    <label>
                        <input type="checkbox" id="web-toolkit-password-numbers" checked> 包含数字
                    </label>
                </div>
                <div class="web-toolkit-input-group">
                    <label>
                        <input type="checkbox" id="web-toolkit-password-symbols" checked> 包含符号
                    </label>
                </div>
                <button id="web-toolkit-password-generate" class="web-toolkit-btn">生成密码</button>
                <div class="web-toolkit-password-container">
                    <input type="text" id="web-toolkit-password-result" class="web-toolkit-input" readonly>
                    <button id="web-toolkit-password-copy" class="web-toolkit-btn secondary">复制</button>
                </div>
            `;
            
            document.getElementById('web-toolkit-password-generate').addEventListener('click', () => {
                this.generatePassword();
            });
            
            document.getElementById('web-toolkit-password-copy').addEventListener('click', () => {
                this.copyPassword();
            });
        }

        // 渲染二维码生成工具
        renderQRCodeTool(container) {
            container.innerHTML = `
                <div class="web-toolkit-section-title">
                    <span>🔲 二维码生成</span>
                </div>
                <div class="web-toolkit-input-group">
                    <label>输入文本或链接</label>
                    <input type="text" id="web-toolkit-qrcode-text" class="web-toolkit-input" value="${window.location.href}">
                </div>
                <button id="web-toolkit-qrcode-generate" class="web-toolkit-btn">生成二维码</button>
                <div class="web-toolkit-qrcode-container">
                    <div id="web-toolkit-qrcode-result"></div>
                </div>
            `;
            
            document.getElementById('web-toolkit-qrcode-generate').addEventListener('click', () => {
                this.generateQRCode();
            });
        }

        // 渲染翻译工具
        renderTranslateTool(container) {
            container.innerHTML = `
                <div class="web-toolkit-section-title">
                    <span>🌐 快速翻译</span>
                </div>
                <div class="web-toolkit-input-group">
                    <label>输入要翻译的文本</label>
                    <textarea id="web-toolkit-translate-input" class="web-toolkit-textarea" placeholder="输入要翻译的文本..."></textarea>
                </div>
                <div class="web-toolkit-input-group">
                    <label>目标语言</label>
                    <select id="web-toolkit-translate-target" class="web-toolkit-input">
                        <option value="zh">中文</option>
                        <option value="en">英语</option>
                        <option value="ja">日语</option>
                        <option value="ko">韩语</option>
                        <option value="fr">法语</option>
                        <option value="de">德语</option>
                        <option value="es">西班牙语</option>
                    </select>
                </div>
                <button id="web-toolkit-translate-btn" class="web-toolkit-btn">翻译</button>
                <div class="web-toolkit-result" id="web-toolkit-translate-result" style="display: none;"></div>
            `;
            
            document.getElementById('web-toolkit-translate-btn').addEventListener('click', () => {
                this.translateText();
            });
        }

        // 广告屏蔽功能
        blockAds() {
            const result = document.getElementById('web-toolkit-adblock-result');
            let blockedCount = 0;
            let smartBlockedCount = 0;
            
            // 1. 使用预定义选择器屏蔽广告
            this.settings.adblockSelectors.forEach(selector => {
                try {
                    const elements = document.querySelectorAll(selector);
                    elements.forEach(element => {
                        if (element.style.display !== 'none' && this.isLikelyAd(element)) {
                            element.style.display = 'none';
                            element.setAttribute('data-ad-blocked', 'true');
                            blockedCount++;
                        }
                    });
                } catch (e) {
                    console.warn('选择器无效:', selector);
                }
            });
            
            // 2. 智能识别可能的广告元素
            smartBlockedCount = this.smartBlockAds();
            
            // 3. 屏蔽常见的广告脚本和iframe
            this.blockAdScripts();
            
            // 显示结果
            result.style.display = 'block';
            const totalBlocked = blockedCount + smartBlockedCount;
            result.innerHTML = `
                <p>🚫 广告屏蔽完成！</p>
                <p>• 规则匹配: ${blockedCount} 个</p>
                <p>• 智能识别: ${smartBlockedCount} 个</p>
                <p><strong>总计: ${totalBlocked} 个广告元素</strong></p>
            `;
            this.showNotification(`已屏蔽 ${totalBlocked} 个广告元素`);
        }
        
        // 智能识别广告元素
        smartBlockAds() {
            let count = 0;
            const elements = document.querySelectorAll('*');
            
            elements.forEach(element => {
                // 检查元素特征
                const className = element.className || '';
                const id = element.id || '';
                const text = element.textContent || '';
                
                // 智能判断条件
                const isAdLike = (
                    // 包含广告相关关键词
                    /(广告|推广|赞助|ADVERTISEMENT|SPONSORED|Promoted)/i.test(text) &&
                    text.length < 100 // 文本较短
                ) || (
                    // 特定的尺寸特征
                    (element.offsetHeight === 90 || element.offsetHeight === 250) &&
                    element.offsetWidth > 200
                ) || (
                    // 包含特定图片源
                    element.querySelector('img[src*="doubleclick"]') ||
                    element.querySelector('img[src*="googleads"]') ||
                    element.querySelector('img[src*="facebook.com/tr"]')
                ) || (
                    // 样式特征
                    getComputedStyle(element).position === 'fixed' &&
                    element.offsetHeight < 150 &&
                    /bottom|right/.test(getComputedStyle(element).cssText)
                );
                
                if (isAdLike && element.style.display !== 'none' && !element.hasAttribute('data-ad-blocked')) {
                    element.style.display = 'none';
                    element.setAttribute('data-ad-smart-blocked', 'true');
                    count++;
                }
            });
            
            return count;
        }
        
        // 判断元素是否可能是广告
        isLikelyAd(element) {
            // 排除一些误杀的元素
            const text = element.textContent || '';
            const tagName = element.tagName.toLowerCase();
            
            // 排除导航菜单
            if (tagName === 'nav' || element.closest('nav')) return false;
            
            // 排除主要内容区域
            if (element.closest('main, article, .content, .post-content')) return false;
            
            // 排除太小的元素（可能是按钮等）
            if (element.offsetHeight < 20 && element.offsetWidth < 100) return false;
            
            return true;
        }
        
        // 屏蔽广告脚本
        blockAdScripts() {
            // 移除已知的广告脚本
            const adScripts = [
                'doubleclick.net',
                'googleadservices.com',
                'googlesyndication.com',
                'facebook.com/tr',
                'google-analytics.com'
            ];
            
            document.querySelectorAll('script').forEach(script => {
                const src = script.src || '';
                if (adScripts.some(domain => src.includes(domain))) {
                    script.remove();
                }
            });
            
            // 屏蔽广告iframe
            document.querySelectorAll('iframe').forEach(iframe => {
                const src = iframe.src || '';
                if (adScripts.some(domain => src.includes(domain))) {
                    iframe.remove();
                }
            });
        }

        // 阅读模式
        enterReaderMode() {
            // 保存原始内容
            const originalContent = document.body.innerHTML;
            
            // 创建阅读模式容器
            const readerContainer = document.createElement('div');
            readerContainer.id = 'web-toolkit-reader-mode';
            readerContainer.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: white;
                z-index: 99999;
                overflow-y: auto;
                padding: 20px;
                box-sizing: border-box;
            `;
            
            // 提取文章内容（简化版）
            const articleContent = this.extractArticleContent();
            
            readerContainer.innerHTML = `
                <div style="max-width: ${this.settings.readerMode.maxWidth}px; margin: 0 auto; font-family: ${this.settings.readerMode.fontFamily};">
                    <h1 style="font-size: 2em; margin-bottom: 20px;">${document.title}</h1>
                    <div style="line-height: ${this.settings.readerMode.lineHeight}; font-size: ${this.settings.readerMode.fontSize}px;">
                        ${articleContent}
                    </div>
                    <div style="margin-top: 30px; text-align: center;">
                        <button id="web-toolkit-reader-exit" class="web-toolkit-btn secondary">退出阅读模式</button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(readerContainer);
            
            // 绑定退出事件
            document.getElementById('web-toolkit-reader-exit').addEventListener('click', () => {
                document.body.removeChild(readerContainer);
            });
            
            this.showNotification('已进入阅读模式');
        }

        // 提取文章内容（增强版）
        extractArticleContent() {
            // 1. 尝试找到文章内容
            const contentSelectors = [
                'article',
                '.content',
                '.post-content',
                '.article-content',
                '.entry-content',
                'main',
                '#content',
                '.entry',
                '.post',
                '.story',
                '.news-content',
                '.article-body',
                '.main-content',
                '.text-content'
            ];
            
            let contentElement = null;
            let bestScore = 0;
            
            // 2. 智能选择最佳内容容器
            for (const selector of contentSelectors) {
                const elements = document.querySelectorAll(selector);
                for (const element of elements) {
                    const score = this.calculateContentScore(element);
                    if (score > bestScore) {
                        bestScore = score;
                        contentElement = element;
                    }
                }
            }
            
            // 3. 如果没有找到合适的容器，使用智能算法
            if (!contentElement) {
                contentElement = this.findMainContent();
            }
            
            // 4. 清理和优化内容
            if (contentElement) {
                return this.cleanAndOptimizeContent(contentElement);
            }
            
            // 5. 最后备用方案
            return this.getFallbackContent();
        }
        
        // 计算内容评分
        calculateContentScore(element) {
            let score = 0;
            const text = element.textContent || '';
            const textLength = text.trim().length;
            
            // 文本长度评分
            if (textLength > 500) score += 10;
            if (textLength > 1000) score += 20;
            if (textLength > 2000) score += 30;
            
            // 段落数量评分
            const paragraphs = element.querySelectorAll('p');
            score += paragraphs.length * 5;
            
            // 图片数量评分（适中的图片数量）
            const images = element.querySelectorAll('img');
            if (images.length > 0 && images.length <= 10) {
                score += images.length * 2;
            }
            
            // 标题评分
            const headings = element.querySelectorAll('h1, h2, h3, h4, h5, h6');
            score += headings.length * 3;
            
            // 链接密度评分（链接不能太多）
            const links = element.querySelectorAll('a');
            const linkDensity = links.length / Math.max(textLength / 100, 1);
            if (linkDensity < 0.5) { // 每100字符少于0.5个链接
                score += 10;
            }
            
            // 标签名称评分
            const tagName = element.tagName.toLowerCase();
            if (tagName === 'article') score += 15;
            if (tagName === 'main') score += 10;
            
            return score;
        }
        
        // 智能查找主要内容
        findMainContent() {
            // 使用Readability算法的简化版本
            const candidates = [];
            const allElements = document.querySelectorAll('div, section, article, main');
            
            allElements.forEach(element => {
                // 跳过明显的非内容元素
                if (this.isUnlikelyContent(element)) return;
                
                const textContent = element.textContent || '';
                const textLength = textContent.trim().length;
                
                // 只考虑有足够文本的元素
                if (textLength < 100) return;
                
                const score = this.calculateAdvancedContentScore(element);
                candidates.push({ element, score, textLength });
            });
            
            // 按评分排序
            candidates.sort((a, b) => b.score - a.score);
            
            // 返回最佳候选
            return candidates.length > 0 ? candidates[0].element : document.body;
        }
        
        // 计算高级内容评分
        calculateAdvancedContentScore(element) {
            let score = 0;
            const textContent = element.textContent || '';
            const textLength = textContent.trim().length;
            
            // 基础文本长度评分
            score += Math.min(textLength / 100, 50); // 最多50分
            
            // 段落密度评分
            const paragraphs = element.querySelectorAll('p');
            const paragraphDensity = paragraphs.length / Math.max(element.children.length, 1);
            score += paragraphDensity * 20;
            
            // 句子长度评分（平均句子长度）
            const sentences = textContent.split(/[.!?]+/).filter(s => s.trim().length > 0);
            const avgSentenceLength = sentences.reduce((sum, s) => sum + s.trim().length, 0) / Math.max(sentences.length, 1);
            if (avgSentenceLength > 20 && avgSentenceLength < 200) {
                score += 10;
            }
            
            // 逗号密度评分（合理的逗号使用）
            const commaCount = (textContent.match(/,/g) || []).length;
            const commaDensity = commaCount / Math.max(textLength, 1);
            if (commaDensity > 0.01 && commaDensity < 0.1) {
                score += 5;
            }
            
            // 类名和ID评分
            const className = element.className || '';
            const id = element.id || '';
            const classAndId = className + ' ' + id;
            
            // 正面关键词
            if (/(content|article|post|entry|story|news|text)/i.test(classAndId)) {
                score += 20;
            }
            
            // 负面关键词
            if (/(comment|footer|sidebar|menu|navigation|advertisement|ad|social)/i.test(classAndId)) {
                score -= 30;
            }
            
            return score;
        }
        
        // 判断是否为非内容元素
        isUnlikelyContent(element) {
            const className = element.className || '';
            const id = element.id || '';
            const classAndId = className + ' ' + id;
            
            const unlikelyPatterns = [
                'comment', 'footer', 'header', 'sidebar', 'menu', 'navigation',
                'advertisement', 'ad', 'social', 'share', 'widget',
                'related', 'recommended', 'sidebar', 'menu', 'nav'
            ];
            
            return unlikelyPatterns.some(pattern => 
                new RegExp(pattern, 'i').test(classAndId)
            );
        }
        
        // 清理和优化内容
        cleanAndOptimizeContent(element) {
            // 克隆元素以避免修改原始DOM
            const clonedElement = element.cloneNode(true);
            
            // 移除不需要的元素
            const unwantedSelectors = [
                'script', 'style', 'noscript', 'iframe', 'object', 'embed',
                '.advertisement', '.ad', '.social-share', '.comments',
                '.sidebar', '.navigation', '.menu', '.footer', '.header',
                '[class*="ad-"]', '[id*="ad-"]', '[class*="advertisement"]'
            ];
            
            unwantedSelectors.forEach(selector => {
                const elements = clonedElement.querySelectorAll(selector);
                elements.forEach(el => el.remove());
            });
            
            // 移除属性
            const elementsWithAttributes = clonedElement.querySelectorAll('*');
            elementsWithAttributes.forEach(el => {
                // 保留必要的属性
                const attributesToKeep = ['src', 'alt', 'href', 'title'];
                Array.from(el.attributes).forEach(attr => {
                    if (!attributesToKeep.includes(attr.name)) {
                        el.removeAttribute(attr.name);
                    }
                });
            });
            
            return clonedElement.innerHTML;
        }
        
        // 获取备用内容
        getFallbackContent() {
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = document.body.innerHTML;
            
            // 移除script和style标签
            const scripts = tempDiv.querySelectorAll('script');
            scripts.forEach(script => script.remove());
            
            const styles = tempDiv.querySelectorAll('style');
            styles.forEach(style => style.remove());
            
            // 移除明显的非内容元素
            const unwantedElements = tempDiv.querySelectorAll(
                'nav, header, footer, aside, .sidebar, .menu, .navigation, .advertisement, .ad'
            );
            unwantedElements.forEach(el => el.remove());
            
            return tempDiv.innerHTML;
        }

        // 网页截图
        takeScreenshot() {
            this.showNotification('正在准备截图功能...');
            
            const result = document.getElementById('web-toolkit-screenshot-result');
            result.style.display = 'block';
            
            // 动态加载html2canvas库
            this.loadScript('https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js')
                .then(() => {
                    this.performScreenshot();
                })
                .catch(() => {
                    result.innerHTML = `
                        <p>❌ 截图库加载失败</p>
                        <p>请检查网络连接，或使用浏览器自带截图功能：</p>
                        <ul>
                            <li>Windows: Win + Shift + S</li>
                            <li>Mac: Cmd + Shift + 4</li>
                        </ul>
                        <button id="web-toolkit-screenshot-retry" class="web-toolkit-btn">重试</button>
                    `;
                    
                    document.getElementById('web-toolkit-screenshot-retry').addEventListener('click', () => {
                        this.takeScreenshot();
                    });
                });
        }
        
        // 执行截图
        performScreenshot() {
            const result = document.getElementById('web-toolkit-screenshot-result');
            
            this.showNotification('正在截取网页，请稍候...');
            
            // 隐藏工具箱面板
            const panel = document.getElementById('web-toolkit-panel');
            const toggleBtn = document.getElementById('web-toolkit-toggle-btn');
            const originalPanelDisplay = panel.style.display;
            const originalBtnDisplay = toggleBtn.style.display;
            
            panel.style.display = 'none';
            toggleBtn.style.display = 'none';
            
            // 等待一小段时间确保面板隐藏
            setTimeout(() => {
                html2canvas(document.body, {
                    useCORS: true,
                    allowTaint: true,
                    scale: 1,
                    width: window.innerWidth,
                    height: window.innerHeight,
                    scrollX: 0,
                    scrollY: 0
                }).then(canvas => {
                    // 恢复面板显示
                    panel.style.display = originalPanelDisplay;
                    toggleBtn.style.display = originalBtnDisplay;
                    
                    // 显示截图结果
                    const imgData = canvas.toDataURL('image/png');
                    
                    result.innerHTML = `
                        <div style="text-align: center;">
                            <p>✅ 网页截图完成！</p>
                            <img src="${imgData}" style="max-width: 100%; border: 1px solid #ddd; border-radius: 4px; margin: 10px 0;">
                            <div style="display: flex; gap: 10px; margin-top: 15px;">
                                <button id="web-toolkit-screenshot-download" class="web-toolkit-btn success">下载图片</button>
                                <button id="web-toolkit-screenshot-copy" class="web-toolkit-btn">复制到剪贴板</button>
                                <button id="web-toolkit-screenshot-fullpage" class="web-toolkit-btn secondary">截取完整页面</button>
                            </div>
                        </div>
                    `;
                    
                    // 绑定按钮事件
                    document.getElementById('web-toolkit-screenshot-download').addEventListener('click', () => {
                        this.downloadScreenshot(imgData);
                    });
                    
                    document.getElementById('web-toolkit-screenshot-copy').addEventListener('click', () => {
                        this.copyScreenshot(imgData);
                    });
                    
                    document.getElementById('web-toolkit-screenshot-fullpage').addEventListener('click', () => {
                        this.takeFullPageScreenshot();
                    });
                    
                    this.showNotification('截图完成！');
                    
                }).catch(error => {
                    // 恢复面板显示
                    panel.style.display = originalPanelDisplay;
                    toggleBtn.style.display = originalBtnDisplay;
                    
                    result.innerHTML = `
                        <p>❌ 截图失败: ${error.message}</p>
                        <p>可能的原因：</p>
                        <ul>
                            <li>页面内容跨域限制</li>
                            <li>浏览器安全策略</li>
                            <li>页面结构复杂</li>
                        </ul>
                        <button id="web-toolkit-screenshot-retry" class="web-toolkit-btn">重试</button>
                    `;
                    
                    document.getElementById('web-toolkit-screenshot-retry').addEventListener('click', () => {
                        this.takeScreenshot();
                    });
                    
                    this.showNotification('截图失败，请重试');
                });
            }, 500);
        }
        
        // 截取完整页面
        takeFullPageScreenshot() {
            const result = document.getElementById('web-toolkit-screenshot-result');
            
            this.showNotification('正在截取完整页面...');
            
            // 获取页面完整尺寸
            const fullHeight = Math.max(
                document.body.scrollHeight,
                document.body.offsetHeight,
                document.documentElement.clientHeight,
                document.documentElement.scrollHeight,
                document.documentElement.offsetHeight
            );
            
            const fullWidth = Math.max(
                document.body.scrollWidth,
                document.body.offsetWidth,
                document.documentElement.clientWidth,
                document.documentElement.scrollWidth,
                document.documentElement.offsetWidth
            );
            
            // 隐藏工具箱面板
            const panel = document.getElementById('web-toolkit-panel');
            const toggleBtn = document.getElementById('web-toolkit-toggle-btn');
            const originalPanelDisplay = panel.style.display;
            const originalBtnDisplay = toggleBtn.style.display;
            
            panel.style.display = 'none';
            toggleBtn.style.display = 'none';
            
            setTimeout(() => {
                html2canvas(document.body, {
                    useCORS: true,
                    allowTaint: true,
                    scale: 0.5, // 降低分辨率以避免内存问题
                    width: fullWidth,
                    height: fullHeight,
                    scrollX: 0,
                    scrollY: 0
                }).then(canvas => {
                    // 恢复面板显示
                    panel.style.display = originalPanelDisplay;
                    toggleBtn.style.display = originalBtnDisplay;
                    
                    const imgData = canvas.toDataURL('image/png');
                    
                    result.innerHTML = `
                        <div style="text-align: center;">
                            <p>✅ 完整页面截图完成！</p>
                            <img src="${imgData}" style="max-width: 100%; border: 1px solid #ddd; border-radius: 4px; margin: 10px 0;">
                            <div style="display: flex; gap: 10px; margin-top: 15px;">
                                <button id="web-toolkit-screenshot-download" class="web-toolkit-btn success">下载完整页面</button>
                                <button id="web-toolkit-screenshot-copy" class="web-toolkit-btn">复制到剪贴板</button>
                            </div>
                        </div>
                    `;
                    
                    document.getElementById('web-toolkit-screenshot-download').addEventListener('click', () => {
                        this.downloadScreenshot(imgData, 'fullpage-screenshot.png');
                    });
                    
                    document.getElementById('web-toolkit-screenshot-copy').addEventListener('click', () => {
                        this.copyScreenshot(imgData);
                    });
                    
                    this.showNotification('完整页面截图完成！');
                    
                }).catch(error => {
                    // 恢复面板显示
                    panel.style.display = originalPanelDisplay;
                    toggleBtn.style.display = originalBtnDisplay;
                    
                    this.showNotification('完整页面截图失败，尝试当前视口截图');
                    this.takeScreenshot(); // 回退到普通截图
                });
            }, 500);
        }
        
        // 下载截图
        downloadScreenshot(dataUrl, filename = 'screenshot.png') {
            const link = document.createElement('a');
            link.download = filename;
            link.href = dataUrl;
            link.click();
            this.showNotification('截图已下载！');
        }
        
        // 复制截图到剪贴板
        copyScreenshot(dataUrl) {
            // 创建临时图片元素
            const img = new Image();
            img.onload = () => {
                const canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);
                
                canvas.toBlob(blob => {
                    if (blob) {
                        navigator.clipboard.write([
                            new ClipboardItem({ 'image/png': blob })
                        ]).then(() => {
                            this.showNotification('截图已复制到剪贴板！');
                        }).catch(() => {
                            this.showNotification('复制失败，请手动下载');
                        });
                    }
                });
            };
            img.src = dataUrl;
        }
        
        // 动态加载脚本
        loadScript(url) {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = url;
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        // 提取链接
        extractLinks() {
            const links = Array.from(document.querySelectorAll('a[href]'))
                .map(a => ({
                    text: a.textContent.trim(),
                    url: a.href
                }))
                .filter(link => link.text && link.url);
            
            const result = document.getElementById('web-toolkit-links-result');
            result.style.display = 'block';
            
            if (links.length === 0) {
                result.innerHTML = '<p>未找到链接</p>';
                return;
            }
            
            let html = `<p>找到 ${links.length} 个链接：</p><ul>`;
            links.forEach(link => {
                html += `<li><a href="${link.url}" target="_blank">${link.text}</a></li>`;
            });
            html += '</ul>';
            
            result.innerHTML = html;
            this.showNotification(`提取到 ${links.length} 个链接`);
        }
        
        // 提取图片
        extractImages() {
            const images = Array.from(document.querySelectorAll('img[src]'))
                .map(img => ({
                    src: img.src,
                    alt: img.alt || '无描述',
                    width: img.naturalWidth || img.width,
                    height: img.naturalHeight || img.height
                }))
                .filter(img => img.src && !img.src.includes('data:')); // 排除base64图片
            
            const result = document.getElementById('web-toolkit-images-result');
            result.style.display = 'block';
            
            if (images.length === 0) {
                result.innerHTML = '<p>未找到图片</p>';
                return;
            }
            
            let html = `<p>找到 ${images.length} 张图片：</p><div class="web-toolkit-images-grid">`;
            images.forEach((img, index) => {
                html += `
                    <div class="web-toolkit-image-item">
                        <img src="${img.src}" alt="${img.alt}" loading="lazy">
                        <div class="web-toolkit-image-info">
                            <p><strong>描述:</strong> ${img.alt}</p>
                            <p><strong>尺寸:</strong> ${img.width} x ${img.height}</p>
                            <p><strong>URL:</strong> <a href="${img.src}" target="_blank">查看原图</a></p>
                            <button class="web-toolkit-btn secondary" onclick="window.open('${img.src}', '_blank')">下载</button>
                        </div>
                    </div>
                `;
            });
            html += '</div>';
            
            result.innerHTML = html;
            this.showNotification(`提取到 ${images.length} 张图片`);
        }
        
        // 颜色选择器
        initColorPicker() {
            const result = document.getElementById('web-toolkit-color-result');
            result.style.display = 'block';
            
            result.innerHTML = `
                <div class="web-toolkit-color-picker">
                    <div class="web-toolkit-color-canvas-container">
                        <canvas id="web-toolkit-color-canvas" width="300" height="200"></canvas>
                        <div id="web-toolkit-color-cursor" class="color-cursor"></div>
                    </div>
                    <div class="web-toolkit-color-controls">
                        <div class="web-toolkit-color-slider">
                            <label>色相:</label>
                            <input type="range" id="web-toolkit-hue-slider" min="0" max="360" value="0">
                        </div>
                        <div class="web-toolkit-color-inputs">
                            <div>
                                <label>HEX:</label>
                                <input type="text" id="web-toolkit-hex-input" value="#FF0000">
                            </div>
                            <div>
                                <label>RGB:</label>
                                <input type="text" id="web-toolkit-rgb-input" value="rgb(255, 0, 0)">
                            </div>
                            <div>
                                <label>HSL:</label>
                                <input type="text" id="web-toolkit-hsl-input" value="hsl(0, 100%, 50%)">
                            </div>
                        </div>
                        <div class="web-toolkit-color-preview">
                            <div id="web-toolkit-color-preview" style="width: 100px; height: 50px; background: #FF0000; border: 1px solid #ccc;"></div>
                        </div>
                        <div class="web-toolkit-color-actions">
                            <button id="web-toolkit-copy-hex" class="web-toolkit-btn">复制HEX</button>
                            <button id="web-toolkit-copy-rgb" class="web-toolkit-btn">复制RGB</button>
                            <button id="web-toolkit-copy-hsl" class="web-toolkit-btn">复制HSL</button>
                            <button id="web-toolkit-pick-from-screen" class="web-toolkit-btn secondary">从屏幕取色</button>
                        </div>
                    </div>
                </div>
            `;
            
            this.initColorPickerCanvas();
            this.bindColorPickerEvents();
            this.showNotification('颜色选择器已初始化');
        }
        
        // 初始化颜色选择器画布
        initColorPickerCanvas() {
            const canvas = document.getElementById('web-toolkit-color-canvas');
            const ctx = canvas.getContext('2d');
            
            // 创建渐变色
            this.updateColorCanvas(0); // 初始色相为0
        }
        
        // 更新颜色画布
        updateColorCanvas(hue) {
            const canvas = document.getElementById('web-toolkit-color-canvas');
            const ctx = canvas.getContext('2d');
            const width = canvas.width;
            const height = canvas.height;
            
            // 清空画布
            ctx.clearRect(0, 0, width, height);
            
            // 创建饱和度渐变
            const satGradient = ctx.createLinearGradient(0, 0, width, 0);
            satGradient.addColorStop(0, '#ffffff');
            satGradient.addColorStop(1, `hsl(${hue}, 100%, 50%)`);
            
            // 创建亮度渐变
            const lightGradient = ctx.createLinearGradient(0, 0, 0, height);
            lightGradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
            lightGradient.addColorStop(1, '#000000');
            
            // 应用渐变
            ctx.fillStyle = satGradient;
            ctx.fillRect(0, 0, width, height);
            
            ctx.fillStyle = lightGradient;
            ctx.fillRect(0, 0, width, height);
        }
        
        // 绑定颜色选择器事件
        bindColorPickerEvents() {
            const canvas = document.getElementById('web-toolkit-color-canvas');
            const hueSlider = document.getElementById('web-toolkit-hue-slider');
            const hexInput = document.getElementById('web-toolkit-hex-input');
            const rgbInput = document.getElementById('web-toolkit-rgb-input');
            const hslInput = document.getElementById('web-toolkit-hsl-input');
            
            let isPicking = false;
            
            // 画布点击事件
            canvas.addEventListener('mousedown', (e) => {
                isPicking = true;
                this.pickColorFromCanvas(e);
            });
            
            canvas.addEventListener('mousemove', (e) => {
                if (isPicking) {
                    this.pickColorFromCanvas(e);
                }
            });
            
            canvas.addEventListener('mouseup', () => {
                isPicking = false;
            });
            
            // 色相滑块事件
            hueSlider.addEventListener('input', (e) => {
                this.updateColorCanvas(e.target.value);
            });
            
            // 输入框事件
            hexInput.addEventListener('input', (e) => {
                this.updateColorFromHex(e.target.value);
            });
            
            // 复制按钮事件
            document.getElementById('web-toolkit-copy-hex').addEventListener('click', () => {
                GM_setClipboard(hexInput.value);
                this.showNotification('HEX值已复制');
            });
            
            document.getElementById('web-toolkit-copy-rgb').addEventListener('click', () => {
                GM_setClipboard(rgbInput.value);
                this.showNotification('RGB值已复制');
            });
            
            document.getElementById('web-toolkit-copy-hsl').addEventListener('click', () => {
                GM_setClipboard(hslInput.value);
                this.showNotification('HSL值已复制');
            });
            
            // 屏幕取色按钮
            document.getElementById('web-toolkit-pick-from-screen').addEventListener('click', () => {
                this.startScreenColorPicker();
            });
        }
        
        // 从画布选择颜色
        pickColorFromCanvas(e) {
            const canvas = document.getElementById('web-toolkit-color-canvas');
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const ctx = canvas.getContext('2d');
            const imageData = ctx.getImageData(x, y, 1, 1);
            const [r, g, b] = imageData.data;
            
            this.updateColorDisplay(r, g, b);
        }
        
        // 更新颜色显示
        updateColorDisplay(r, g, b) {
            const hex = this.rgbToHex(r, g, b);
            const rgb = `rgb(${r}, ${g}, ${b})`;
            const hsl = this.rgbToHsl(r, g, b);
            
            document.getElementById('web-toolkit-hex-input').value = hex;
            document.getElementById('web-toolkit-rgb-input').value = rgb;
            document.getElementById('web-toolkit-hsl-input').value = hsl;
            document.getElementById('web-toolkit-color-preview').style.background = hex;
        }
        
        // 从HEX更新颜色
        updateColorFromHex(hex) {
            const rgb = this.hexToRgb(hex);
            if (rgb) {
                this.updateColorDisplay(rgb.r, rgb.g, rgb.b);
            }
        }
        
        // RGB转HEX
        rgbToHex(r, g, b) {
            return '#' + [r, g, b].map(x => {
                const hex = x.toString(16);
                return hex.length === 1 ? '0' + hex : hex;
            }).join('');
        }
        
        // HEX转RGB
        hexToRgb(hex) {
            const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }
        
        // RGB转HSL
        rgbToHsl(r, g, b) {
            r /= 255;
            g /= 255;
            b /= 255;
            
            const max = Math.max(r, g, b);
            const min = Math.min(r, g, b);
            let h, s, l = (max + min) / 2;
            
            if (max === min) {
                h = s = 0;
            } else {
                const d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch (max) {
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }
            
            return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
        }
        
        // 开始屏幕取色
        startScreenColorPicker() {
            this.showNotification('屏幕取色功能开发中...');
            // 这里可以实现更复杂的屏幕取色功能
            // 由于浏览器安全限制，可能需要额外的权限或扩展
        }

        // 提取文本
        extractText() {
            const text = document.body.innerText || document.body.textContent;
            const result = document.getElementById('web-toolkit-text-result');
            result.style.display = 'block';
            
            if (!text) {
                result.innerHTML = '<p>未找到文本内容</p>';
                return;
            }
            
            // 截取前1000个字符作为预览
            const preview = text.substring(0, 1000);
            const fullText = text;
            
            result.innerHTML = `
                <p>文本长度: ${fullText.length} 字符</p>
                <textarea class="web-toolkit-textarea" readonly>${preview}${fullText.length > 1000 ? '...' : ''}</textarea>
                <button id="web-toolkit-text-copy" class="web-toolkit-btn secondary">复制全部文本</button>
            `;
            
            document.getElementById('web-toolkit-text-copy').addEventListener('click', () => {
                GM_setClipboard(fullText);
                this.showNotification('文本已复制到剪贴板');
            });
            
            this.showNotification(`提取到 ${fullText.length} 字符的文本`);
        }

        // 生成密码
        generatePassword() {
            const length = parseInt(document.getElementById('web-toolkit-password-length').value) || 12;
            const includeUppercase = document.getElementById('web-toolkit-password-uppercase').checked;
            const includeNumbers = document.getElementById('web-toolkit-password-numbers').checked;
            const includeSymbols = document.getElementById('web-toolkit-password-symbols').checked;
            
            let charset = 'abcdefghijklmnopqrstuvwxyz';
            if (includeUppercase) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            if (includeNumbers) charset += '0123456789';
            if (includeSymbols) charset += '!@#$%^&*()_+-=[]{}|;:,.<>?';
            
            let password = '';
            for (let i = 0; i < length; i++) {
                const randomIndex = Math.floor(Math.random() * charset.length);
                password += charset[randomIndex];
            }
            
            document.getElementById('web-toolkit-password-result').value = password;
            this.showNotification('密码已生成');
        }

        // 复制密码
        copyPassword() {
            const password = document.getElementById('web-toolkit-password-result').value;
            if (password) {
                GM_setClipboard(password);
                this.showNotification('密码已复制到剪贴板');
            }
        }

        // 生成二维码
        generateQRCode() {
            const text = document.getElementById('web-toolkit-qrcode-text').value;
            if (!text) {
                this.showNotification('请输入文本内容');
                return;
            }
            
            const result = document.getElementById('web-toolkit-qrcode-result');
            result.style.display = 'block';
            
            // 动态加载qrcode.js库
            this.loadScript('https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js')
                .then(() => {
                    this.performQRGeneration(text);
                })
                .catch(() => {
                    result.innerHTML = `
                        <p>❌ 二维码库加载失败</p>
                        <p>请检查网络连接后重试</p>
                        <button id="web-toolkit-qr-retry" class="web-toolkit-btn">重试</button>
                    `;
                    
                    document.getElementById('web-toolkit-qr-retry').addEventListener('click', () => {
                        this.generateQRCode();
                    });
                });
        }
        
        // 执行二维码生成
        performQRGeneration(text) {
            const result = document.getElementById('web-toolkit-qrcode-result');
            
            this.showNotification('正在生成二维码...');
            
            // 清空之前的结果
            result.innerHTML = `
                <div style="text-align: center;">
                    <p>正在生成二维码...</p>
                    <div id="web-toolkit-qr-code" style="margin: 20px auto;"></div>
                    <div id="web-toolkit-qr-actions" style="display: none; margin-top: 15px;">
                        <button id="web-toolkit-qr-download" class="web-toolkit-btn success">下载二维码</button>
                        <button id="web-toolkit-qr-copy" class="web-toolkit-btn">复制二维码</button>
                        <button id="web-toolkit-qr-regenerate" class="web-toolkit-btn secondary">重新生成</button>
                    </div>
                </div>
            `;
            
            try {
                // 生成二维码
                const qrcode = new QRCode(document.getElementById('web-toolkit-qr-code'), {
                    text: text,
                    width: 256,
                    height: 256,
                    colorDark : '#000000',
                    colorLight : '#ffffff',
                    correctLevel : QRCode.CorrectLevel.H
                });
                
                // 等待二维码生成完成
                setTimeout(() => {
                    const canvas = document.querySelector('#web-toolkit-qr-code canvas');
                    const img = document.querySelector('#web-toolkit-qr-code img');
                    
                    if (canvas || img) {
                        // 显示操作按钮
                        document.getElementById('web-toolkit-qr-actions').style.display = 'flex';
                        document.getElementById('web-toolkit-qr-actions').style.gap = '10px';
                        
                        // 绑定按钮事件
                        document.getElementById('web-toolkit-qr-download').addEventListener('click', () => {
                            this.downloadQRCode(text);
                        });
                        
                        document.getElementById('web-toolkit-qr-copy').addEventListener('click', () => {
                            this.copyQRCode();
                        });
                        
                        document.getElementById('web-toolkit-qr-regenerate').addEventListener('click', () => {
                            this.generateQRCode();
                        });
                        
                        this.showNotification('二维码生成成功！');
                    } else {
                        result.innerHTML = `
                            <p>❌ 二维码生成失败</p>
                            <p>请重试或检查输入内容</p>
                            <button id="web-toolkit-qr-retry" class="web-toolkit-btn">重试</button>
                        `;
                        
                        document.getElementById('web-toolkit-qr-retry').addEventListener('click', () => {
                            this.generateQRCode();
                        });
                    }
                }, 1000);
                
            } catch (error) {
                result.innerHTML = `
                    <p>❌ 二维码生成错误: ${error.message}</p>
                    <p>请检查输入内容或重试</p>
                    <button id="web-toolkit-qr-retry" class="web-toolkit-btn">重试</button>
                `;
                
                document.getElementById('web-toolkit-qr-retry').addEventListener('click', () => {
                    this.generateQRCode();
                });
                
                this.showNotification('二维码生成失败');
            }
        }
        
        // 下载二维码
        downloadQRCode(text) {
            const canvas = document.querySelector('#web-toolkit-qr-code canvas');
            const img = document.querySelector('#web-toolkit-qr-code img');
            
            let dataUrl;
            if (canvas) {
                dataUrl = canvas.toDataURL('image/png');
            } else if (img) {
                dataUrl = img.src;
            } else {
                this.showNotification('无法获取二维码图片');
                return;
            }
            
            const link = document.createElement('a');
            link.download = `qrcode-${Date.now()}.png`;
            link.href = dataUrl;
            link.click();
            this.showNotification('二维码已下载！');
        }
        
        // 复制二维码到剪贴板
        copyQRCode() {
            const canvas = document.querySelector('#web-toolkit-qr-code canvas');
            const img = document.querySelector('#web-toolkit-qr-code img');
            
            if (canvas) {
                canvas.toBlob(blob => {
                    if (blob) {
                        navigator.clipboard.write([
                            new ClipboardItem({ 'image/png': blob })
                        ]).then(() => {
                            this.showNotification('二维码已复制到剪贴板！');
                        }).catch(() => {
                            this.showNotification('复制失败，请手动下载');
                        });
                    }
                });
            } else if (img) {
                // 复制图片元素
                const imgElement = new Image();
                imgElement.onload = () => {
                    const canvas = document.createElement('canvas');
                    canvas.width = imgElement.width;
                    canvas.height = imgElement.height;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(imgElement, 0, 0);
                    
                    canvas.toBlob(blob => {
                        if (blob) {
                            navigator.clipboard.write([
                                new ClipboardItem({ 'image/png': blob })
                            ]).then(() => {
                                this.showNotification('二维码已复制到剪贴板！');
                            }).catch(() => {
                                this.showNotification('复制失败，请手动下载');
                            });
                        }
                    });
                };
                imgElement.src = img.src;
            } else {
                this.showNotification('无法找到二维码图片');
            }
        }

        // 翻译文本
        translateText() {
            const text = document.getElementById('web-toolkit-translate-input').value;
            const targetLang = document.getElementById('web-toolkit-translate-target').value;
            
            if (!text) {
                this.showNotification('请输入要翻译的文本');
                return;
            }
            
            const result = document.getElementById('web-toolkit-translate-result');
            result.style.display = 'block';
            
            // 显示加载状态
            result.innerHTML = `
                <div style="text-align: center;">
                    <p>正在翻译中...</p>
                    <div class="web-toolkit-loading" style="margin: 20px auto;"></div>
                </div>
            `;
            
            // 使用Google翻译API进行翻译
            this.performTranslation(text, targetLang)
                .then(translation => {
                    result.innerHTML = `
                        <div style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; background: #f9f9f9;">
                            <p><strong>原文：</strong></p>
                            <p style="margin-bottom: 15px; font-style: italic;">${text}</p>
                            <p><strong>翻译结果 (${targetLang}):</strong></p>
                            <p style="font-size: 1.1em; color: #333;">${translation}</p>
                            <div style="margin-top: 15px; display: flex; gap: 10px;">
                                <button id="web-toolkit-copy-translation" class="web-toolkit-btn success">复制翻译</button>
                                <button id="web-toolkit-translate-again" class="web-toolkit-btn secondary">重新翻译</button>
                            </div>
                        </div>
                    `;
                    
                    // 绑定按钮事件
                    document.getElementById('web-toolkit-copy-translation').addEventListener('click', () => {
                        navigator.clipboard.writeText(translation).then(() => {
                            this.showNotification('翻译结果已复制到剪贴板！');
                        }).catch(() => {
                            this.showNotification('复制失败，请手动复制');
                        });
                    });
                    
                    document.getElementById('web-toolkit-translate-again').addEventListener('click', () => {
                        this.translateText();
                    });
                    
                    this.showNotification('翻译完成！');
                })
                .catch(error => {
                    console.error('翻译错误:', error);
                    
                    // 如果API失败，使用备用翻译服务
                    this.performBackupTranslation(text, targetLang)
                        .then(translation => {
                            result.innerHTML = `
                                <div style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; background: #f9f9f9;">
                                    <p><strong>原文：</strong></p>
                                    <p style="margin-bottom: 15px; font-style: italic;">${text}</p>
                                    <p><strong>翻译结果 (${targetLang}):</strong></p>
                                    <p style="font-size: 1.1em; color: #333;">${translation}</p>
                                    <p style="font-size: 0.9em; color: #666; margin-top: 10px;">使用备用翻译服务</p>
                                    <div style="margin-top: 15px; display: flex; gap: 10px;">
                                        <button id="web-toolkit-copy-translation" class="web-toolkit-btn success">复制翻译</button>
                                        <button id="web-toolkit-translate-again" class="web-toolkit-btn secondary">重新翻译</button>
                                    </div>
                                </div>
                            `;
                            
                            // 绑定按钮事件
                            document.getElementById('web-toolkit-copy-translation').addEventListener('click', () => {
                                navigator.clipboard.writeText(translation).then(() => {
                                    this.showNotification('翻译结果已复制到剪贴板！');
                                }).catch(() => {
                                    this.showNotification('复制失败，请手动复制');
                                });
                            });
                            
                            document.getElementById('web-toolkit-translate-again').addEventListener('click', () => {
                                this.translateText();
                            });
                            
                            this.showNotification('翻译完成！');
                        })
                        .catch(backupError => {
                            console.error('备用翻译也失败:', backupError);
                            
                            // 如果所有翻译都失败，显示错误信息
                            result.innerHTML = `
                                <div style="color: #d32f2f; padding: 15px; border: 1px solid #ffcdd2; border-radius: 5px; background: #ffebee;">
                                    <p><strong>翻译失败</strong></p>
                                    <p>无法连接到翻译服务，请检查网络连接后重试。</p>
                                    <p style="font-size: 0.9em; margin-top: 10px;">错误信息: ${error.message}</p>
                                    <div style="margin-top: 15px;">
                                        <button id="web-toolkit-translate-retry" class="web-toolkit-btn">重试</button>
                                        <button id="web-toolkit-translate-offline" class="web-toolkit-btn secondary">离线翻译</button>
                                    </div>
                                </div>
                            `;
                            
                            // 绑定重试按钮
                            document.getElementById('web-toolkit-translate-retry').addEventListener('click', () => {
                                this.translateText();
                            });
                            
                            // 绑定离线翻译按钮
                            document.getElementById('web-toolkit-translate-offline').addEventListener('click', () => {
                                this.performOfflineTranslation(text, targetLang);
                            });
                            
                            this.showNotification('翻译服务连接失败');
                        });
                });
        }
        
        // 执行翻译（主要翻译服务）
        async performTranslation(text, targetLang) {
            // 使用Google翻译API
            const apiUrl = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLang}&dt=t&q=${encodeURIComponent(text)}`;
            
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            
            // 解析Google翻译响应
            if (data && data[0] && Array.isArray(data[0])) {
                const translation = data[0].map(item => item[0]).join('');
                return translation;
            } else {
                throw new Error('Invalid translation response');
            }
        }
        
        // 备用翻译服务
        async performBackupTranslation(text, targetLang) {
            // 使用Microsoft翻译API或其他免费翻译服务
            const apiUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=auto|${targetLang}`;
            
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            
            if (data && data.responseData && data.responseData.translatedText) {
                return data.responseData.translatedText;
            } else {
                throw new Error('Invalid translation response');
            }
        }
        
        // 离线翻译（简单的字符映射）
        performOfflineTranslation(text, targetLang) {
            // 这是一个非常基础的离线翻译实现，仅用于演示
            const result = document.getElementById('web-toolkit-translate-result');
            
            // 简单的字符映射表（仅用于演示）
            const basicTranslations = {
                'hello': { 'zh': '你好', 'ja': 'こんにちは', 'ko': '안녕하세요' },
                'world': { 'zh': '世界', 'ja': '世界', 'ko': '세계' },
                'good': { 'zh': '好', 'ja': '良い', 'ko': '좋은' },
                'thank you': { 'zh': '谢谢', 'ja': 'ありがとう', 'ko': '감사합니다' }
            };
            
            const lowerText = text.toLowerCase().trim();
            let translation = text; // 默认返回原文
            
            // 查找简单的翻译
            for (const [english, translations] of Object.entries(basicTranslations)) {
                if (lowerText.includes(english)) {
                    if (translations[targetLang]) {
                        translation = text.toLowerCase().replace(english, translations[targetLang]);
                        break;
                    }
                }
            }
            
            result.innerHTML = `
                <div style="border: 1px solid #ddd; padding: 15px; border-radius: 5px; background: #f9f9f9;">
                    <p><strong>原文：</strong></p>
                    <p style="margin-bottom: 15px; font-style: italic;">${text}</p>
                    <p><strong>离线翻译结果 (${targetLang}):</strong></p>
                    <p style="font-size: 1.1em; color: #333;">${translation}</p>
                    <p style="font-size: 0.9em; color: #666; margin-top: 10px;">⚠️ 离线翻译功能有限，仅支持基础词汇</p>
                    <div style="margin-top: 15px; display: flex; gap: 10px;">
                        <button id="web-toolkit-copy-translation" class="web-toolkit-btn success">复制翻译</button>
                        <button id="web-toolkit-translate-again" class="web-toolkit-btn secondary">重新翻译</button>
                    </div>
                </div>
            `;
            
            // 绑定按钮事件
            document.getElementById('web-toolkit-copy-translation').addEventListener('click', () => {
                navigator.clipboard.writeText(translation).then(() => {
                    this.showNotification('翻译结果已复制到剪贴板！');
                }).catch(() => {
                    this.showNotification('复制失败，请手动复制');
                });
            });
            
            document.getElementById('web-toolkit-translate-again').addEventListener('click', () => {
                this.translateText();
            });
            
            this.showNotification('离线翻译完成');
        }

        // 显示通知
        showNotification(message) {
            const notification = document.getElementById('web-toolkit-notification');
            notification.textContent = message;
            notification.style.display = 'block';
            
            setTimeout(() => {
                notification.style.display = 'none';
            }, 3000);
        }
    }

    // 初始化插件
    new WebToolkit();
})();