Font and color checker chrome extension in JavaScript I have written this code for a color and font checker on a webpage.

The code is current and not so good. I would really like if I can get comments, reviews or any better approach for my PoC.

PoC: I want to highlight all the colors or fonts which should not be used on the webpage (the domain is defined by me as of now). I am traversing the DOM and checking the color and font styles and then highlight them if there are values out of my domain.

The current approach is very naive and not optimal because I am traversing and storing element styles, which is bad for duplicated DOM elements.

Any comments are appreciated, please let me know if I should add any more details.

inject.js

var brandColor = [
  "rgb(255, 255, 255)",
  "rgb(0, 0, 0)",
  "rgb(0, 163, 224)",
  "rgb(0, 118, 168)",
  "rgb(1, 33, 105)"
];

var brandFont = ["Open Sans", "Verdana"];
var fontNotMatch;

// generic walkDOM function - iterate DOM
function walkDom(start_element) {
  var arr = []; // we can gather elements here
  var loop = function(element) {
    do {
      // we can do something with element
      if (element.nodeType == 1) {
        // do not include text nodes
        arr.push(element);
      }
      if (element.hasChildNodes()) loop(element.firstChild);
    } while ((element = element.nextSibling));
  };
  loop(start_element);
  //loop(start_elem.firstChild); // do not include siblings of start element
  return arr;
}

var arr = walkDom(document.body);

var stylesContainer = {};
var fontChecker = {};
// iterate through DOM array
for (elem in arr) {
  // get all colors - [need better approach for this as well]
  stylesContainer[arr[elem].tagName] = getComputedStyle(
    arr[elem]
  ).getPropertyValue("color");

  // get all fonts
  fontChecker[arr[elem].tagName] = getComputedStyle(arr[elem]).getPropertyValue(
    "font-family"
  );
}

//console.log(stylesContainer);

// iterate styles
Object.keys(stylesContainer).forEach(element =&gt; {
  if (brandColor.indexOf(stylesContainer[element]) &gt; -1) {
    //pass
  } else if (document.querySelector(element).childNodes.length == 1) {
    document.getElementsByTagName(element)[0].style.border = "2px solid red";
    var path =
      "https://example.com/icons/favicon.ico";
    var img = document.createElement("img");
    img.setAttribute("src", path);
    img.setAttribute("width", "20");
    document.querySelector(element).appendChild(img);
  }
  // console.log(stylesContainer[element]);
});

// iterate font family
Object.keys(fontChecker).forEach(element =&gt; {
  // Loop through each element and check the font family
  // console.log(fontChecker[element]);
  if (fontChecker[element].indexOf("Open Sans") != 1) {
    fontNotMatch = true;
  }
});

if (fontNotMatch == true) {
  // alert("Incorrect font");

  var f = document.createElement("h3");
  f.classList.add("error");
  f.innerHTML = "hey bhansa";
  document.querySelector("BODY").appendChild(f);

  var pathCSS = chrome.runtime.getURL("demo.css");
  var head = document.getElementsByTagName("head")[0];
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = pathCSS;
  head.appendChild(link);
}
Just some random comments from a quick read through:

1) Does this work if someone defines their colors using hex or name style (#fff, #ffffff, white, rgba(255,255,255,1)?

2) Walking the DOM and creating a huge array is probably not a good idea for anything but a small web page. After that you have another 3 separate loops. I would suggest that you create a function that walks the dom and calls a function for each node (function walkDom(start_element, callback) { .... Then you only need to store nodes that fail the test. Also combine ll those loops into one test.

3) Rather than comparing the nodetype with 1 I would use if (element.nodeType === Node.ELEMENT_NODE) ...

4) Rather than a do...while loop and nextSibling it is probably simpler just to get the childNodes and loop through them.

5) Or even better look into the TreeWalker api https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker

6) This loop doesn't make sense:

for (elem in arr) {
  stylesContainer[arr[elem].tagName] = ...;
}


If you have two &lt;div&gt;'s in your tree the second one will over-write the first one.

7) A few things here:

if (brandColor.indexOf(stylesContainer[element]) &gt; -1) {
  //pass
} else if (document.querySelector(element).childNodes.length == 1) {
  document.getElementsByTagName(element)[0].style.border = "2px solid red";
  ...


}

Firstly don't use an if with an empty block, use a negated if :

if (brandColor.indexOf(stylesContainer[element]) &lt; 0 &amp;&amp;    document.querySelector(element).childNodes.length == 1) {


Also why only highlight elements with a single child and not those with two children or no children? Also consider using includes instead of indexOf And again this:

document.getElementsByTagName(element)


will return the first tag of that type in the document. It might not be the one with the issue. 

8) Don't mix styles. You use for ... in in some places and forEach in others. If you're using ES6 use let and const instead of var.

9) It is unnecessary to compare to true. if (fontNotMatch == true) { can be written as just if (fontNotMatch) {

10) If you check color you might want to check background-color and the various border-color's too.