[QUESTION] It is possible to use with a webview tag?

Hi!

I have a minimal app that shows a website using the webview tag in electron ( f.e. www.google.com ) in a kiosk mode view.

Could this package be used to interact with the various inputs in the pages that would be displayed?

For example, with the input of the google search engine.

I've trying with the method proposed in the README, but it doesn't work.

Code:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> -->
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
    <script>
      var jquery = $ = require('jquery');
      require('electron-virtual-keyboard/client')(window, jquery);
    </script>
    <link href="node_modules/electron-virtual-keyboard/virtual-keyboard.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div id="close-button-container">
      <button id="close-button">Menu</button>
    </div>
    <webview src="https://www.google.com" id="webview" autosize="on" style="width: 100vw; height: 100vh;" plugins></webview>
    <script>
      var keyboard = $('input').keyboard();
    </script>
  </body>
</html>

Preload.js

/**
 * The preload script runs before. It has access to web APIs
 * as well as Electron's renderer process modules and some
 * polyfilled Node.js functions.
 *
 * https://www.electronjs.org/docs/latest/tutorial/sandbox
 */
window.addEventListener("DOMContentLoaded", () => {
  onload = () => {
    const closeButton = document.getElementById("close-button");

    closeButton.addEventListener("click", () => {
      window.close();
    });
  };
});

Main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow, session, components } = require("electron");
const path = require("path");
const VirtualKeyboard = require("electron-virtual-keyboard");

let vkb;
function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    kiosk: true,
    autoHideMenuBar: true,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      webviewTag: true,
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  // Search for the url in the command line arguments
  let url = process.argv.find((arg) => arg.startsWith("http"));
  // If url is empty, set url to https://www.google.com
  if (!url) {
    url = "https://www.google.com";
  }

  // Replace the src attribute of the webview with the url
  mainWindow.webContents.on("dom-ready", () => {
    mainWindow.webContents.executeJavaScript(
      `document.getElementById('webview').src = '${url}';`
    );
  });

  // and load the index.html of the app.
  mainWindow.loadFile("index.html");

  vkb = new VirtualKeyboard(window.webContents);

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(async () => {
  await components.whenReady();
  console.log("Components status: ", components.status());

  createWindow();

  // app.on("activate", function () {
  //   // On macOS it's common to re-create a window in the app when the
  //   // dock icon is clicked and there are no other windows open.
  //   if (BrowserWindow.getAllWindows().length === 0) createWindow();
  // });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on("window-all-closed", function () {
  // Clear all session data and cache
  session.defaultSession.clearCache();
  session.defaultSession.clearStorageData();

  // Then close the app
  if (process.platform !== "darwin") app.quit();
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

DigiThinkIT / electron-virtual-keyboard

[QUESTION] It is possible to use with a webview tag? #7