Creando assets para una nueva ventana

Para los que son Windows, no se olviden de activar la integración de Node con la nueva interfaz que estamos creando en el Render.

Intente muchas cosas para obtener la ventana actual con remote, pero no fue posible pero hay una forma mucho mas sencilla
preferences-frontend.js

window.addEventListener('load', () => {
    cancelButton()
})

function cancelButton() {
    const cancelButton = document.getElementById('cancel-button')
    
    cancelButton.addEventListener('click', () => {
        window.close()
    })
}

En versiones superioeres a la 12 no se recomienda usar los objetos globales. Puedes dejar la ventana win de index.js sin modificar. En ipcRenderEvent.js tu código será el siguiente: ```js // Ventana de configuraciones function openPreferences() { console.log("openPreferences"); const {BrowserWindow, getGlobal, require} = window.require("@electron/remote"); //const remoteMain = require("@electron/remote/main"); const preferencesWindow = new BrowserWindow({ width: 400, height: 300, title: "Preferencias", center: true, modal: true, frame: false, show: false, webPreferences: { devTools: true } }); // Abrir DevTools automáticamente preferencesWindow.webContents.openDevTools({ mode: 'detach' }) // Hacemos que sea una ventana hija de la ventana principal // Ya no es necesario hacerlo //remoteMain.enable(preferencesWindow.webContents); preferencesWindow.once('ready-to-show', () => { preferencesWindow.show(); preferencesWindow.focus(); }) preferencesWindow.loadURL(`file://${path.join(__dirname, '../prefs-window/preferences.html')}`); } ```Y la función ligada a cerrar sera la siquiente: Preference-frontend.js ```js window.addEventListener('load', () => { console.log("Ventana preference") cancelButton() }) function cancelButton() { const cancelButton = document.getElementById('cancel-button') cancelButton.addEventListener('click', () => { console.log("CANCELAR") window.close() }) } ```No requieres más configuraciones que sean necesarias. Si necesitas usar esta linea ya esta activa para windows y linux ```js remoteMain.enable(preferencesWindow.webContents); ```

Por si trabajaron con React, como es mi caso, pueden ahorrarse todo este proceso usando rutas (y el react-router-dom de toda la vida). Simplemente creen la ventana de la siguiente forma (a tener en cuenta: Electron v22.0.0):

const settings = new BrowserWindow({
    width: 900,
    height: 670,
    show: false,
    autoHideMenuBar: true,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
        preload: join(__dirname, '../preload/index.js'),
        sandbox: false,
        nodeIntegration: true,
    },
    title: 'Plato - Settings',
})

// La ruta que se va a cargar en la ventana, en este caso
// "/settings"
settings.loadURL(`file://${__dirname}/index.html#/settings`)

settings.on('ready-to-show', () => {
    // En caso de que prefieran la ventana maximizada
    // settings.maximize()
    settings.show()
})