override content in Electron webview

hack.js

const { ipcRenderer } = require('electron');

ipcRenderer.on('ping', () => {
  console.log(document);
  console.log(document.querySelector('input'));

  // the document references to the document of the <webview>
  document.querySelector('input').addEventListener('change', function(event) {
    event.preventDefault();
    console.log("====> test");
  });
  ipcRenderer.sendToHost('pong');
});

index.html

<webview
  id="app"
  preload="./hack.js"
  src="http://example.com">
</webview>

<script>
  require('./index.js');
</script>

index.js

'use strict';

console.log("===> starting index.js");
const fs = require('fs');

const webview = document.getElementById('app');

webview.addEventListener('ipc-message', (event) => {
  console.log(event.channel);
  // Prints "pong"
});

webview.addEventListener("dom-ready", function() {
  webview.send('ping');
});