pick color in browser
Per
// ==UserScript== // @name browser-color-picker // @namespace http://tampermonkey.net/ // @version 0.3.1 // @description pick color in browser // @author heyq <[email protected]> // @match *://*/* // @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== // @grant none // @license MIT // ==/UserScript== (function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))i(e);new MutationObserver(e=>{for(const o of e)if(o.type==="childList")for(const c of o.addedNodes)c.tagName==="LINK"&&c.rel==="modulepreload"&&i(c)}).observe(document,{childList:!0,subtree:!0});function r(e){const o={};return e.integrity&&(o.integrity=e.integrity),e.referrerPolicy&&(o.referrerPolicy=e.referrerPolicy),e.crossOrigin==="use-credentials"?o.credentials="include":e.crossOrigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function i(e){if(e.ep)return;e.ep=!0;const o=r(e);fetch(e.href,o)}})();const h=t=>{t=t.substring(1,t.length);const n=parseInt(t.substring(0,2),16),r=parseInt(t.substring(2,4),16),i=parseInt(t.substring(4,6),16);return`${n}, ${r}, ${i}`},d=(t,n)=>{for(const r in n)n[r]&&(t.style[r]=n[r])},E=(t,n,r,i)=>{const e=document.createElement("div"),o={width:"350px",height:"140px",padding:"16px 28px 20px 28px",display:"flex",backgroundColor:"#FAFAFC",border:"1px solid #EDEDED",borderRadius:"24px",position:"fixed",left:`${r}px`,top:`${i}px`,zIndex:"9999"},c=x=>{e.contains(x.target)||(e.remove(),document.removeEventListener("click",c))},f=x=>{e.contains(x.target)||(e.remove(),document.removeEventListener("contextmenu",f))};document.addEventListener("click",c),document.addEventListener("contextmenu",f),d(e,o);const g=document.createElement("div");d(g,{width:"140px",borderRadius:"32px",border:"2px solid #EDEDED",backgroundColor:t}),e.appendChild(g);const a=document.createElement("div");d(a,{display:"flex",flexGrow:"1",flexDirection:"column",justifyContent:"space-between",marginLeft:"16px"}),e.appendChild(a);const y={},u=document.createElement("p");u.innerHTML=`HEX: ${t.toUpperCase()}`,d(u,y),a.appendChild(u);const b={outline:"none",borderWidth:"0px",backgroundColor:"#DBEBFD",color:"#209DF5",fontSize:"14px",height:"34px",lineHeight:"34px",padding:"0 18px",borderRadius:"4px",cursor:"pointer"},s=document.createElement("button");s.innerText="点此复制十六进制颜色值",a.appendChild(s),d(s,b),s.addEventListener("click",()=>{window.navigator.clipboard.writeText(t.toUpperCase()).then(()=>{s.innerText="复制成功",s.style.backgroundColor="#DAF0E4",s.style.color="#18A058"})});const m=document.createElement("p");m.innerHTML=`RGB: (${h(t)})`,d(m,y),a.appendChild(m);const l=document.createElement("button");l.innerText="点此复制RGB颜色值",a.appendChild(l),d(l,b),l.addEventListener("click",()=>{window.navigator.clipboard.writeText(h(t)).then(()=>{l.innerText="复制成功",l.style.backgroundColor="#DAF0E4",l.style.color="#18A058"})});const p=document.createElement("button");p.innerText="关闭插件",p.addEventListener("click",()=>{e.remove(),n()}),d(p,{position:"absolute",right:"28px",top:"16px",outline:"none",borderWidth:"0px",backgroundColor:"#FDF0DB",color:"#F5B220",fontSize:"12px",height:"22px",lineHeight:"22px",padding:"0 6px",borderRadius:"3px",cursor:"pointer"}),e.appendChild(p),document.body.appendChild(e)};(()=>{const t=async i=>{i.preventDefault();const e=new window.EyeDropper;try{const c=(await e.open()).sRGBHex;E(c,()=>{r()},i.clientX,i.clientY)}catch{console.log("取消本次拾取。")}},n=()=>window.hasOwnProperty("EyeDropper")?(document.addEventListener("contextmenu",t,!1),console.log("被激活了！"),""):(console.warn("对不起，当前浏览器版本过低，请升级最新版本。"),""),r=()=>(document.removeEventListener("contextmenu",t,!1),console.log("被注销了!"),"");window.activateColorPicker=n,window.deactivateColorPicker=r})();
