Accessing webview DOM with Electron

Question

I'm trying to access the DOM inside the webview. I understand I need to use IPC, but with the following code which is in the same file, one accesses the parent and one accesses the webview.

Preload.js (using preload property of webview)

setInterval(() => {
  console.log(document.querySelector('.player')); // shows in webview
}, 1000);

ipcRenderer.on('ppause', () => {
  console.log(document); // shows in main window
});

index.js

window.webContents.once('dom-ready', () => {
    globalShortcut.register('MediaPlayPause', () => {
        window.webContents.send('ppause');
    });
});

I want to be able to access the webview DOM (such as in the setInterval function), but I can't seem to figure it out.

Does this help ? https://stackoverflow.com/questions/32780726/how-to-access-dom-elements-in-electron — JeffProd, Dec 31 '18 at 18:40
Nope, I think that's what I'm doing using ipc, unless I'm just confused. — Nathan, Dec 31 '18 at 19:01
Are you using webview in the main window like an iframe ? I read it is not recommended on the official web site. I may help with a child window. I could do it. — JeffProd, Dec 31 '18 at 20:40

score 2 · Accepted Answer · answered Dec 31 '18 at 21:37

I ended up figuring it out.

I needed to send it to the webcontents, and from there send it to the webview.

preload

ipcRenderer.on('ppause', () => {
    console.log(document); // can now manipulate webview DOM
});

Browser

const webview = document.getElementById('webview');
ipcRenderer.on('ppause', () => {
    webview.send('ppause');
});

index.js

globalShortcut.register('MediaPlayPause', () => {
    window.webContents.send('ppause');
});

All that was needed needed was an additional send to webview.

Accessing webview DOM with Electron

1 Answers1