7

I'm trying to figure out how to exchange messages between the main process and the BrowserView.

I've been using the ipc between the main process and the renderer process within a "simple" react renderer page.

But now, using the same technique, I do not see the received message in the console of the BrowserView, which, as far as I understand, seems to behave differently from a "normal" react renderer page. And this SOF post seems confirm my hypothesis: Electron BrowserView Renderer process vs WebView

In preload I defined:

declare global {
    interface Window {
        api: {
            electronIpcSend: (channel: string, ...arg: any) => void;
            electronIpcOn: (channel: string, listener: (event: any, ...arg: any) => void) => void;
        }
    }
}

In main I have :

function createWindowTypeC (url_string: string) {
    WindowTypeC = new BrowserWindow({
    
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            nodeIntegrationInWorker: false,
            sandbox: true,
            nodeIntegrationInSubFrames: false,
            webSecurity: true,
            webviewTag: false,
            preload: path.join(__dirname, "./preload/preload.js"), /* eng-disable PRELOAD_JS_CHECK */
        }
    })
    
    // and load the index.html of the app.
    
    // Emitted when the window is closed.
    WindowTypeC.on('closed', () => {
        WindowTypeC.removeBrowserView(view_C)
        WindowTypeC = null
    })
    
    enforceInheritance(WindowTypeC.webContents)
    
    // https://www.electronjs.org/docs/latest/api/browser-view
    
    let view_C = new BrowserView()
    
    
    view_C.webContents.once('did-finish-load', () => {
        contents.focus()

        view_C.webContents.send('ping', 'whoooooooooh!')
    })
    
    view_C.setAutoResize({
        width: true,
        height: true,
        horizontal: true,
        vertical: true
    })
    
    WindowTypeC.setBrowserView(view_C)
    view_C.setBounds({ x: 0, y: 0, width: 800, height: 600 })
    view_C.setBackgroundColor("#1e1e1e")
    
    setTimeout(() => {
        view_C.webContents.loadURL(url_string)
    }, 200)
    
    view_C.webContents.openDevTools({
        mode: 'left'
    })
}

While in the App_C.tsx I have:

import * as React from 'react';
    
function App_C(props) {
    
    window.api.electronIpcOn('ping', (event, message) => {
        console.log("App_C-window.api.electronIpcOn-ping-message: ", message)
     })

     window.api.electronIpcSend('pong', "Hello from App_C.tsx")

     return (
         <div id="outer-container" className='outer-container'>
             <h1>App_C</h1> 
         </div>
     );
}
    
export default App_C;

Executing the code, the page gets correctly rendered, but I do not see any message sent from the BrowserView to the renderer process.

Second, collateral, question, is: how to send a message on the way back, in the BrowserView sent by the renderer process?

And third question: how to interact with the page rendered by the BrowserView?

enter image description here

midnight-coding
  • 2,857
  • 2
  • 17
  • 27
Raphael10
  • 2,508
  • 7
  • 22
  • 50

0 Answers0