rl-input box user script. Play around with it. WIP. Check back for updates.

rl-input.user.js

// ==UserScript==
// @name          rlInput box
// @author        Robert Lemon
// @version       0.1
// @namespace     http://rlemon.com
// @description   Produces a small input area for you to execute Javascript on the page. Saves scripts in LocalStorage and executes on page load.
// @include       *
// ==/UserScript==
(function () {
  function init() {
    var form = document.createElement('form'),
      input = document.createElement('textarea'),
      btn = document.createElement('button'),
      purge = document.createElement('button'),
      chk = document.createElement('input'),
      lbl = document.createElement('label');
    if('localStorage' in window) {
      for(var key in window.localStorage) {
        if(key.substr(0, 4) === 'rls_') {
          run_script(window.localStorage.getItem(key));
        }
      }
    }
    form.name = 'rlInputFrm';
    input.name = 'rlInputInput';
    chk.name = 'rlInputCheck';
    btn.textContent = 'Run';
    purge.textContent = 'Purge Scripts';
    chk.type = 'checkbox';
    apply_styles(form, {
      position: 'fixed',
      zIndex: '9999999',
      display: 'none',
      width: '100%',
      top: '0px',
      left: '0px',
      padding: '12px 22px',
      backgroundColor: '#fff',
      boxSizing: 'border-box',
      borderBottom: '1px solid #000'
    });
    apply_styles(input, {
      width: '100%',
      height: '64px'
    });
    apply_styles(lbl, {
      float: 'right',
      marginTop: '2px'
    });
    apply_styles([btn, purge], {
      borderRadius: '0',
      border: '1px solid #000',
      backgroundColor: 'white'
    });
    form.appendChild(input);
    form.appendChild(btn);
    form.appendChild(purge);
    lbl.appendChild(chk);
    lbl.appendChild(document.createTextNode(' Save in localStorage'));
    form.appendChild(lbl);
    document.body.appendChild(form);
    form.addEventListener('submit', submit_handler, false);
    purge.addEventListener('click', purge_scripts, false);
    document.addEventListener('keyup', check_key_handler, false);
  }

  function purge_scripts(e) {
    if('localStorage' in window && confirm('You are about to purge all saved scripts.\nAre you sure you want to complete this action?')) {
      for(var key in window.localStorage) {
        if(key.substr(0, 4) === 'rls_') {
          window.localStorage.removeItem(key);
        }
      }
    }
    e.preventDefault();
    return false;
  }

  function apply_styles(elements, map) {
    if(!Array.isArray(elements)) {
      elements = [elements];
    }
    elements.forEach(function (element) {
      for(var key in map) {
        element.style[key] = map[key];
      }
    });
  }

  function submit_handler(e) {
    var el = this.elements.rlInputInput,
      chk = this.elements.rlInputCheck,
      script = el.value;
    if(chk.checked && 'localStorage' in window) {
      window.localStorage.setItem('rls_' + new Date().getTime(), script);
    }
    run_script(script);
    el.value = '';
    chk.checked = false;
    e && (e.preventDefault());
    return false;
  }

  function run_script(str) {
    try {
      eval(str);
    } catch(ex) {
      console.log(ex.stack);
    }
  }

  function check_key_handler(e) {
    if(e.ctrlKey && e.which == 77) {
      var frm = document.forms.rlInputFrm;
      if(frm.style.display !== 'none') {
        fade_out(frm);
      } else {
        fade_in(frm);
      }
    }
  }

  function fade_in(e) {
    if(e.style.display !== 'block') {
      e.style.display = 'block';
      e.style.opacity = 0;
    }
    if(parseFloat(e.style.opacity) < 1) {
      e.style.opacity = parseFloat(e.style.opacity) + 0.05;
      setTimeout(function () {
        fade_in(e);
      }, 16);
    }
  }

  function fade_out(e) {
    if(parseFloat(e.style.opacity) >= 0.05) {
      e.style.opacity = parseFloat(e.style.opacity) - 0.05;
      setTimeout(function () {
        fade_out(e);
      }, 16);
    } else {
      e.style.opacity = 0;
      e.style.display = 'none';
    }
  }
  init();
}());