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

Adding items dynamically to a React-Bootstrap accordion component can enhance the user experience and provide a

Ways to automatically refresh HTML table in Django framework

Using an external JavaScript script may encounter difficulties when loading pages with jQuery

Ensuring continuous execution of JS EventListener

Understanding the inner workings of a Mongoose model without the need for

Header and Footer Components in ReactJS

Tips for modifying jsFiddle code to function properly in a web browser

Could someone assist me with understanding how to use the Load function in JQuery?

Alternative for Jquery: a new Hash Table solution using Prototype JS

Seeking assistance with setting up BxSlider installation

Adjusting the visible options in ngOptions causes a disruption in the selected value of the dropdown menu

How to extract the id instead of the value in ReactJs when using Material UI Autocomplete

What is the solution to the error "modal is not defined" in Vue.js?

yii CGridView refresh trigger an influx of Ajax requests

Interactive data table feature in React, transferring selected row data to a modal pop-up

The HTML button triggers a function to execute on a different webpage when clicked

"Obtaining a MEAN response after performing an HTTP GET

Ways to automatically update React.js state when localStorage changes occur

Encountering issues when implementing any ng statement

Having difficulty breaking down values from an object