Fill Out Forms Quickly With Hotkey

FillFormsByHotkey.js

/**
 *  Fill Out Forms Quickly With Hotkey
 * 
 *  Usage:
 *    1. Modify `contentsByKey`;
 *    2. Paste these lines into website's console ( Ctrl/Cmd + Shift + I );
 *    3. Focus target element which you what to fill in page,
 *       then press hot key, content will be fill in.
 * 
 *  Author:
 *    kingcc <eof@null.net>
 */

const contentsByKey = {
  1: 'Content to fill when `1` is pressed',
  2: 'Content to fill when `2` is pressed',
}

const keys = Object.keys(contentsByKey)

function detectFrameWork(window) {

  if (window.React || document.querySelector('[data-reactroot], [data-reactid]')) {
    return 'ReactJS'
  }

  if (window.angular ||
    document.querySelector('.ng-binding, [ng-app], [data-ng-app], [ng-controller], [data-ng-controller], [ng-repeat], [data-ng-repeat]') ||
    document.querySelector('script[src*="angular.js"], script[src*="angular.min.js"]')
  ) {
    return 'AngularJS'
  }

  if (window.Backbone) return 'BackboneJS'
  if (window.Ember) return 'EmberJS'
  if (window.Vue) return 'VueJS'
  if (window.Meteor) return 'MeteorJS'
  if (window.Zepto) return 'ZeptoJS'
  if (window.jQuery) return 'jQueryJS'

}

function changeValue(input, value) {

  const frameWork = detectFrameWork(window)

  switch (frameWork) {

    case 'ReactJS':
    case 'VueJS':
    case 'AngularJS':
      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
        window.HTMLInputElement.prototype,
        'value'
      ).set
      nativeInputValueSetter.call(input, value)
      break

    default:
      input.value = value

  }

  const inputEvent = new Event('input', { bubbles: true })
  input.dispatchEvent(inputEvent)

}

document.addEventListener('keyup', (e) => {

  if (keys.includes(e.key)) {
    changeValue(e.target, contentsByKey[e.key])
  }

})