☰

V2EX Image Uploader

在 V2EX 评论区快速上传图片并插入链接

  1. // ==UserScript==
  2. // @name         V2EX Image Uploader
  3. // @namespace    http://tampermonkey.net/1436051
  4. // @version      1.0
  5. // @description  在 V2EX 评论区快速上传图片并插入链接
  6. // @author       Dogxi
  7. // @match        https://www.v2ex.com/t/*
  8. // @match        https://v2ex.com/t/*
  9. // @icon         https://www.google.com/s2/favicons?sz=64&domain=v2ex.com
  10. // @grant        GM_xmlhttpRequest
  11. // @grant        GM_setValue
  12. // @grant        GM_getValue
  13. // @connect      api.imgur.com
  14. // @license      MIT
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.  
  20.     const IMGUR_CLIENT_ID_KEY = 'imgurClientId';
  21.     let CLIENT_ID = GM_getValue(IMGUR_CLIENT_ID_KEY, null);
  22.  
  23.     const STYLE = `
  24.         .imgur-upload-btn {
  25.             background: none;
  26.             border: none;
  27.             color: #778087;
  28.             cursor: pointer;
  29.             font-size: 13px;
  30.             padding: 0;
  31.             margin-left: 15px;
  32.             text-decoration: none;
  33.             transition: color 0.2s ease;
  34.         }
  35.         .imgur-upload-btn:hover {
  36.             color: #4d5256;
  37.             text-decoration: underline;
  38.         }
  39.         .hidden {
  40.             display: none !important;
  41.         }
  42.         .imgur-upload-modal {
  43.             position: fixed;
  44.             top: 0;
  45.             left: 0;
  46.             width: 100%;
  47.             height: 100%;
  48.             background-color: rgba(0, 0, 0, 0.5);
  49.             display: flex;
  50.             justify-content: center;
  51.             align-items: center;
  52.             z-index: 9999;
  53.         }
  54.         .imgur-upload-modal-content {
  55.             background-color: #fff;
  56.             padding: 20px;
  57.             border-radius: 3px;
  58.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  59.             max-width: 450px;
  60.             width: 90%;
  61.             position: relative;
  62.             font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  63.         }
  64.         .imgur-upload-modal-header {
  65.             display: flex;
  66.             justify-content: space-between;
  67.             align-items: center;
  68.             margin-bottom: 15px;
  69.             padding-bottom: 10px;
  70.             border-bottom: 1px solid #e2e2e2;
  71.         }
  72.         .imgur-upload-modal-title {
  73.             font-size: 15px;
  74.             font-weight: normal;
  75.             color: #000;
  76.         }
  77.         .imgur-upload-modal-close {
  78.             cursor: pointer;
  79.             font-size: 18px;
  80.             color: #ccc;
  81.             width: 20px;
  82.             height: 20px;
  83.             display: flex;
  84.             align-items: center;
  85.             justify-content: center;
  86.             transition: color 0.2s ease;
  87.         }
  88.         .imgur-upload-modal-close:hover {
  89.             color: #999;
  90.         }
  91.         .imgur-upload-dropzone {
  92.             border: 1px dashed #ccc;
  93.             padding: 25px;
  94.             text-align: center;
  95.             margin-bottom: 15px;
  96.             cursor: pointer;
  97.             border-radius: 3px;
  98.             transition: border-color 0.2s ease;
  99.             font-size: 13px;
  100.             color: #666;
  101.         }
  102.         .imgur-upload-dropzone:hover {
  103.             border-color: #999;
  104.         }
  105.         .imgur-upload-dropzone.dragover {
  106.             border-color: #778087;
  107.             background-color: #f9f9f9;
  108.         }
  109.         .imgur-upload-preview {
  110.             margin-top: 10px;
  111.             max-width: 100%;
  112.             max-height: 150px;
  113.             border-radius: 2px;
  114.         }
  115.         .imgur-upload-actions {
  116.             display: flex;
  117.             justify-content: space-between;
  118.             align-items: center;
  119.             margin-top: 15px;
  120.             padding-top: 10px;
  121.             border-top: 1px solid #e2e2e2;
  122.         }
  123.         .imgur-upload-config-btn {
  124.             background: none;
  125.             border: none;
  126.             color: #778087;
  127.             cursor: pointer;
  128.             font-size: 12px;
  129.             padding: 0;
  130.         }
  131.         .imgur-upload-config-btn:hover {
  132.             color: #4d5256;
  133.             text-decoration: underline;
  134.         }
  135.         .imgur-upload-submit-btn {
  136.             background-color: #f5f5f5;
  137.             border: 1px solid #ccc;
  138.             border-radius: 3px;
  139.             color: #333;
  140.             cursor: pointer;
  141.             font-size: 12px;
  142.             padding: 6px 12px;
  143.             transition: all 0.2s ease;
  144.         }
  145.         .imgur-upload-submit-btn:hover {
  146.             background-color: #e8e8e8;
  147.         }
  148.         .imgur-upload-submit-btn:disabled {
  149.             background-color: #f9f9f9;
  150.             color: #ccc;
  151.             cursor: not-allowed;
  152.         }
  153.         .imgur-upload-config-panel {
  154.             margin-top: 10px;
  155.             padding: 10px;
  156.             background-color: #f9f9f9;
  157.             border-radius: 3px;
  158.             border: 1px solid #e2e2e2;
  159.         }
  160.         .imgur-upload-config-row {
  161.             display: flex;
  162.             align-items: center;
  163.             margin-bottom: 8px;
  164.         }
  165.         .imgur-upload-config-row:last-child {
  166.             margin-bottom: 0;
  167.         }
  168.         .imgur-upload-config-label {
  169.             font-size: 12px;
  170.             color: #666;
  171.             width: 70px;
  172.             flex-shrink: 0;
  173.         }
  174.         .imgur-upload-config-input {
  175.             flex: 1;
  176.             padding: 3px 6px;
  177.             border: 1px solid #ccc;
  178.             border-radius: 2px;
  179.             font-size: 12px;
  180.         }
  181.         .imgur-upload-config-save {
  182.             background-color: #f5f5f5;
  183.             border: 1px solid #ccc;
  184.             border-radius: 2px;
  185.             color: #333;
  186.             cursor: pointer;
  187.             font-size: 11px;
  188.             margin-left: 6px;
  189.             padding: 3px 8px;
  190.         }
  191.         .imgur-upload-config-save:hover {
  192.             background-color: #e8e8e8;
  193.         }
  194.         .imgur-upload-modal-status {
  195.             color: #666;
  196.             font-size: 12px;
  197.             text-align: center;
  198.         }
  199.         .imgur-upload-modal-status.success {
  200.             color: #5cb85c;
  201.         }
  202.         .imgur-upload-modal-status.error {
  203.             color: #d9534f;
  204.         }
  205.     `;
  206.  
  207.     // 添加样式到页面
  208.     function addStyle() {
  209.         const styleElement = document.createElement('style');
  210.         styleElement.textContent = STYLE;
  211.         document.head.appendChild(styleElement);
  212.     }
  213.  
  214.     // 创建上传弹窗
  215.     function createUploadModal(textareaElement) {
  216.         const modal = document.createElement('div');
  217.         modal.className = 'imgur-upload-modal';
  218.         
  219.         const content = document.createElement('div');
  220.         content.className = 'imgur-upload-modal-content';
  221.         
  222.         content.innerHTML = `
  223.             <div class="imgur-upload-modal-header">
  224.                 <div class="imgur-upload-modal-title">上传图片</div>
  225.                 <div class="imgur-upload-modal-close">×</div>
  226.             </div>
  227.             <div class="imgur-upload-dropzone">
  228.                 <div>点击选择图片或拖拽图片到此处</div>
  229.                 <div style="font-size: 11px; color: #999; margin-top: 5px;">支持 JPG, PNG, GIF 格式</div>
  230.             </div>
  231.             <div class="imgur-upload-actions">
  232.                 <button class="imgur-upload-config-btn">⚙️ 配置</button>
  233.                 <button class="imgur-upload-submit-btn" disabled>确认上传</button>
  234.             </div>
  235.             <div class="imgur-upload-config-panel hidden">
  236.                 <div class="imgur-upload-config-row">
  237.                     <div class="imgur-upload-config-label">Imgur ID:</div>
  238.                     <input type="text" class="imgur-upload-config-input" placeholder="请输入 Imgur Client ID" value="${CLIENT_ID || ''}">
  239.                     <button class="imgur-upload-config-save">保存</button>
  240.                 </div>
  241.                 <div style="font-size: 11px; color: #666; margin-top: 8px;">
  242.                     在 <a href="https://api.imgur.com/oauth2/addclient" target="_blank">https://api.imgur.com/oauth2/addclient</a> 注册(不可用)获取(无回调)
  243.                 </div>
  244.             </div>
  245.         `;
  246.         
  247.         modal.appendChild(content);
  248.         document.body.appendChild(modal);
  249.         
  250.         setupModalEvents(modal, textareaElement);
  251.         
  252.         return modal;
  253.     }
  254.  
  255.     // 设置弹窗事件监听
  256.     function setupModalEvents(modal, textareaElement) {
  257.         const closeBtn = modal.querySelector('.imgur-upload-modal-close');
  258.         const dropzone = modal.querySelector('.imgur-upload-dropzone');
  259.         const configBtn = modal.querySelector('.imgur-upload-config-btn');
  260.         const configPanel = modal.querySelector('.imgur-upload-config-panel');
  261.         const configInput = modal.querySelector('.imgur-upload-config-input');
  262.         const configSave = modal.querySelector('.imgur-upload-config-save');
  263.         const submitBtn = modal.querySelector('.imgur-upload-submit-btn');
  264.         
  265.         let selectedFile = null;
  266.         
  267.         function closeModal() {
  268.             document.body.removeChild(modal);
  269.         }
  270.         
  271.         closeBtn.addEventListener('click', closeModal);
  272.         modal.addEventListener('click', function(e) {
  273.             if (e.target === modal) closeModal();
  274.         });
  275.         
  276.         configBtn.addEventListener('click', function() {
  277.             configPanel.classList.toggle('hidden');
  278.         });
  279.         
  280.         configSave.addEventListener('click', function() {
  281.             const newClientId = configInput.value.trim();
  282.             if (newClientId) {
  283.                 GM_setValue(IMGUR_CLIENT_ID_KEY, newClientId);
  284.                 CLIENT_ID = newClientId;
  285.                 configPanel.classList.add('hidden');
  286.                 showStatusInModal(modal, '配置已保存', 'success');
  287.             }
  288.         });
  289.         
  290.         const fileInput = document.createElement('input');
  291.         fileInput.type = 'file';
  292.         fileInput.accept = 'image/*';
  293.         fileInput.style.display = 'none';
  294.         modal.appendChild(fileInput);
  295.         
  296.         dropzone.addEventListener('click', () => fileInput.click());
  297.         
  298.         fileInput.addEventListener('change', function(e) {
  299.             handleFileSelect(e.target.files[0]);
  300.         });
  301.         
  302.         dropzone.addEventListener('dragover', function(e) {
  303.             e.preventDefault();
  304.             dropzone.classList.add('dragover');
  305.         });
  306.         
  307.         dropzone.addEventListener('dragleave', function(e) {
  308.             e.preventDefault();
  309.             dropzone.classList.remove('dragover');
  310.         });
  311.         
  312.         dropzone.addEventListener('drop', function(e) {
  313.             e.preventDefault();
  314.             dropzone.classList.remove('dragover');
  315.             const files = e.dataTransfer.files;
  316.             if (files.length > 0) {
  317.                 handleFileSelect(files[0]);
  318.             }
  319.         });
  320.         
  321.         // 处理文件选择
  322.         function handleFileSelect(file) {
  323.             if (!file || !file.type.match(/image\/.*/)) {
  324.                 showStatusInModal(modal, '请选择图片文件', 'error');
  325.                 return;
  326.             }
  327.             
  328.             selectedFile = file;
  329.             
  330.             const reader = new FileReader();
  331.             reader.onload = function(e) {
  332.                 const preview = modal.querySelector('.imgur-upload-preview');
  333.                 if (preview) preview.remove();
  334.                 
  335.                 const img = document.createElement('img');
  336.                 img.src = e.target.result;
  337.                 img.className = 'imgur-upload-preview';
  338.                 dropzone.appendChild(img);
  339.                 
  340.                 submitBtn.disabled = false;
  341.                 dropzone.querySelector('div').textContent = '已选择: ' + file.name;
  342.             };
  343.             reader.readAsDataURL(file);
  344.         }
  345.         
  346.         submitBtn.addEventListener('click', function() {
  347.             if (!selectedFile) return;
  348.             
  349.             if (!CLIENT_ID) {
  350.                 showStatusInModal(modal, '请先配置 Imgur Client ID', 'error');
  351.                 configPanel.classList.remove('hidden');
  352.                 return;
  353.             }
  354.             
  355.             submitBtn.disabled = true;
  356.             submitBtn.textContent = '上传中...';
  357.             
  358.             uploadToImgur(selectedFile, textareaElement, modal);
  359.         });
  360.     }
  361.  
  362.     // 在弹窗中显示状态信息
  363.     function showStatusInModal(modal, message, type) {
  364.         let statusEl = modal.querySelector('.imgur-upload-modal-status');
  365.         if (!statusEl) {
  366.             statusEl = document.createElement('div');
  367.             statusEl.className = 'imgur-upload-modal-status';
  368.             statusEl.style.cssText = 'margin-top: 10px; font-size: 12px; text-align: center;';
  369.             modal.querySelector('.imgur-upload-modal-content').appendChild(statusEl);
  370.         }
  371.         
  372.         statusEl.textContent = message;
  373.         statusEl.className = 'imgur-upload-modal-status ' + (type || '');
  374.         
  375.         if (type === 'success') {
  376.             setTimeout(() => statusEl.textContent = '', 3000);
  377.         }
  378.     }
  379.  
  380.     // 上传图片到 Imgur
  381.     function uploadToImgur(file, textareaElement, modal) {
  382.         if (!file.type.match(/image\/.*/)) {
  383.             showStatusInModal(modal, '请选择图片文件', 'error');
  384.             const submitBtn = modal.querySelector('.imgur-upload-submit-btn');
  385.             submitBtn.disabled = false;
  386.             submitBtn.textContent = '确认上传';
  387.             return;
  388.         }
  389.         
  390.         const formData = new FormData();
  391.         formData.append('image', file);
  392.         
  393.         GM_xmlhttpRequest({
  394.             method: "POST",
  395.             url: "https://api.imgur.com/3/image",
  396.             headers: {
  397.                 "Authorization": "Client-ID " + CLIENT_ID
  398.             },
  399.             data: formData,
  400.             responseType: "json",
  401.             onload: function(response) {
  402.                 const submitBtn = modal.querySelector('.imgur-upload-submit-btn');
  403.                 
  404.                 try {
  405.                     let responseData;
  406.                     if (typeof response.response === 'string') {
  407.                         responseData = JSON.parse(response.response);
  408.                     } else {
  409.                         responseData = response.response;
  410.                     }
  411.                     
  412.                     if (response.status === 200 && responseData && responseData.success) {
  413.                         const imageUrl = responseData.data.link;
  414.                         insertLinkIntoTextarea(textareaElement, imageUrl, file.name);
  415.                         showStatusInModal(modal, '上传成功！', 'success');
  416.                         
  417.                         setTimeout(() => {
  418.                             document.body.removeChild(modal);
  419.                         }, 1500);
  420.                     } else {
  421.                         let errorMessage = '';
  422.                         
  423.                         if (response.status === 400) {
  424.                             if (responseData && responseData.data && responseData.data.error) {
  425.                                 if (responseData.data.error === 'These actions are forbidden.') {
  426.                                     errorMessage = 'Client ID 无效或已被禁用，请检查配置';
  427.                                 } else {
  428.                                     errorMessage = responseData.data.error;
  429.                                 }
  430.                             } else {
  431.                                 errorMessage = 'Client ID 配置错误';
  432.                             }
  433.                         } else if (response.status === 403) {
  434.                             errorMessage = '访问被拒绝，请检查 Client ID 权限';
  435.                         } else if (response.status === 429) {
  436.                             errorMessage = '请求过于频繁，请稍后再试';
  437.                         } else {
  438.                             errorMessage = `上传失败 (${response.status})`;
  439.                         }
  440.                         
  441.                         console.error('Imgur 上传错误:', response);
  442.                         showStatusInModal(modal, errorMessage, 'error');
  443.                         
  444.                         if (response.status === 400 || response.status === 403) {
  445.                             const configPanel = modal.querySelector('.imgur-upload-config-panel');
  446.                             configPanel.classList.remove('hidden');
  447.                         }
  448.                         
  449.                         submitBtn.disabled = false;
  450.                         submitBtn.textContent = '确认上传';
  451.                     }
  452.                 } catch (e) {
  453.                     console.error('解析响应失败:', e, response);
  454.                     showStatusInModal(modal, '响应解析失败，请重试', 'error');
  455.                     
  456.                     submitBtn.disabled = false;
  457.                     submitBtn.textContent = '确认上传';
  458.                 }
  459.             },
  460.             onerror: function(error) {
  461.                 console.error('GM_xmlhttpRequest 错误:', error);
  462.                 showStatusInModal(modal, '网络请求失败，请检查连接', 'error');
  463.                 
  464.                 const submitBtn = modal.querySelector('.imgur-upload-submit-btn');
  465.                 submitBtn.disabled = false;
  466.                 submitBtn.textContent = '确认上传';
  467.             },
  468.             ontimeout: function() {
  469.                 console.error('Imgur 上传超时');
  470.                 showStatusInModal(modal, '上传超时，请重试', 'error');
  471.                 
  472.                 const submitBtn = modal.querySelector('.imgur-upload-submit-btn');
  473.                 submitBtn.disabled = false;
  474.                 submitBtn.textContent = '确认上传';
  475.             }
  476.         });
  477.     }
  478.  
  479.     // 将图片链接插入到文本框
  480.     function insertLinkIntoTextarea(textareaElement, imageUrl, fileName) {
  481.         const altText = fileName ? fileName.split('.')[0] : 'image';
  482.         const textToInsert = imageUrl;
  483.         
  484.         const currentValue = textareaElement.value;
  485.         const selectionStart = textareaElement.selectionStart;
  486.         const selectionEnd = textareaElement.selectionEnd;
  487.         
  488.         const newText = currentValue.substring(0, selectionStart) + textToInsert + currentValue.substring(selectionEnd);
  489.         textareaElement.value = newText;
  490.         
  491.         const newCursorPosition = selectionStart + textToInsert.length;
  492.         textareaElement.selectionStart = newCursorPosition;
  493.         textareaElement.selectionEnd = newCursorPosition;
  494.         
  495.         textareaElement.focus();
  496.         textareaElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
  497.     }
  498.  
  499.     // 在页面头部添加上传按钮
  500.     function addUploadButtonToHeader() {
  501.         const replyBox = document.getElementById('reply-box');
  502.         if (!replyBox) return;
  503.         
  504.         const headerCell = replyBox.querySelector('.cell.flex-one-row');
  505.         if (!headerCell) return;
  506.         
  507.         if (headerCell.querySelector('.imgur-upload-btn')) return;
  508.         
  509.         const leftDiv = headerCell.querySelector('div:first-child');
  510.         if (leftDiv) {
  511.             const uploadBtn = document.createElement('a');
  512.             uploadBtn.className = 'imgur-upload-btn';
  513.             uploadBtn.textContent = '上传';
  514.             uploadBtn.href = 'javascript:void(0);';
  515.             uploadBtn.title = '上传图片';
  516.             uploadBtn.style.marginLeft = '10px';
  517.             
  518.             leftDiv.appendChild(uploadBtn);
  519.             
  520.             uploadBtn.addEventListener('click', function(e) {
  521.                 e.preventDefault();
  522.                 const textarea = document.getElementById('reply_content');
  523.                 if (textarea) {
  524.                     createUploadModal(textarea);
  525.                 }
  526.             });
  527.         }
  528.     }
  529.  
  530.     // 查找并添加上传按钮
  531.     function findTextareasAndAddButtons() {
  532.         addUploadButtonToHeader();
  533.         setupMutationObserver();
  534.     }
  535.  
  536.     // 监听DOM变化
  537.     function setupMutationObserver() {
  538.         const observer = new MutationObserver(function(mutations) {
  539.             let shouldCheck = false;
  540.             mutations.forEach(function(mutation) {
  541.                 mutation.addedNodes.forEach(function(node) {
  542.                     if (node.nodeType === Node.ELEMENT_NODE && 
  543.                         (node.id === 'reply-box' || node.querySelector('#reply-box'))) {
  544.                         shouldCheck = true;
  545.                     }
  546.                 });
  547.             });
  548.             
  549.             if (shouldCheck) {
  550.                 setTimeout(addUploadButtonToHeader, 100);
  551.             }
  552.         });
  553.         
  554.         observer.observe(document.body, { 
  555.             childList: true, 
  556.             subtree: true 
  557.         });
  558.     }
  559.  
  560.     // 初始化脚本
  561.     function init() {
  562.         addStyle();
  563.         setTimeout(findTextareasAndAddButtons, 100);
  564.     }
  565.  
  566.     if (document.readyState === "loading") {
  567.         document.addEventListener("DOMContentLoaded", init);
  568.     } else {
  569.         init();
  570.     }
  571. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址