Projects‎ > ‎

A Chrome Extension Attempt

posted Feb 7, 2010, 7:32 PM by Philip Saxton

Far too many websites seem to enjoy breaking CSS specification in specifying an explicit foreground color without the background, or vice versa. This generally goes unnoticed as most people use the default dark foreground and light background their browser provides. When one prefers to change their default colors, however these sites become unreadable. After hours of searching for a  Firefox or Chrome plugin to force these sites to a minimum of contrast, I find none available. 

Thus, I have decided to create CCF, the CSS Color Fixer for Chrome. The first task would be to walk the DOM tree of the page to inspect the color values for each element. This wound up being a lot trickier than I had envisioned. In my many attempts I also created a log class for JavaScript which tabs the log output to make it more readable. Next, would be to check the foreground and background colors of each element to ensure a certain amount of contrast. This second part is still in progress.

                                               //logging
var log = {
  "tnum" : 0                                                   ,
  "tabs" : ""                                                  ,
  "s"    : "                                                  ",
  "tab"  : function() {
    this.tnum += 2;
    this.tabs = this.s.substring(0,this.tnum);
  }                                                            ,
  "untab": function() {
    this.tnum = (this.tnum >= 2) ? this.tnum-2 : 0;
    this.tabs = this.s.substring(0,this.tnum);
  }                                                            ,
  "write": function(expr) {
    console.log(this.tabs+expr);
  }
}
                                               //endlogging
function domFuncWalk(obj, func) {
                                               //logging
  log.write("Found: "+obj.constructor.name);
  log.tab();
                                               //endlogging
  func(obj);

  if(obj.firstElementChild) {
    domFuncWalk(obj.firstElementChild, func);
  }
                                               //logging
  log.untab()
  log.write("Finished: "+obj.constructor.name);
                                               //endlogging
  if(obj.nextElementSibling) {
    domFuncWalk(obj.nextElementSibling, func);
  }
}

function checkColor(element) {
  //get foreground color as an array [r, g, b]
  temp = getComputedStyle(element).getPropertyValue("color");
  fg = temp.substring(4,temp.length-1).split(",");
  fgt = Number(fg[0])+Number(fg[1])+Number(fg[2]);

  //do the same for background color
  temp = window.getComputedStyle(element).getPropertyValue("background-color");
  temp = (temp.substring(0,4)=="rgba") ? temp.substring(5,temp.length-1) : temp.substring(4,temp.length-1);
  bg = temp.split(",");
  bgt = Number(bg[0])+Number(bg[1])+Number(bg[2]);
                                                //logging
  log.tab();
  log.write("Before filter");
  log.write("fg: "+fg+"\tfgt: "+fgt);
  log.write("bg: "+bg+"\tbgt: "+bgt);
                                                //endlogging
  if(fgt == 0 && bgt != 0)
    element.style.backgroundColor="inherit";
  else if(fgt != 0 && bgt == 0)
    element.style.color="inherit";
                                                //logging
  temp = getComputedStyle(element).getPropertyValue("color");
  fg = temp.substring(4,temp.length-1).split(",");
  temp = window.getComputedStyle(element).getPropertyValue("background-color");
  temp = (temp.substring(0,4)=="rgba") ? temp.substring(5,temp.length-1) : temp.substring(4,temp.length-1);
  bg = temp.split(",");

  log.write("After Filter");
  log.write("fg: "+fg+"\tfgt: "+fgt);
  log.write("bg: "+bg+"\tbgt: "+bgt);
  log.untab();
                                                //endlogging
}

domFuncWalk(document.body, checkColor);

Creating an extension for Chrome is exceedingly simple. The above saved in a file called contentscript.js along with the following file saved as manifest.json will create the plugin. There is a packed .crx available below, however. Be sure to check back for updates if you do choose to install the partially completed work.

{
  "name": "CSS Color Fixer",
  "version": "0.3.29",
  "description": "Forces web pages to be standards compliant by removing foreground or background of an element if both are not explicit in an effort to make pages readable with any theme.",

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["contentscript.js"],
      "run_at": "document_idle",
      "all_frames": true
    }
  ]
}

ċ
CCF.crx
(1k)
Philip Saxton,
Feb 7, 2010, 7:50 PM
Comments