colorblind text helper

change all red text color to preferred one

  1. // ==UserScript==
  2. // @name colorblind text helper
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description change all red text color to preferred one
  6. // @author Something begins
  7. // @license none
  8. // @include https://*
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. const shadeCoef = 80;
  13. const toColor = "purple";
  14. // Function to check if an element is a text element
  15. function isTextElement(element) {
  16. return element.nodeType === Node.TEXT_NODE;
  17. }
  18.  
  19. // Function to check if a text element has a red color
  20. function isRedText(element) {
  21. const parentElement = element.parentElement;
  22. if (!parentElement) {
  23. return false;
  24. }
  25.  
  26. const computedStyle = window.getComputedStyle(parentElement);
  27. const color = computedStyle.color;
  28.  
  29. if (color.startsWith('rgb(')) {
  30. const rgb = color.match(/\d+/g);
  31. const red = parseInt(rgb[0]);
  32. const green = parseInt(rgb[1]);
  33. const blue = parseInt(rgb[2]);
  34.  
  35. if (red > green + shadeCoef && red > blue + shadeCoef) {
  36. return true;
  37. }
  38. } else if (color.startsWith('#')) {
  39. const hex = color.substr(1);
  40. const red = parseInt(hex.substr(0, 2), 16);
  41. const green = parseInt(hex.substr(2, 2), 16);
  42. const blue = parseInt(hex.substr(4, 2), 16);
  43.  
  44. if (red > green + shadeCoef && red > blue + shadeCoef) {
  45. return true;
  46. }
  47. }
  48.  
  49. return false;
  50. }
  51.  
  52. // Get all text nodes on the page
  53. const walker = document.createTreeWalker(
  54. document.body,
  55. NodeFilter.SHOW_TEXT,
  56. { acceptNode: node => NodeFilter.FILTER_ACCEPT }
  57. );
  58.  
  59. const textNodes = [];
  60. while (walker.nextNode()) {
  61. textNodes.push(walker.currentNode);
  62. }
  63.  
  64. // Filter text nodes that are red
  65. const redTextNodes = textNodes.filter(isRedText);
  66.  
  67. // Log red text nodes
  68. redTextNodes.forEach(textNode => {
  69. console.log('Red text:', textNode);
  70. textNode.parentElement.style.color = toColor;
  71. });