☰

Image Uploader to Markdown to CloudFlare-ImgBed

适配于 CloudFlare-ImgBed 的粘贴上传并生成markdown的脚本. CloudFlare-ImgBed : https://github.com/MarSeventh/CloudFlare-ImgBed

目前为 2025-03-15 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Image Uploader to Markdown to CloudFlare-ImgBed
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.4
  5. // @description  适配于 CloudFlare-ImgBed 的粘贴上传并生成markdown的脚本. CloudFlare-ImgBed : https://github.com/MarSeventh/CloudFlare-ImgBed
  6. // @author       calg
  7. // @match        *://*/*
  8. // @grant        GM_xmlhttpRequest
  9. // @grant        GM_addStyle
  10. // @grant        GM_getValue
  11. // @grant        GM_setValue
  12. // @grant        GM_registerMenuCommand
  13. // @license      MIT
  14. // @icon         https://raw.githubusercontent.com/MarSeventh/CloudFlare-ImgBed/refs/heads/main/logo.png
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.  
  20.     // 默认配置信息
  21.     const DEFAULT_CONFIG = {
  22.         AUTH_CODE: 'AUTH_CODE', // 替换为你的认证码
  23.         SERVER_URL: 'https://SERVER_URL', // 替换为实际的服务器地址
  24.         UPLOAD_PARAMS: {
  25.             serverCompress: true,
  26.             uploadChannel: 'telegram', // 可选 telegram 和 cfr2
  27.             autoRetry: true,
  28.             uploadNameType: 'index', // 可选值为[default, index, origin, short]
  29.             returnFormat: 'full',
  30.             uploadFolder: 'apiupload' // 指定上传目录，用相对路径表示，例如上传到img/test目录需填img/test
  31.         },
  32.         NOTIFICATION_DURATION: 3000, // 通知显示时间（毫秒）
  33.         MARKDOWN_TEMPLATE: '![{filename}]({url})', // Markdown 模板
  34.         AUTO_COPY_URL: false, // 是否自动复制URL到剪贴板
  35.         ALLOWED_HOSTS: ['*'], // 允许在哪些网站上运行，* 表示所有网站
  36.         MAX_FILE_SIZE: 5 * 1024 * 1024 // 最大文件大小（5MB）
  37.     };
  38.  
  39.     // 获取用户配置并确保所有必需的字段都存在
  40.     const userConfig = GM_getValue('userConfig', {});
  41.     let CONFIG = {};
  42.     
  43.     // 深度合并配置
  44.     function mergeConfig(target, source) {
  45.         for (const key in source) {
  46.             if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
  47.                 target[key] = target[key] || {};
  48.                 mergeConfig(target[key], source[key]);
  49.             } else {
  50.                 target[key] = source[key];
  51.             }
  52.         }
  53.         return target;
  54.     }
  55.     
  56.     // 确保所有默认配置项都存在
  57.     CONFIG = mergeConfig({...DEFAULT_CONFIG}, userConfig);
  58.     
  59.     // 验证配置的完整性
  60.     function validateConfig() {
  61.         if (!Array.isArray(CONFIG.ALLOWED_HOSTS)) {
  62.             CONFIG.ALLOWED_HOSTS = DEFAULT_CONFIG.ALLOWED_HOSTS;
  63.         }
  64.         if (typeof CONFIG.NOTIFICATION_DURATION !== 'number') {
  65.             CONFIG.NOTIFICATION_DURATION = DEFAULT_CONFIG.NOTIFICATION_DURATION;
  66.         }
  67.         if (typeof CONFIG.MAX_FILE_SIZE !== 'number') {
  68.             CONFIG.MAX_FILE_SIZE = DEFAULT_CONFIG.MAX_FILE_SIZE;
  69.         }
  70.         if (typeof CONFIG.MARKDOWN_TEMPLATE !== 'string') {
  71.             CONFIG.MARKDOWN_TEMPLATE = DEFAULT_CONFIG.MARKDOWN_TEMPLATE;
  72.         }
  73.         if (typeof CONFIG.AUTO_COPY_URL !== 'boolean') {
  74.             CONFIG.AUTO_COPY_URL = DEFAULT_CONFIG.AUTO_COPY_URL;
  75.         }
  76.     }
  77.     
  78.     validateConfig();
  79.  
  80.     // 添加通知样式
  81.     GM_addStyle(`
  82.         .img-upload-notification {
  83.             position: fixed;
  84.             top: 20px;
  85.             right: 20px;
  86.             padding: 15px 20px;
  87.             border-radius: 5px;
  88.             z-index: 9999;
  89.             max-width: 300px;
  90.             font-size: 14px;
  91.             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  92.             transition: all 0.3s ease;
  93.             opacity: 0;
  94.             transform: translateX(20px);
  95.         }
  96.         .img-upload-notification.show {
  97.             opacity: 1;
  98.             transform: translateX(0);
  99.         }
  100.         .img-upload-success {
  101.             background-color: #4caf50;
  102.             color: white;
  103.         }
  104.         .img-upload-error {
  105.             background-color: #f44336;
  106.             color: white;
  107.         }
  108.         .img-upload-info {
  109.             background-color: #2196F3;
  110.             color: white;
  111.         }
  112.         .img-upload-close {
  113.             float: right;
  114.             margin-left: 10px;
  115.             cursor: pointer;
  116.             opacity: 0.8;
  117.         }
  118.         .img-upload-close:hover {
  119.             opacity: 1;
  120.         }
  121.  
  122.         .img-upload-modal {
  123.             position: fixed;
  124.             top: 50%;
  125.             left: 50%;
  126.             transform: translate(-50%, -50%);
  127.             background: white;
  128.             padding: 20px;
  129.             border-radius: 8px;
  130.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  131.             z-index: 10000;
  132.             max-width: 600px;
  133.             width: 90%;
  134.             max-height: 80vh;
  135.             overflow-y: auto;
  136.         }
  137.         .img-upload-modal-overlay {
  138.             position: fixed;
  139.             top: 0;
  140.             left: 0;
  141.             right: 0;
  142.             bottom: 0;
  143.             background: rgba(0, 0, 0, 0.5);
  144.             z-index: 9999;
  145.         }
  146.         .img-upload-modal h2 {
  147.             margin: 0 0 20px;
  148.             color: #333;
  149.             font-size: 18px;
  150.         }
  151.         .img-upload-form-group {
  152.             margin-bottom: 20px;
  153.         }
  154.         .img-upload-form-group label {
  155.             display: block;
  156.             margin-bottom: 8px;
  157.             color: #333;
  158.             font-weight: 500;
  159.         }
  160.         .img-upload-help-text {
  161.             margin-top: 4px;
  162.             color: #666;
  163.             font-size: 12px;
  164.         }
  165.         .img-upload-form-group input[type="text"],
  166.         .img-upload-form-group input[type="number"],
  167.         .img-upload-form-group textarea {
  168.             width: 100%;
  169.             padding: 8px;
  170.             border: 1px solid #ddd;
  171.             border-radius: 4px;
  172.             font-size: 14px;
  173.             box-sizing: border-box;
  174.         }
  175.         .img-upload-form-group textarea {
  176.             min-height: 100px;
  177.             font-family: monospace;
  178.         }
  179.         .img-upload-form-group input[type="checkbox"] {
  180.             margin-right: 8px;
  181.         }
  182.         .img-upload-buttons {
  183.             display: flex;
  184.             justify-content: flex-end;
  185.             gap: 10px;
  186.             margin-top: 20px;
  187.         }
  188.         .img-upload-button {
  189.             padding: 8px 16px;
  190.             border: none;
  191.             border-radius: 4px;
  192.             cursor: pointer;
  193.             font-size: 14px;
  194.             transition: background-color 0.2s;
  195.         }
  196.         .img-upload-button-primary {
  197.             background: #2196F3;
  198.             color: white;
  199.         }
  200.         .img-upload-button-secondary {
  201.             background: #e0e0e0;
  202.             color: #333;
  203.         }
  204.         .img-upload-button:hover {
  205.             opacity: 0.9;
  206.         }
  207.         .img-upload-error {
  208.             color: #ffffff;
  209.             font-size: 12px;
  210.             margin-top: 4px;
  211.         }
  212.         .img-upload-info-icon {
  213.             display: inline-block;
  214.             width: 16px;
  215.             height: 16px;
  216.             background: #2196F3;
  217.             color: white;
  218.             border-radius: 50%;
  219.             text-align: center;
  220.             line-height: 16px;
  221.             font-size: 12px;
  222.             margin-left: 4px;
  223.             cursor: help;
  224.         }
  225.         .img-upload-form-group select {
  226.             width: 100%;
  227.             padding: 8px;
  228.             border: 1px solid #ddd;
  229.             border-radius: 4px;
  230.             font-size: 14px;
  231.             background-color: white;
  232.         }
  233.         .img-upload-input-group {
  234.             display: flex;
  235.             align-items: center;
  236.         }
  237.         .img-upload-input-group input {
  238.             flex: 1;
  239.             border-top-right-radius: 0;
  240.             border-bottom-right-radius: 0;
  241.         }
  242.         .img-upload-input-group-text {
  243.             padding: 8px 12px;
  244.             background: #f5f5f5;
  245.             border: 1px solid #ddd;
  246.             border-left: none;
  247.             border-radius: 0 4px 4px 0;
  248.             color: #666;
  249.         }
  250.         .img-upload-checkbox-label {
  251.             display: flex !important;
  252.             align-items: center;
  253.             font-weight: normal !important;
  254.         }
  255.         .img-upload-checkbox-label input {
  256.             margin-right: 8px;
  257.         }
  258.  
  259.         .img-upload-dropzone {
  260.             display: none;
  261.             position: fixed;
  262.             top: 0;
  263.             left: 0;
  264.             width: 100%;
  265.             height: 100%;
  266.             background: rgba(33, 150, 243, 0.2);
  267.             border: 3px dashed #2196F3;
  268.             z-index: 9998;
  269.             box-sizing: border-box;
  270.         }
  271.         .img-upload-dropzone.active {
  272.             display: block;
  273.         }
  274.         .img-upload-dropzone-message {
  275.             position: absolute;
  276.             top: 50%;
  277.             left: 50%;
  278.             transform: translate(-50%, -50%);
  279.             background: white;
  280.             padding: 20px 40px;
  281.             border-radius: 8px;
  282.             font-size: 18px;
  283.             color: #2196F3;
  284.             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  285.         }
  286.     `);
  287.  
  288.     // 显示通知的函数
  289.     function showNotification(message, type = 'info') {
  290.         const notification = document.createElement('div');
  291.         notification.className = `img-upload-notification img-upload-${type}`;
  292.         
  293.         const closeBtn = document.createElement('span');
  294.         closeBtn.className = 'img-upload-close';
  295.         closeBtn.textContent = '✕';
  296.         closeBtn.onclick = () => removeNotification(notification);
  297.         
  298.         const messageSpan = document.createElement('span');
  299.         messageSpan.textContent = message;
  300.         
  301.         notification.appendChild(closeBtn);
  302.         notification.appendChild(messageSpan);
  303.         document.body.appendChild(notification);
  304.  
  305.         // 添加显示动画
  306.         setTimeout(() => notification.classList.add('show'), 10);
  307.  
  308.         // 自动消失
  309.         const timeout = setTimeout(() => removeNotification(notification), CONFIG.NOTIFICATION_DURATION);
  310.         
  311.         // 鼠标悬停时暂停消失
  312.         notification.addEventListener('mouseenter', () => clearTimeout(timeout));
  313.         notification.addEventListener('mouseleave', () => setTimeout(() => removeNotification(notification), 1000));
  314.     }
  315.  
  316.     // 移除通知
  317.     function removeNotification(notification) {
  318.         notification.classList.remove('show');
  319.         setTimeout(() => {
  320.             if (notification.parentNode) {
  321.                 notification.parentNode.removeChild(notification);
  322.             }
  323.         }, 300);
  324.     }
  325.  
  326.     // 复制文本到剪贴板
  327.     function copyToClipboard(text) {
  328.         const textarea = document.createElement('textarea');
  329.         textarea.value = text;
  330.         textarea.style.position = 'fixed';
  331.         textarea.style.opacity = '0';
  332.         document.body.appendChild(textarea);
  333.         textarea.select();
  334.         try {
  335.             document.execCommand('copy');
  336.             showNotification('链接已复制到剪贴板！', 'success');
  337.         } catch (err) {
  338.             showNotification('复制失败：' + err.message, 'error');
  339.         }
  340.         document.body.removeChild(textarea);
  341.     }
  342.  
  343.     // 检查文件大小
  344.     function checkFileSize(file) {
  345.         if (file.size > CONFIG.MAX_FILE_SIZE) {
  346.             showNotification(`文件大小超过限制（${Math.round(CONFIG.MAX_FILE_SIZE/1024/1024)}MB）`, 'error');
  347.             return false;
  348.         }
  349.         return true;
  350.     }
  351.  
  352.     // 检查当前网站是否允许上传
  353.     function isAllowedHost() {
  354.         const currentHost = window.location.hostname;
  355.         return CONFIG.ALLOWED_HOSTS.includes('*') || CONFIG.ALLOWED_HOSTS.includes(currentHost);
  356.     }
  357.  
  358.     // 监听所有文本输入区域的粘贴事件
  359.     function addPasteListener() {
  360.         document.addEventListener('paste', async function(event) {
  361.             if (!isAllowedHost()) return;
  362.  
  363.             const activeElement = document.activeElement;
  364.             if (!activeElement || !['INPUT', 'TEXTAREA'].includes(activeElement.tagName)) {
  365.                 return;
  366.             }
  367.  
  368.             const items = event.clipboardData.items;
  369.             let hasImage = false;
  370.             
  371.             for (let item of items) {
  372.                 if (item.type.startsWith('image/')) {
  373.                     hasImage = true;
  374.                     event.preventDefault();
  375.                     const blob = item.getAsFile();
  376.                     
  377.                     if (!checkFileSize(blob)) {
  378.                         return;
  379.                     }
  380.  
  381.                     showNotification('正在上传图片，请稍候...', 'info');
  382.                     await uploadImage(blob, activeElement);
  383.                     break;
  384.                 }
  385.             }
  386.  
  387.             if (!hasImage) {
  388.                 return;
  389.             }
  390.         });
  391.     }
  392.  
  393.     // 上传图片
  394.     async function uploadImage(blob, targetElement) {
  395.         const formData = new FormData();
  396.         const filename = `pasted-image-${Date.now()}.png`;
  397.         formData.append('file', blob, filename);
  398.  
  399.         const queryParams = new URLSearchParams({
  400.             authCode: CONFIG.AUTH_CODE,
  401.             ...CONFIG.UPLOAD_PARAMS
  402.         }).toString();
  403.  
  404.         try {
  405.             GM_xmlhttpRequest({
  406.                 method: 'POST',
  407.                 url: `${CONFIG.SERVER_URL}/upload?${queryParams}`,
  408.                 data: formData,
  409.                 onload: function(response) {
  410.                     if (response.status === 200) {
  411.                         try {
  412.                             const result = JSON.parse(response.responseText);
  413.                             if (result && result.length > 0) {
  414.                                 const imageUrl = result[0].src;
  415.                                 insertMarkdownImage(imageUrl, targetElement, filename);
  416.                                 showNotification('图片上传成功！', 'success');
  417.                                 
  418.                                 if (CONFIG.AUTO_COPY_URL) {
  419.                                     copyToClipboard(imageUrl);
  420.                                 }
  421.                             } else {
  422.                                 showNotification('上传成功但未获取到图片链接，请检查服务器响应', 'error');
  423.                             }
  424.                         } catch (e) {
  425.                             showNotification('解析服务器响应失败：' + e.message, 'error');
  426.                         }
  427.                     } else {
  428.                         let errorMsg = '上传失败';
  429.                         try {
  430.                             const errorResponse = JSON.parse(response.responseText);
  431.                             errorMsg += '：' + (errorResponse.message || response.statusText);
  432.                         } catch (e) {
  433.                             errorMsg += `（状态码：${response.status}）`;
  434.                         }
  435.                         showNotification(errorMsg, 'error');
  436.                     }
  437.                 },
  438.                 onerror: function(error) {
  439.                     showNotification('网络错误：无法连接到图床服务器', 'error');
  440.                 }
  441.             });
  442.         } catch (error) {
  443.             showNotification('上传过程发生错误：' + error.message, 'error');
  444.         }
  445.     }
  446.  
  447.     // 在输入框中插入 Markdown 格式的图片链接
  448.     function insertMarkdownImage(imageUrl, element, filename) {
  449.         const markdownImage = CONFIG.MARKDOWN_TEMPLATE
  450.             .replace('{url}', imageUrl)
  451.             .replace('{filename}', filename.replace(/\.[^/.]+$/, '')); // 移除文件扩展名
  452.         
  453.         const start = element.selectionStart;
  454.         const end = element.selectionEnd;
  455.         const text = element.value;
  456.  
  457.         element.value = text.substring(0, start) + markdownImage + text.substring(end);
  458.         element.selectionStart = element.selectionEnd = start + markdownImage.length;
  459.         element.focus();
  460.     }
  461.  
  462.     // 创建配置界面
  463.     function createConfigModal() {
  464.         const overlay = document.createElement('div');
  465.         overlay.className = 'img-upload-modal-overlay';
  466.         
  467.         const modal = document.createElement('div');
  468.         modal.className = 'img-upload-modal';
  469.         
  470.         const content = `
  471.             <h2>图床上传配置</h2>
  472.             <form id="img-upload-config-form">
  473.                 <div class="img-upload-form-group">
  474.                     <label>认证码</label>
  475.                     <input type="text" name="AUTH_CODE" value="${CONFIG.AUTH_CODE}" required>
  476.                     <div class="img-upload-help-text">用于验证上传请求的密钥</div>
  477.                 </div>
  478.                 <div class="img-upload-form-group">
  479.                     <label>服务器地址</label>
  480.                     <input type="text" name="SERVER_URL" value="${CONFIG.SERVER_URL}" required>
  481.                     <div class="img-upload-help-text">图床服务器的URL地址</div>
  482.                 </div>
  483.                 <div class="img-upload-form-group">
  484.                     <label>上传通道</label>
  485.                     <select name="uploadChannel">
  486.                         <option value="cfr2" ${CONFIG.UPLOAD_PARAMS.uploadChannel === 'cfr2' ? 'selected' : ''}>CloudFlare R2</option>
  487.                         <option value="telegram" ${CONFIG.UPLOAD_PARAMS.uploadChannel === 'telegram' ? 'selected' : ''}>Telegram</option>
  488.                     </select>
  489.                     <div class="img-upload-help-text">选择图片上传的存储通道</div>
  490.                 </div>
  491.                 <div class="img-upload-form-group">
  492.                     <label>文件命名方式</label>
  493.                     <select name="uploadNameType">
  494.                         <option value="default" ${CONFIG.UPLOAD_PARAMS.uploadNameType === 'default' ? 'selected' : ''}>默认（前缀_原名）</option>
  495.                         <option value="index" ${CONFIG.UPLOAD_PARAMS.uploadNameType === 'index' ? 'selected' : ''}>仅前缀</option>
  496.                         <option value="origin" ${CONFIG.UPLOAD_PARAMS.uploadNameType === 'origin' ? 'selected' : ''}>仅原名</option>
  497.                         <option value="short" ${CONFIG.UPLOAD_PARAMS.uploadNameType === 'short' ? 'selected' : ''}>短链接</option>
  498.                     </select>
  499.                     <div class="img-upload-help-text">选择上传后的文件命名方式</div>
  500.                 </div>
  501.                 <div class="img-upload-form-group">
  502.                     <label>上传目录</label>
  503.                     <input type="text" name="uploadFolder" value="${CONFIG.UPLOAD_PARAMS.uploadFolder}">
  504.                     <div class="img-upload-help-text">指定上传目录，使用相对路径，例如：img/test</div>
  505.                 </div>
  506.                 <div class="img-upload-form-group">
  507.                     <label>通知显示时间</label>
  508.                     <input type="number" name="NOTIFICATION_DURATION" value="${CONFIG.NOTIFICATION_DURATION}" min="1000" step="500">
  509.                     <div class="img-upload-help-text">通知消息显示的时间（毫秒）</div>
  510.                 </div>
  511.                 <div class="img-upload-form-group">
  512.                     <label>Markdown模板</label>
  513.                     <input type="text" name="MARKDOWN_TEMPLATE" value="${CONFIG.MARKDOWN_TEMPLATE}">
  514.                     <div class="img-upload-help-text">支持 {filename} 和 {url} 两个变量</div>
  515.                 </div>
  516.                 <div class="img-upload-form-group">
  517.                     <label>允许的网站</label>
  518.                     <input type="text" name="ALLOWED_HOSTS" value="${CONFIG.ALLOWED_HOSTS.join(',')}">
  519.                     <div class="img-upload-help-text">输入域名，用逗号分隔。使用 * 表示允许所有网站</div>
  520.                 </div>
  521.                 <div class="img-upload-form-group">
  522.                     <label>最大文件大小</label>
  523.                     <div class="img-upload-input-group">
  524.                         <input type="number" name="MAX_FILE_SIZE" value="${CONFIG.MAX_FILE_SIZE / 1024 / 1024}" min="1" step="1">
  525.                         <span class="img-upload-input-group-text">MB</span>
  526.                     </div>
  527.                 </div>
  528.                 <div class="img-upload-form-group">
  529.                     <label class="img-upload-checkbox-label">
  530.                         <input type="checkbox" name="AUTO_COPY_URL" ${CONFIG.AUTO_COPY_URL ? 'checked' : ''}>
  531.                         自动复制URL到剪贴板
  532.                     </label>
  533.                 </div>
  534.                 <div class="img-upload-buttons">
  535.                     <button type="button" class="img-upload-button img-upload-button-secondary" id="img-upload-cancel">取消</button>
  536.                     <button type="button" class="img-upload-button img-upload-button-secondary" id="img-upload-reset">重置默认值</button>
  537.                     <button type="submit" class="img-upload-button img-upload-button-primary">保存</button>
  538.                 </div>
  539.             </form>
  540.         `;
  541.         
  542.         modal.innerHTML = content;
  543.         document.body.appendChild(overlay);
  544.         document.body.appendChild(modal);
  545.  
  546.         // 事件处理
  547.         const form = modal.querySelector('#img-upload-config-form');
  548.         const cancelBtn = modal.querySelector('#img-upload-cancel');
  549.         const resetBtn = modal.querySelector('#img-upload-reset');
  550.  
  551.         function closeModal() {
  552.             document.body.removeChild(overlay);
  553.             document.body.removeChild(modal);
  554.         }
  555.  
  556.         overlay.addEventListener('click', closeModal);
  557.         cancelBtn.addEventListener('click', closeModal);
  558.         
  559.         resetBtn.addEventListener('click', () => {
  560.             if (confirm('确定要重置所有配置到默认值吗？')) {
  561.                 CONFIG = {...DEFAULT_CONFIG};
  562.                 GM_setValue('userConfig', {});
  563.                 showNotification('配置已重置为默认值！', 'success');
  564.                 closeModal();
  565.             }
  566.         });
  567.  
  568.         form.addEventListener('submit', (e) => {
  569.             e.preventDefault();
  570.             try {
  571.                 const formData = new FormData(form);
  572.                 const newConfig = {
  573.                     AUTH_CODE: formData.get('AUTH_CODE'),
  574.                     SERVER_URL: formData.get('SERVER_URL'),
  575.                     UPLOAD_PARAMS: {
  576.                         ...DEFAULT_CONFIG.UPLOAD_PARAMS,
  577.                         uploadChannel: formData.get('uploadChannel'),
  578.                         uploadNameType: formData.get('uploadNameType'),
  579.                         uploadFolder: formData.get('uploadFolder')
  580.                     },
  581.                     NOTIFICATION_DURATION: parseInt(formData.get('NOTIFICATION_DURATION')),
  582.                     MARKDOWN_TEMPLATE: formData.get('MARKDOWN_TEMPLATE'),
  583.                     ALLOWED_HOSTS: formData.get('ALLOWED_HOSTS').split(',').map(h => h.trim()),
  584.                     MAX_FILE_SIZE: parseFloat(formData.get('MAX_FILE_SIZE')) * 1024 * 1024,
  585.                     AUTO_COPY_URL: formData.get('AUTO_COPY_URL') === 'on'
  586.                 };
  587.  
  588.                 CONFIG = mergeConfig({...DEFAULT_CONFIG}, newConfig);
  589.                 GM_setValue('userConfig', CONFIG);
  590.                 showNotification('配置已更新！', 'success');
  591.                 closeModal();
  592.             } catch (error) {
  593.                 showNotification('配置格式错误：' + error.message, 'error');
  594.             }
  595.         });
  596.  
  597.         // 防止点击模态框时关闭
  598.         modal.addEventListener('click', (e) => e.stopPropagation());
  599.     }
  600.  
  601.     // 修改注册配置菜单函数
  602.     function registerMenuCommands() {
  603.         GM_registerMenuCommand('配置图床参数', createConfigModal);
  604.     }
  605.  
  606.     // 创建拖拽区域
  607.     function createDropZone() {
  608.         const dropZone = document.createElement('div');
  609.         dropZone.className = 'img-upload-dropzone';
  610.         
  611.         const message = document.createElement('div');
  612.         message.className = 'img-upload-dropzone-message';
  613.         message.textContent = '释放鼠标上传图片';
  614.         
  615.         dropZone.appendChild(message);
  616.         document.body.appendChild(dropZone);
  617.         return dropZone;
  618.     }
  619.  
  620.     // 处理拖拽上传
  621.     function handleDragAndDrop() {
  622.         const dropZone = createDropZone();
  623.         let activeElement = null;
  624.  
  625.         // 处理拖拽文件
  626.         async function handleFiles(files, targetElement) {
  627.             for (const file of files) {
  628.                 if (file.type.startsWith('image/')) {
  629.                     if (!checkFileSize(file)) {
  630.                         continue;
  631.                     }
  632.                     showNotification('正在上传图片，请稍候...', 'info');
  633.                     await uploadImage(file, targetElement);
  634.                 } else {
  635.                     showNotification('只能上传图片文件', 'error');
  636.                 }
  637.             }
  638.         }
  639.  
  640.         // 监听拖拽事件
  641.         document.addEventListener('dragenter', (e) => {
  642.             e.preventDefault();
  643.             activeElement = document.activeElement;
  644.             if (activeElement && ['INPUT', 'TEXTAREA'].includes(activeElement.tagName)) {
  645.                 dropZone.classList.add('active');
  646.             }
  647.         });
  648.  
  649.         document.addEventListener('dragover', (e) => {
  650.             e.preventDefault();
  651.         });
  652.  
  653.         document.addEventListener('dragleave', (e) => {
  654.             e.preventDefault();
  655.             // 检查是否真的离开了文档区域
  656.             const rect = document.documentElement.getBoundingClientRect();
  657.             if (e.clientX <= rect.left || e.clientX >= rect.right ||
  658.                 e.clientY <= rect.top || e.clientY >= rect.bottom) {
  659.                 dropZone.classList.remove('active');
  660.             }
  661.         });
  662.  
  663.         document.addEventListener('drop', async (e) => {
  664.             e.preventDefault();
  665.             dropZone.classList.remove('active');
  666.             
  667.             if (!isAllowedHost()) return;
  668.             
  669.             if (activeElement && ['INPUT', 'TEXTAREA'].includes(activeElement.tagName)) {
  670.                 const files = Array.from(e.dataTransfer.files);
  671.                 await handleFiles(files, activeElement);
  672.             }
  673.         });
  674.     }
  675.  
  676.     // 修改初始化函数
  677.     function init() {
  678.         if (!isAllowedHost()) return;
  679.         addPasteListener();
  680.         handleDragAndDrop();
  681.         registerMenuCommands();
  682.     }
  683.  
  684.     init();
  685. })();