Paste this into your console for an easy-to-edit, live-updating CSS overlay. Demo: http://i.imgur.com/VWcK8RA.gif

css-overlay.js

// CSS Overlay
var overlay_styles = document.createElement('style')
var virtual_stylesheet = document.createElement('style')
var textarea = document.createElement('textarea');

overlay_styles.textContent = `
  [data-css=overlay] {
    box-sizing: border-box;
    margin: 0;
    padding: 1em;
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 18pt;
    font-family: 'Fira Code', monospace;
    color: black !important;
    background: white !important;
    opacity: .3;
    z-index: 99999;
    transition: height .2s ease-in-out, opacity .2s ease-in-out;
  }
  [data-css=overlay]:hover {
    opacity: .8;
    height: 80%;
  }
`
textarea.dataset.css = 'overlay'
if (localStorage.css_overlay) textarea.value = localStorage.css_overlay
textarea.addEventListener(
  'input', 
  e => localStorage.css_overlay = virtual_stylesheet.textContent = textarea.value
)

document.head.appendChild(overlay_styles)
document.head.appendChild(virtual_stylesheet)
document.body.appendChild(textarea)