Retrieve the user-inputted data from an Electron BrowserView's input field

Question

Retrieve the user-inputted data from an Electron BrowserView's input field

Consider this scenario where a BrowserWindow is set up with specific security settings, including enabling the webviewTag: true for project requirements.

let webPrefs = {
    plugins: false,
    nodeIntegration: false,
    nodeIntegrationInWorker: false,
    webviewTag: true,
    sandbox: true,
    enableRemoteModule: false,
    contextIsolation: true,
    disableBlinkFeatures: "Auxclick",
    webSecurity: true
};

let winOpts = {
    ...
    show: true,
    webPreferences: webPrefs
};

...

win = new BrowserWindow(winOpts);
const view = new BrowserView(winOpts);
win.setBrowserView(view);

...

view.webContents.loadURL("https://example.com").then(result => {
....
});

Suppose the website example.com has a <form> with various <input> fields for user input.

Users will interact by typing text into these <input> fields.

The goal is to extract the 'manually filled' text from these <input> fields without the ability to modify the webpage.

While webContents.executeJavaScript() can initiate actions, extracting the actual input values to the main process remains unclear.

(Filling out forms from the main process can be achieved using the mentioned function.)

How can we accomplish this task?

javascript npm electron chromium

Answer 1

Answer №1

When importing ipcMain from electron in your main file, make sure to do it like this:

const { ipcMain, app, BrowserWindow,BrowserView } = require("electron");

In the webPrefs, include a preload file. For example:

let webPrefs = {
    plugins: false,
    nodeIntegration: false,
    nodeIntegrationInWorker: false,
    webviewTag: true,
    sandbox: true,
    enableRemoteModule: false,
    contextIsolation: true,
    disableBlinkFeatures: "Auxclick",
    webSecurity: true,
    preload:"./preload.js"
};

Create a new preload file named "preload.js". You can name it as you wish, just ensure to set the correct filename in the preload above.

This file acts as a bridge between your webview and main process. It runs before the renderer process is loaded and has access to both renderer globals (e.g. window and document) and a Node.js environment.

Add the following code to your preload.js file:

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

window.addEventListener("input", (e) => {
  //dom_element_id = the id of input element you want
  if (e.target.id === "dom_element_id")
    ipcRenderer.invoke("INPUT_OCCURED", e.target.value);
});

Now, in your main file, for instance, you can add:

  win.loadURL("https://www.example.com");

  ipcMain.handle("INPUT_OCCURRED", (event, data) => {
    console.log(data);
  });

That's all the code you need. Here's a further explanation:
The preload file loads before the webview content and can execute any tasks. It also has access to Node features. We utilize IPC to communicate between the preload script and the main process. By adding a global listener in the preload file that listens to all input events, we check if the ID matches the specified element. If so, the value of the DOM element is sent to the main process. The main process handles the event data received on the INPUT_OCCURRED channel.

The reason for using a global listener instead of attaching one directly to the element is for simplicity in this example scenario.

Answer 2

When importing ipcMain from electron in your main file, make sure to do it like this:

const { ipcMain, app, BrowserWindow,BrowserView } = require("electron");

In the webPrefs, include a preload file. For example:

let webPrefs = {
    plugins: false,
    nodeIntegration: false,
    nodeIntegrationInWorker: false,
    webviewTag: true,
    sandbox: true,
    enableRemoteModule: false,
    contextIsolation: true,
    disableBlinkFeatures: "Auxclick",
    webSecurity: true,
    preload:"./preload.js"
};

Create a new preload file named "preload.js". You can name it as you wish, just ensure to set the correct filename in the preload above.

This file acts as a bridge between your webview and main process. It runs before the renderer process is loaded and has access to both renderer globals (e.g. window and document) and a Node.js environment.

Add the following code to your preload.js file:

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

window.addEventListener("input", (e) => {
  //dom_element_id = the id of input element you want
  if (e.target.id === "dom_element_id")
    ipcRenderer.invoke("INPUT_OCCURED", e.target.value);
});

Now, in your main file, for instance, you can add:

  win.loadURL("https://www.example.com");

  ipcMain.handle("INPUT_OCCURRED", (event, data) => {
    console.log(data);
  });

That's all the code you need. Here's a further explanation:
The preload file loads before the webview content and can execute any tasks. It also has access to Node features. We utilize IPC to communicate between the preload script and the main process. By adding a global listener in the preload file that listens to all input events, we check if the ID matches the specified element. If so, the value of the DOM element is sent to the main process. The main process handles the event data received on the INPUT_OCCURRED channel.

The reason for using a global listener instead of attaching one directly to the element is for simplicity in this example scenario.

Retrieve the user-inputted data from an Electron BrowserView's input field

Answer №1

Similar questions

Which element from the context menu has been selected?

Struggling to accurately convert the string into a date object

What could be the reason for the scope being empty in my AngularJS application?

What could be causing the error "Cannot read the state property of undefined" to occur in my code?

Determine the number of items in an array with JavaScript in Node

Having trouble retrieving values from my EXPRESS / NodeJs response error message: [String: 'Error: Request resulted in an error code: 404'

Issue in d3.js: bisector consistently returning zero

What could be the reason for NPM failing to work following an update?

Exploring the concept of JavaScript nested promise scopes within the context of AngularJS

Regex pattern to replace the zero preceding two times within a string based on distinct criteria

Exploring the features of React.js version 16

The texture failed to load onto the 3D object during the mapping process

Occasionally, Node.js is throwing an UnhandledPromiseRejection error, and it seems like my catch block is

The node is currently operating on a non-existent version

Personalized Svelte interface Slider tag

I have no interest in using vanilla JavaScript to search for data in the database

A guide to monitoring and managing errors in the react-admin dataProvider

Methods for transferring data from an AJAX function

Interact with AJAX form to dynamically display result data in the intended DIV

Javascript Google Maps API is not working properly when trying to load the Gmap via a Json