Auto Replace Color with CSS Variable

try to take over the world

当前为 2023-07-03 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Auto Replace Color with CSS Variable
  3. // @namespace linghao.su
  4. // @version 0.4
  5. // @description try to take over the world
  6. // @author slh001@live.cn
  7. // @match https://www.figma.com/file/*/DCE-5-Prototype?*
  8. // @match https://www.figma.com/file/*/DCE-5_New?*
  9. // @match https://www.figma.com/file/*/%E9%A6%96%E9%A1%B5-Dashboar-%26-Login?*
  10. // @icon https://www.google.com/s2/favicons?sz=64&domain=figma.com
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. const aliasUrl = 'https://cdn.jsdelivr.net/npm/@dao-style/core@0.7.1/dist/styles/color/alias.css';
  15. const varUrl = 'https://cdn.jsdelivr.net/npm/@dao-style/core@0.7.1/dist/styles/color/var.css';
  16.  
  17. const DELAY_MS = 500;
  18. const divTargetStr = 'selection_colors_panel--styleName--';
  19. const targetStr = 'colors_inspect_panel--paintColor';
  20.  
  21. const DAO_REPLACE_ATTR_KEY = 'DAO_REPLACE_ATTR_KEY';
  22. let lastLastTimeoutId = -1;
  23.  
  24. const cssMap = new Map();
  25.  
  26. async function init() {
  27. cssMap.clear();
  28. const handler = await fetch(varUrl);
  29. const cssStr = await handler.text();
  30.  
  31. const aliasHandler = await fetch(aliasUrl);
  32. const aliasStr = await aliasHandler.text();
  33.  
  34. const cssArr = cssStr.split('\n').map(item=>item.split(':').map(iitem => iitem.trim())).slice(1, -1).map(item => [item[1].slice(0, -1), item[0]]).filter(item => item[0].startsWith('#'));
  35. const aliasArr = aliasStr.split('\n').map(item=>item.split(':').map(iitem => iitem.trim())).slice(1, -1).map(item => [item[1].slice(0, -1), item[0]]).filter(item => item[0].startsWith('#'));
  36.  
  37. cssArr.forEach(item => cssMap.set(item[0].toUpperCase(), item[1]));
  38. aliasArr.forEach(item => cssMap.set(item[0].toUpperCase(), item[1]));
  39. }
  40.  
  41. function getSuitableTag(item) {
  42. while(item) {
  43. item = item.parentNode;
  44. if (!item.className || item.className.includes('selection_colors_panel--styleRow')) {
  45. return item;
  46. }
  47. }
  48. }
  49. function getTargetList() {
  50. const spanList = Array.from(document.querySelectorAll('span'));
  51. const divList = Array.from(document.querySelectorAll('div'));
  52.  
  53.  
  54. const targetSpanList = spanList.filter(item => item.className.includes(targetStr));
  55. const targetDivList = divList.filter(item => item.className.includes(divTargetStr));
  56.  
  57. const targetList = [...targetSpanList, ...targetDivList]
  58.  
  59. console.log(targetList);
  60.  
  61. targetList.forEach(item => {
  62. const innerText = item.innerText;
  63. const cssVariable = cssMap.get(innerText.toUpperCase());
  64. if (cssVariable) {
  65. item.innerHTML = `<div>${cssVariable}</div><div>${innerText}</div>`;
  66. item.setAttribute(DAO_REPLACE_ATTR_KEY, innerText);
  67. const eventBindingDom = getSuitableTag(item);
  68. if (eventBindingDom) {
  69. let fn = (e) => {
  70. setTimeout(() => {
  71. navigator.clipboard.writeText(e?.target?.getAttribute(DAO_REPLACE_ATTR_KEY) ?? cssVariable);
  72. }, DELAY_MS)
  73. }
  74. eventBindingDom.addEventListener('click', fn);
  75. }
  76.  
  77. }
  78. })
  79. lastLastTimeoutId = -1;
  80. }
  81.  
  82. (async function() {
  83. 'use strict';
  84.  
  85. await init();
  86. document.body.addEventListener('click', () => {
  87. if (lastLastTimeoutId !== -1) {
  88. clearTimeout(lastLastTimeoutId);
  89. lastLastTimeoutId = -1;
  90. }
  91. lastLastTimeoutId = setTimeout(getTargetList, DELAY_MS);
  92. })
  93. })();