Lite version of the builder.io chrome extension for debugging purposes.

builder-bookmarklet.js

javascript:(function() {
  /* https://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript */
  function hashCode(str) {
    let hash = 0;
    let i = 0;
    const len = str.length;
    while ( i < len ) {
      hash = ((hash << 5) - hash + str.charCodeAt(i++)) << 0;
    }
    return hash;
  };

  function posHashCode(str) {
    return hashCode(str) + 2 ** 31 - 1;
  };

  document.querySelectorAll('[builder-model]').forEach(el => {
    const model = el.getAttribute("builder-model");
    const id = el.getAttribute("builder-content-id");
    const hd = el.firstChild;

    const ttId = `tool-tip-${model}-${id}`;
    let tt = el.querySelector(`:scope > #${ttId}`);
    if (!tt) {
      tt = document.createElement('div');
      el.prepend(tt);
    }

    const color = `hsl(${posHashCode(model) % 360}, 80%, 60%)`;

    tt.id = ttId;
    tt.innerHTML = `${model}/${id}`;
    tt.style.backgroundColor = color;
    tt.style.color = "black";
    tt.style.padding = "5px 1px";
    tt.style.position = "absolute";
    tt.style.fontFamily = "monospace";
    tt.style.fontSize = "14px";
    tt.style.zIndex = "1";

    el.style.outlineWidth = "5px";
    el.style.outlineStyle = "solid";
    el.style.outlineColor = color;
  })
})();