Paste this code in chrome console or in snippets, then run. There will be an overlay on your webpage where you can add checkboxes. Used in conjunction with HTML/Markdown editors

MakeCheckboxes.js

console.clear();
function DomManipulator() {
    this.error = null;
    this.active = false;

    this.toggleActive = function toggleActive(shouldSetActiveSetInactive) {
        // is this a static method?
        if (typeof shouldSetActiveSetInactive === 'boolean') {
            this.active = shouldSetActiveSetInactive;
        } else {
            this.active = !this.active;
        }

    }
    this.getState = () => {
        const state = {};
        Object.entries(this).reduce((accum, [key, value]) => {
            if (typeof value !== 'function') {
                accum[key] = value;
            }
            return accum;
        }, state)
        return state;
    }
}

function DomManipulatorFactory() {
    return new DomManipulator();
}

DomManipulator.prototype.createNode = createNode;
DomManipulator.prototype.setStyle = setStyle;
DomManipulator.prototype.setAttrib = setAttrib;
DomManipulator.prototype.validateAndSetInputChildren = function validateAndSetInputChildren(wrapperNode, styleOpts) {
      Array.from(wrapperNode.childNodes).forEach((node) => {
          if (node.nodeName.toLowerCase() === 'input') {
              domManipular.setStyle(node, styleOpts);
          }
      })
  }
/**
 * @param {string} wrapperNodeType wraps the node
 * @param {string} type of node to insert 
 * @return {node} returns a node .
*/
function createNode(wrapperNodeType, insertNodeType, optional) {
    const newNode = document.createElement(wrapperNodeType);
    let insertNode = null;
    // createElement
    if (insertNodeType === 'checkbox') {
        insertNode = document.createElement('input');
        const attributes = {
          type: "checkbox"
        }
        this.setAttrib(insertNode,attributes)
    }  else if (insertNodeType === 'textNode') {
        if (optional && typeof optional === 'string') {
            insertNode = document.createTextNode(optional)
        } else {
            this.error = "No optional text supplied";
            // this would be a good time to include an event emitter here broadcase this error.
            return null;
        }
    }
    newNode.appendChild(insertNode);
    return newNode;
    //create checkbox
    //shove checkbox in element
    //return the new element;
}


function setStyle(elem, opt) {
    for (let key in opt) {
        elem.style[key] = opt[key];
    }
}
function setAttrib(elem, opt) {
    for (let key in opt) {
        elem.setAttribute(key, opt[key]);
    }
}


var domManipular = DomManipulatorFactory();


function dynamicInsert (e) {

  const {pageY: offsetY, clientX:left, clientY:top} = e;

  const styleOpts = {
    top: ( + offsetY + 'px'), left: ( left + 'px'), position: "absolute", zIndex: 5000,
  }
  const inputStyle = {
      width: '2rem', height: '2rem'
  }
  const checkboxNode = domManipular.createNode('div','checkbox');

  domManipular.setStyle(checkboxNode, styleOpts);
  domManipular.validateAndSetInputChildren(checkboxNode, inputStyle)
  console.log(checkboxNode);
  document.body.appendChild(checkboxNode)
  domManipular.toggleActive(true);


}

var toggleNode = null;
try {
    toggleNode = domManipular.createNode('button', 'textNode', 'Turn On');
} catch(err) {
    console.log(err, "cannot set on off button");
}
const toggleNodeStyle = {
    minWidth: '120px',
    borderRadius: "10px 10px",
    background: "#204ECF",
    border: "1px solid 204ECF",
    position: "fixed",
    top: '130px',
    left: '30px',
    zIndex: 5001,
    fontSize: '2rem',
    padding: '.2em 1em',
    color: 'white'
}

toggleNode.addEventListener('click', toggler)
domManipular.setStyle(toggleNode, toggleNodeStyle);
toggleNode.className="toggleNode";
document.body.appendChild(toggleNode);

function toggler(e) {
    if (domManipular.active) {
        document.body.removeEventListener('click', dynamicInsert);
        document.querySelector('.toggleNode').innerText = 'Turn On';
    } else {
        document.body.addEventListener('click', dynamicInsert, false)
        document.querySelector('.toggleNode').innerText = 'Turn Off';

    }
    domManipular.toggleActive();
}



toggler();