javascript - Aplicación Electron con múltiples ventanas de navegador con pestañas que se conectan a sitios https

Estoy tratando de crear mi propia versión de http://meetfranz.com/ usando Electron.

La aplicación debería permitir que múltiples URL como https://messenger.com/ y https://gmail.com/ sean visibles y tengan una interfaz con pestañas.

He intentado generar tanto Webview como BrowserWindow.

• WebView no parece poder cargar Messenger completamente (no carga el inicio de sesión)
• BrowserWindow se desprende de la ventana principal…

También intenté antes con iFrames, lo cual no funcionó.

¿Alguna idea sobre la mejor manera de lograr una interfaz de navegador mínima con pestañas que permita cookies/https?

index.html

<html>
<head>
    <style>
    webview {
        display: inline-flex; 
        width: 800px; 
        height: 600px;
    }
    </style>
</head>
<body>
    <form name="form">
        <input name="input" placeholder="https://messenger.com/" value="https://messenger.com">
        <button type="submit">submit</button>
    </form>
    <div class="tabs">
    </div>
    <div class="webviews">
    </div>
    <!--<webview src="https://messenger.com/" autosize="on" nodeintegration="on" disablewebsecurity="on" webpreferences="allowRunningInsecureContent"></webview>-->
    <script type="text/javascript">
        require('./app.js')
    </script>
</body>
</html>

main.js

const {app, BrowserWindow, BrowserView} = require('electron')

app.on('ready', createWindow)

function createWindow(){
    let win = new BrowserWindow({
        width: 1000, 
        height: 600,
        height: 600, 
        "node-integration": "iframe", // and this line
        "web-preferences": {
            "web-security": false,
            "nodeIntegration": false,
        }
    })

    win.on('closed', () => {
        win = null
    })

    win.webContents.openDevTools()

    // Load a remote URL
    //win.loadURL('https://github.com')

    // Or load a local HTML file
    win.loadURL(`file://${__dirname}/index.html`)

    /*win.webContents.session.webRequest.onHeadersReceived({}, (d, c) => {
        if(d.responseHeaders['x-frame-options'] || d.responseHeaders['X-Frame-Options']){
            delete d.responseHeaders['x-frame-options']
            delete d.responseHeaders['X-Frame-Options']
        }
        c({cancel: false, responseHeaders: d.responseHeaders})
    })*/

}

//app.commandLine.appendSwitch('disable-web-security')

app.js

const {app, BrowserWindow, BrowserView} = require('electron').remote

let tabs = document.querySelector(".tabs")
let webviews = document.querySelector(".webviews")

document.getElementsByTagName("form")[0].onsubmit = function(event){
    //createWebview(form.input.value)
    createBrowserWindow(form.input.value)
    return false;
}

function createWebview(url){

    let webview = new WebView()
    webview.setAttribute("autosize","on")
    webview.setAttribute("nodeintegration","on")
    webview.setAttribute("disablewebsecurity","on")
    webview.setAttribute("webpreferences","allowRunningInsecureContent")
    webview.src = url
    webviews.appendChild(webview)

    let tab = document.createElement("div")
    tab.textContent = url
    tab.target = webview

    tabs.appendChild(tab)

}

function createBrowserWindow(url){

    let win = new BrowserWindow({
        width: 800, 
        height: 600,
        y: 100,
        x: 100,
        webPreferences: {
            webSecurity: false,
            nodeIntegration: false
        }
    })

    win.setMenu(null)

    win.on('closed', () => {
        win = null
    })

    view = new BrowserView({
        webPreferences: {
            nodeIntegration: false
        }
    })

    win.webContents.openDevTools()

    // Load a remote URL
    win.loadURL(url)

}

Respuesta #1

<webview> claramente es la forma de hacerlo si quieres tener una sola ventana. También es mucho mejor que un <iframe>, porque está aislado de manera segura de tu aplicación y se ejecuta en un proceso separado.

Consulta la documentación: https://electron.atom.io/docs/api/webview-tag/

Si messenger.com no se carga correctamente, este debería ser el problema que deberías abordar (por ejemplo, inspeccionar los mensajes de la consola, el registro de la red). Sigue tus instintos, tu primera elección fue la correcta, ahora se trata de hacer que funcione.