☰

取色器、颜色吸取器

一款简单易用的颜色吸取插件，操作简单，点击“颜色吸取”按钮，成功吸取颜色后，点击“颜色值（十六进制）”即可复制使用

  1. // ==UserScript==
  2. // @name         取色器、颜色吸取器
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2.1
  5. // @description  一款简单易用的颜色吸取插件，操作简单，点击“颜色吸取”按钮，成功吸取颜色后，点击“颜色值（十六进制）”即可复制使用
  6. // @author       casee
  7. // @match        *://*/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=mozilla.org
  9. // @grant        none
  10. // @license      MIT License
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     let popup = null
  16.     let panel = null
  17.     let rootElement = document.body
  18.  
  19.     function createStyle() {
  20.         var styleObj = `
  21.           .hover:hover {
  22.             filter: alpha(Opacity=70);
  23.             opacity: 0.7;
  24.           }
  25.         `
  26.         var style = document.createElement('style');
  27.         style.type = 'text/css';
  28.         style.innerHTML = styleObj;
  29.         document.getElementsByTagName("head")[0].appendChild(style);
  30.     }
  31.  
  32.     function createPanel() {
  33.         panel = document.createElement("div")
  34.         panel.classList.add("hover")
  35.         panel.setAttribute("id", "start-button")
  36.         panel.style.cssText = `
  37.           padding: 4px;
  38.           background: linear-gradient(45deg,#fea158,#d500f9,#4e72e3);
  39.           color: #fff;
  40.           border-radius: 4px;
  41.           position: fixed;
  42.           right: 10px;
  43.           top: 50%;
  44.           transform: translateY(-50%);
  45.           cursor: pointer;
  46.           font-size: 12px;
  47.           line-height:14px;
  48.           z-index: 99999;
  49.           transform: scale(0.9);
  50.         `
  51.         panel.innerHTML = "颜色<br/>吸取"
  52.         rootElement.appendChild(panel)
  53.     }
  54.  
  55.     function showToast(message, color="rgba(0,0,0,.7)") {
  56.         const toast = document.createElement('div');
  57.         toast.style.cssText = `
  58.           position: fixed;
  59.           top: 10%;
  60.           left: 50%;
  61.           transform: translateX(-50%);
  62.           opacity: 0;
  63.           z-index: 20000;
  64.           background-color: ${color};
  65.           box-shadow: 0 0 10px 0 #bbb;
  66.           color: #fff;
  67.           font-size: 12px;
  68.           padding: 4px 10px;
  69.           border-radius: 4px;
  70.         `
  71.         toast.innerText = message;
  72.         rootElement.appendChild(toast);
  73.  
  74.         // 渐变动画效果
  75.         const start = performance.now();
  76.         const interval = setInterval(function() {
  77.             const elapsed = performance.now() - start;
  78.             const progress = elapsed / 300; // 动画持续时间为500ms
  79.  
  80.             toast.style.opacity = progress;
  81.             toast.style.transform = `translate(-50%, -${100 - progress * 100}%)`;
  82.  
  83.             if (progress >= 1) {
  84.                 clearInterval(interval);
  85.                 setTimeout(function() {
  86.                     rootElement.removeChild(toast);
  87.                 }, 2000);
  88.             }
  89.         }, 10);
  90.     }
  91.  
  92.     function removePopup() {
  93.         if(popup){
  94.             rootElement.removeChild(popup)
  95.             popup = null
  96.         }
  97.     }
  98.  
  99.     function textCopy(t, tip=false) {
  100.         if (!navigator.clipboard) {
  101.             var ele = document.createElement("input");
  102.             ele.value = t;
  103.             rootElement.appendChild(ele);
  104.             ele.select();
  105.             document.execCommand("copy");
  106.             rootElement.removeChild(ele);
  107.             if (document.execCommand("copy")) {
  108.                 removePopup()
  109.                 showToast(tip?"颜色吸取成功，请粘贴使用" : "复制成功")
  110.             } else {
  111.                 showToast("操作失败")
  112.             }
  113.         } else {
  114.             navigator.clipboard.writeText(t).then(function () {
  115.                 removePopup()
  116.                 showToast(tip?"颜色吸取成功，请粘贴使用" : "复制成功")
  117.             }).catch(function () {
  118.                 showToast("操作失败")
  119.             })
  120.         }
  121.     }
  122.  
  123.     function createResult(result) {
  124.         if(popup){
  125.             removePopup()
  126.         }
  127.         popup = document.createElement("div")
  128.         popup.setAttribute("data-flag", "pop")
  129.         popup.style.cssText = `
  130.           position:fixed;
  131.           top: 10%;
  132.           left: 50%;
  133.           opacity: 0;
  134.           display:flex;
  135.           align-items: center;
  136.           transform: translateX(-50%);
  137.           padding: 5px 5px 5px 10px;
  138.           background: #fff;
  139.           box-shadow: 0 0 10px 0 #aaa;
  140.           z-index: 99999;
  141.           border-radius: 4px;
  142.         `
  143.         let color = document.createElement("div")
  144.         color.setAttribute("data-flag", "pop")
  145.         color.style.cssText = `
  146.           width: 16px;
  147.           height: 16px;
  148.           border: 1px solid #e6e6e6;
  149.           border-radius: 4px;
  150.           padding: 1px;
  151.           box-sizing: border-box;
  152.         `
  153.         let innerColor = document.createElement("div")
  154.         innerColor.style.cssText = `
  155.           width: 100%;
  156.           height: 100%;
  157.           background: ${result.sRGBHex};
  158.           border-radius: 2px;
  159.         `
  160.         color.appendChild(innerColor)
  161.         popup.appendChild(color)
  162.  
  163.         let span = document.createElement("span")
  164.         span.setAttribute("data-flag", "pop")
  165.         span.classList.add("hover")
  166.         span.textContent = result.sRGBHex.toUpperCase()
  167.         span.style.cssText = `
  168.           margin-left: 5px;
  169.           font-size: 14px;
  170.           text-decoration: underline;
  171.           color: #0680E9;
  172.           cursor: pointer;
  173.         `
  174.         span.addEventListener("click", function(){
  175.             textCopy(result.sRGBHex.toUpperCase())
  176.         })
  177.         popup.appendChild(span)
  178.  
  179.         let closeBtn = document.createElement("div")
  180.         closeBtn.style.cssText = `
  181.          width: 20px;
  182.          height: 20px;
  183.          background-position: center;
  184.          background-repeat: no-repeat;
  185.          background-size: cover;
  186.          margin-left: 6px;
  187.          cursor: pointer;
  188.          background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAABGRJREFUeF7tnU9u00AYxceJcgckbgA7DoBSliVhR5TChgXiAFwAbsABQGJVtWpXqGlZQRB3KCdgwyFiI5caJajFHnv+vJn3sp6Mv/fery91YtmF0YvagYJavcQbAUAOgQAQAOQOkMtXAwgAcgfI5asBBAC5A+Ty1QACgNwBcvlqAAFA7gC5fDWAACB3gFy+GkAAkDtALl8NIADIHSCXrwYQAOQOkMtXAwgAcgfI5asBBAC5A+Ty1QACgNwBcvlqAAFA7gC5fDWAACB3gFy+GkAAkDtALl8NIADIHSCXD90Ax+frmSmLV5WpHhhj3o/H49PF/sMfyJmdXHy/tynLl6aqnpnCfC6r6vT5/NEF6sywAByvvj2tqurkH+Mux+PxAhWCq/A3m3rm+9tzF0WxWM6mp4gQQAJwS/iNf5AQ3BZ+MzQqBHAAtIQPCUFb+MgQQAFwePZ1f2SK845VCdEEXcP/C8HIzJeP91YdNXpfBgXA0Wr90VTmhYXqqBDYhl/rKkxxtpxPn1ho9LoUC4Cz9U9jzF1LxVEg6BP+ta5fB/O9O5YavS2HAuDw05e3o9HoTQ+1QSEYEL4xRfHuYDZ93UOjl7dAATDIWGOCQJDCjDakQAFQD45sMPJsNqHvfEfR940+34doNOJMLjKAa4BGFJLhSLO4CB2+AZAgyDn8P6el4K+YAcQ8dqhY4AGI9Y8hQ/hJNECMjwOW8JMCIFQTMIWfHAC+IWALP0kAfEHAGH6yALiGgDX8pAFwBUG9z02XcXU8DQvy+0PHWXotS+I08H/Khv71Xu+9cw1fRyeTDz/5BnB0itgx751lWYSfDQAOPg5sIMgm/KwACARBVuFnB4BnCLILP0sAPEGQZfjZAuAYgmzDzxoARxBkHb4AaP/fXwC0e4S5YuAXRNuisoYg+W8Cb8LPYfjN9tlCkB0AHsLPGoKsAPAYfrYQZANAgPCzhCALAAKGnx0EyQMwMPxL/RyMeRbXaaqh4df3G6oPpAtCOtmNtchF+M3NplzuheVS+zRJfgT4CMzHnu32x1+RHAA+g/K5d/yob54gKQBCBBTiGEgwJANAyGBCHis2DEkAECOQGMeMAQM8ADGDiHnsUDBAA4AQAMIMPmGABQDJeKRZXMMACQCi4YgzuYABDgBko5Fn6wsDFAApGJzCjDYwQAGgW8XaROdmLRQAR7pZtJtULXbBAkC3i7eIzs1SKAD0wAg3odrsAgVAPbgeGWMT3/C1cAB0gADyGv22swM9NMoSVj02ztKwnsshG6DRsv3gyLIsP0wmkxPUZwY2M181gR4c2RNHvS24A9ANENwNwgMKAMLQtyULAAFA7gC5fDWAACB3gFy+GkAAkDtALl8NIADIHSCXrwYQAOQOkMtXAwgAcgfI5asBBAC5A+Ty1QACgNwBcvlqAAFA7gC5fDWAACB3gFy+GkAAkDtALl8NIADIHSCXrwYQAOQOkMtXAwgAcgfI5asBBAC5A+Ty1QACgNwBcvm/Ac4TZ67pucrUAAAAAElFTkSuQmCC")
  189.         `
  190.         closeBtn.classList.add("hover")
  191.         closeBtn.addEventListener("click", function() {
  192.             removePopup()
  193.         })
  194.         popup.appendChild(closeBtn)
  195.         rootElement.appendChild(popup)
  196.  
  197.         const start = performance.now();
  198.         const interval = setInterval(function() {
  199.             const elapsed = performance.now() - start;
  200.             const progress = elapsed / 300; // 动画持续时间为500ms
  201.  
  202.             popup.style.opacity = progress;
  203.             popup.style.transform = `translate(-50%, -${100 - progress * 100}%)`;
  204.  
  205.             if (progress >= 1) {
  206.                 clearInterval(interval);
  207.             }
  208.         }, 10);
  209.     }
  210.  
  211.     if (window.self === window.top) { // 判断当前窗口是否处于顶层
  212.         createStyle()
  213.         createPanel()
  214.         document.getElementById("start-button").addEventListener("click", () => {
  215.             if (!window.EyeDropper) {
  216.                 return;
  217.             }
  218.             const eyeDropper = new window.EyeDropper();
  219.             eyeDropper
  220.                 .open()
  221.                 .then((result) => {
  222.                 createResult(result)
  223.                 // textCopy(result.sRGBHex, true)
  224.             })
  225.                 .catch((e) => {
  226.             });
  227.         });
  228.  
  229.         new MutationObserver(function(){
  230.             var btn = window.document.getElementById("start-button")
  231.             if(!btn) {
  232.                 rootElement.appendChild(panel)
  233.             }
  234.         }).observe(rootElement, {attributes: true})
  235.  
  236.         rootElement.addEventListener("click", function(e){
  237.             if(e.target.dataset.flag !== "pop" && popup){ // 点击空白地方关闭popup
  238.                 removePopup()
  239.             }
  240.         })
  241.     }
  242. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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