☰

淘宝宝贝ID复制助手

淘宝商品页左上角ID显示窗，点击后复制

  1. // ==UserScript==
  2. // @name         淘宝宝贝ID复制助手
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @author       yuensui
  6. // @description  淘宝商品页左上角ID显示窗，点击后复制
  7. // @match        *://item.taobao.com/item.htm*
  8. // @grant        GM_setClipboard
  9. // @grant        GM_addStyle
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // 添加全局样式
  17.     GM_addStyle(`
  18.         .taobao-id-box {
  19.             position: fixed;
  20.             left: 20px;
  21.             top: 20px;
  22.             background: linear-gradient(135deg, #FF6A00 0%, #FF8C00 100%);
  23.             color: white;
  24.             padding: 12px 24px;
  25.             border-radius: 8px;
  26.             box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  27.             cursor: pointer;
  28.             z-index: 99999;
  29.             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  30.             display: flex;
  31.             align-items: center;
  32.             gap: 8px;
  33.         }
  34.  
  35.         .copy-feedback {
  36.             animation: fadeScale 0.8s ease-out;
  37.             position: fixed;
  38.             left: 20px;
  39.             top: 68px;
  40.             background: rgba(255,255,255,0.95);
  41.             color: #2ecc71;
  42.             padding: 8px 16px;
  43.             border-radius: 20px;
  44.             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  45.             font-size: 13px;
  46.             border: 1px solid #2ecc7133;
  47.         }
  48.  
  49.         @keyframes fadeScale {
  50.             0% { opacity:0; transform: translateY(10px); }
  51.             30% { opacity:1; transform: translateY(0); }
  52.             100% { opacity:0; transform: translateY(-10px); }
  53.         }
  54.     `);
  55.  
  56.     // 创建主信息窗
  57.     function createInfoBox(id) {
  58.         const box = document.createElement('div');
  59.         box.className  = 'taobao-id-box';
  60.         box.innerHTML  = `
  61.             <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
  62.                 <path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19M7,7H17V9H7V7M7,11H17V13H7V11M7,15H14V17H7V15Z"/>
  63.             </svg>
  64.             <span style="font-weight:500;">${
  65.               id}</span>
  66.         `;
  67.  
  68.         // 点击事件
  69.         box.addEventListener('click',  () => {
  70.             GM_setClipboard(id);
  71.             showFeedbackAnimation(box);
  72.             triggerBoxFeedback(box);
  73.         });
  74.  
  75.         return box;
  76.     }
  77.  
  78.     // 触发信息窗反馈
  79.     function triggerBoxFeedback(element) {
  80.         element.style.transform  = 'scale(0.95)';
  81.         setTimeout(() => {
  82.             element.style.transform  = 'scale(1)';
  83.             element.style.background  = 'linear-gradient(135deg, #2ecc71 0%, #27ae60 100%)';
  84.             setTimeout(() => {
  85.                 element.style.background  = 'linear-gradient(135deg, #FF6A00 0%, #FF8C00 100%)';
  86.             }, 800);
  87.         }, 100);
  88.     }
  89.  
  90.     // 显示浮动提示
  91.     function showFeedbackAnimation() {
  92.         const tip = document.createElement('div');
  93.         tip.className  = 'copy-feedback';
  94.         tip.textContent  = '✓ 已复制到剪贴板';
  95.         document.body.appendChild(tip);
  96.         setTimeout(() => tip.remove(),  1000);
  97.     }
  98.  
  99.     // 主逻辑
  100.     function main() {
  101.         const itemId = new URLSearchParams(location.search).get('id');
  102.         if (!itemId || document.querySelector('.taobao-id-box'))  return;
  103.  
  104.         document.body.appendChild(createInfoBox(itemId));
  105.     }
  106.  
  107.     // 监听页面变化
  108.     new MutationObserver(main).observe(document, {
  109.         childList: true,
  110.         subtree: true
  111.     });
  112.     main();
  113. })();