User script for creating password field on ING login form - to enable LastPass support.

ing-login-helper.user.js

// ==UserScript==
// @name             ing login
// @match            https://login.ingbank.pl/*
// @version          4.0
// ==/UserScript==

/**
 * Creates a password input field for LastPass/KeePass autocomplete.
 * @author Arkadiusz Dzięgiel
 **/

(function(){

  function getShadowFields(...selectors)
  {
    let doc = document;
    for(let i in selectors) {
      const node = doc.querySelector(selectors[i]);
      if (node === null || node === undefined) { return null; }
      if (i == selectors.length - 1) {
        return node;
      }
      doc = node.shadowRoot;
    }
  }

  function getLoginField()
  {
    return getShadowFields("login-subapp", "provider-login-content", '[data-tag-name="login-form"]', '[data-tag-name="ing-form"] input[name="login"]');
  }

  function getMaskedPasswordField()
  {
    return getShadowFields("login-subapp", '[data-tag-name="login-auth"]', '[data-tag-name="ing-form"] [data-tag-name="ing-pin-input"]');
  }
  
  function buildContainer(labelText, input) {
    const container = document.createElement("div")
    const label = document.createElement("label")
    container.style = "padding: 1rem;";
    
    label.appendChild(document.createTextNode(labelText + ":"))
    label.appendChild(input)
    container.appendChild(label)
    
    return container
  }


  function addPasswordField(target)
  {
    const realFields = [...target.getElementsByClassName("form-control")].filter(el => !el.disabled);

    const input = document.createElement("input");
    input.type = "password";
    input.id = "password";
    input.style = "width: 90%; padding: 0.5em; margin: 0px 5%";

    input.addEventListener("change", function () {
      const val = this.value;
      realFields.forEach(function(el){
        const num = parseInt(el.name.substr(4));
        el.value = val.charAt(num-1);
        el.dispatchEvent(new Event('change', {bubbles: true}));
      });
    });

    document.body.prepend(input);
    return input;
  }

  function addLoginField(target)
  {
    const input = document.createElement("input");
    input.type = "text";
    input.id = "username";
    input.style = "width: 90%; padding: 0.5em; margin: 0px 5%";
    input.addEventListener("change", function () {
      target.value = this.value;
      target.dispatchEvent(new Event('change', {bubbles: true}));
    });
    return input;
  }

  let localLoginField = null;
  let localMaskedPasswordField = null;

  setInterval(function(){
    const loginField = getLoginField();
    const maskedPasswordField = getMaskedPasswordField();

    if (loginField !== null && localLoginField === null) {
      localLoginField = buildContainer("Username", addLoginField(loginField));
      document.body.prepend(localLoginField);
    }
    if (loginField === null && localLoginField !== null) {
      localLoginField.remove();
      localLoginField = null;
    }

    if (maskedPasswordField !== null && localMaskedPasswordField === null) {
      localMaskedPasswordField = buildContainer("Password", addPasswordField(maskedPasswordField));
      document.body.prepend(localMaskedPasswordField);
    }
    if (maskedPasswordField === null && localMaskedPasswordField !== null) {
      localMaskedPasswordField.remove();
      localMaskedPasswordField = null;
    }
  }, 500);

})();