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