electron#BrowserWindow JavaScript Examples

ipcMain.on('alert', (event, message) => {
  dialog.showMessageBoxSync(BrowserWindow.fromWebContents(event.sender), {
    title: APP_NAME,
    message: '' + message,
    buttons: [
      getTranslation('prompt.ok')
    ],
    noLink: true
  });
  // set returnValue to something to reply so the renderer can resume
  event.returnValue = 1;
});

async function triggerRendererContextMenu (eventName, eventData, event) {
  if (!wcs) {
    wcs = BrowserWindow.fromWebContents(event.sender).webContents
  }
  console.log('triggerRendererContextMenu', eventName, eventData)
  return wcs.send('pop-context-menu-event', {
    eventName,
    eventData
  })
}

function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000
  })

  mainWindow.loadURL(winURL)

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

openWindow(url, options) {
        const window = new BrowserWindow({
            ...options,
            show: false
        });
        const webContents = window.webContents;

        window.on('closed', (event) => {
            const index = this.windows.indexOf(event.sender);
            console.assert(index >= 0);
            this.windows.splice(index, 1);
        });

        // Open every external link in a new window
        // https://github.com/electron/electron/blob/master/docs/api/web-contents.md
        webContents.on('new-window', (event, url) => {
            event.preventDefault();
            shell.openExternal(url);
        });

        webContents.once('dom-ready', () => {
            window.show();
        });

        // Call `ses.setProxy` to ignore proxy settings
        // http://electron.atom.io/docs/latest/api/session/#sessetproxyconfig-callback
        const ses = webContents.session;
        ses.setProxy({ proxyRules: 'direct://' }, () => {
            window.loadURL(url);
        });

        this.windows.push(window);

        // Disable AutoUpdater until an update server is available
        //new AutoUpdater(window);

        return window;
    }

ipcMain.handle('show-save-dialog', async (event, options) => {
  const result = await dialog.showSaveDialog(BrowserWindow.fromWebContents(event.sender), {
    filters: options.filters,
    defaultPath: pathUtil.join(getLastAccessedDirectory(), options.suggestedName)
  });
  if (!result.canceled) {
    const {filePath} = result;
    setLastAccessedFile(filePath);
    allowedToAccessFiles.add(filePath);
  }
  return result;
});

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    minWidth: 800,
    minHeight: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }

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

createWindow = () => {
  win = new BrowserWindow({
    width: 470,
    minWidth: 450,
    height: 850,
    minHeight: 450,
    title: 'linked',
    backgroundColor: '#161616',
    webPreferences: {
      devTools: process.env.NODE_ENV === 'development',
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    const { createProtocol } = require('vue-cli-plugin-electron-builder/lib')
    createProtocol('app')
    win.loadURL('app://./index.html')
    nativeTheme.themeSource = global.storage.get('theme')
  }
  
  win.on('closed', () => { win = null })
}

export function openPages() {
    //shortcut to toggle debug window
    globalShortcut.register('Option+L', () => {
        let focusWin = BrowserWindow.getFocusedWindow()
        focusWin && focusWin.toggleDevTools()
    });

    openHomePage();

    openTrayPage();

    monitorUsb();

    setTimeout(function () {
        openDialogPage("hide");
        openSettingPage("hide");
        openFeedBackPage("hide");
    }, 3000)
}

ipcMain.on('confirm', (event, message) => {
  const result = dialog.showMessageBoxSync(BrowserWindow.fromWebContents(event.sender), {
    title: APP_NAME,
    message: '' + message,
    buttons: [
      getTranslation('prompt.ok'),
      getTranslation('prompt.cancel')
    ],
    defaultId: 0,
    cancelId: 1,
    noLink: true
  }) === 0;
  event.returnValue = result;
});

export function createPrelauncherWindow() {
  let prelauncherWindow = new BrowserWindow({
    icon: path.resolve(__dirname, "icons/icon.png"),
    autoHideMenuBar: true,
    show: false,
    width: 300,
    height: 360,
    frame: false,
    resizable: false,
    fullscreenable: false,
    useContentSize: true,
    webPreferences: {
      devTools: process.env.DEBUGGING,
      contextIsolation: true,
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD),
    },
  });

  enable(prelauncherWindow.webContents);
  prelauncherWindow.center();
  prelauncherWindow.loadURL(process.env.APP_URL + "#/prelauncher").then(() => {
    prelauncherWindow.show();
  });

  if (process.env.DEBUGGING) {
    // if on DEV or Production with debug enabled
    prelauncherWindow.webContents.openDevTools();
  } else {
    // we're on production; no access to devtools pls
    prelauncherWindow.webContents.on("devtools-opened", () => {
      prelauncherWindow.webContents.closeDevTools();
    });
  }

  return prelauncherWindow;
}

updateAvailable = async (latestVersion) => {
  const ignoredUpdate = get(IGNORE_UPDATE_KEY);
  if (ignoredUpdate !== null && ignoredUpdate === latestVersion) {
    log('not showing update message: ignored by user');
    return;
  }

  const choice = await dialog.showMessageBox(BrowserWindow.getFocusedWindow(), {
    title: APP_NAME,
    type: 'info',
    buttons: [
      getTranslation('updater.download'),
      getTranslation('updater.later')
    ],
    cancelId: 1,
    message: getTranslation('updater.message').replace('{version}', latestVersion),
    detail: getTranslation('updater.detail'),
    checkboxLabel: getTranslation('updater.ignore'),
    checkboxChecked: false
  });

  if (choice.response === 0) {
    shell.openExternal(getUpdateURL(version, latestVersion));
  } else if (choice.checkboxChecked) {
    set(IGNORE_UPDATE_KEY, latestVersion);
  }
}

function createWindow() {

  //Menu.setApplicationMenu(null)
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1100,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
    },
  })

  mainWindow.loadURL(winURL)

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

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: 'hiddenInset',
    vibrancy: 'sidebar',
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    // if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }

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

constructor(parent) {
    const confirmCloseWindow = new BrowserWindow({
      backgroundColor: '#36393F',
      frame: false,
      width: 450,
      height: 200,
      resizable: false,
      minimizable: false,
      maximizable: false,
      webPreferences: {
        nodeIntegration: true
      },
    })
    confirmCloseWindow.loadFile(path.join(__dirname, 'index.html'));
    console.log(path.join(__dirname, 'index.html'));

    confirmCloseWindow.center();

    // centralize
    const currentBounds = confirmCloseWindow.getBounds();
    const parentBounds = parent.getBounds();

    const x = (parentBounds.x + (parentBounds.width / 2)) - (currentBounds.width / 2);
    const y = (parentBounds.y + (parentBounds.height / 2)) - (currentBounds.height / 2);

    confirmCloseWindow.setPosition(x, y);
  }

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }

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

function newWindow () {
  const winURL = process.env.NODE_ENV === 'development'
    ? `http://localhost:9080`
    : `file://${__dirname}/index.html`
  let win = new BrowserWindow({width: 800, height: 600})
  win.on('closed', () => {
    win = null
  })

  // Load a remote URL
  win.loadURL(winURL)
}

constructor(dimension) {
    this.window = new BrowserWindow({
      resizable: false,
      maximizable: false,
      ...WindowManager.dimensions[dimension],
      show: false,
      titleBarStyle: 'hiddenInset',
      backgroundColor: '#00000000',
      vibrancy: 'dark',
      frame: process.platform === 'darwin',
      webPreferences: {
        nodeIntegration: true,
        webSecurity: false,
        devTools: true
      }
    })
    
    const menuBuilder = new MenuBuilder(this.window)
    menuBuilder.buildMenu()
    
    this.window.once('ready-to-show', () => {
      this.window.show()
      this.window.openDevTools()
    })
    
    this.window.once('closed', () => {
      this.window = null
      ipc.removeListener('resize', this.resize)
    })
    
    this.window.on('resize', () => this.window.webContents.send('resize'))
    this.window.on('enter-full-screen', () => this.window.webContents.send('enter-full-screen'))
    this.window.on('leave-full-screen', () => this.window.webContents.send('leave-full-screen'))
    
    ipc.on('resize', this.resize)
  }

app.whenReady().then(() => {
  // allow for a small delay for mainWindow to be created
  setTimeout(() => {
    // Install `electron-debug` with `devtron`
    electronDebug({ showDevTools: false })

    // Install vuejs devtools
    installExtension(VUEJS_DEVTOOLS)
      .then(name => {
        console.log(`Added Extension: ${name}`)
        // get main window
        const win = BrowserWindow.getFocusedWindow()
        if (win) {
          win.webContents.on('did-frame-finish-load', () => {
            win.webContents.once('devtools-opened', () => {
              win.webContents.focus()
            })
            // open electron debug
            console.log('Opening dev tools')
            win.webContents.openDevTools()
          })
        }
      })
      .catch(err => {
        console.log('An error occurred: ', err)
      })
  }, 250)
})

async function createWindow() {
  const mainWindowState = windowStateKeeper({
    defaultWidth: 1000,
    defaultHeight: 800
  });

  // Create the browser window.
  const win = new BrowserWindow({
    x: mainWindowState.x,
    y: mainWindowState.y,
    width: mainWindowState.width,
    height: mainWindowState.height,
    frame: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  });

  mainWindowState.manage(win);

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol('app');
    // Load the index.html when not in development
    win.removeMenu();
    win.loadURL('app://./index.html');
    autoUpdater.checkForUpdatesAndNotify();
  }
}

// Variant for window.confirm():
function confirm(eventRet, arg) {
    confirmResponse = null;
    var confirmWindow = new BrowserWindow({
        width: 300,
        height: 200,
        show: false,
        resizable: false,
        movable: false,
        alwaysOnTop: true,
        frame: false
    });
    const confirmHtml = '<label for="val">' + arg.message + '</label>\
<button onclick="require(\'electron\').ipcRenderer.send(\'confirm-response\', true);window.close()">Yes</button>\
<button onclick="require(\'electron\').ipcRenderer.send(\'confirm-response\', false);window.close()">No</button>\
<style>body {background:#203C64; color:#ccf; font-family:sans-serif;} button {float:right; margin-left: 10px;} label,input {margin-bottom: 10px; width: 100%; display:block;}</style>';
    confirmWindow.loadURL('data:text/html,' + confirmHtml);
    confirmWindow.show();
    confirmWindow.on('closed', function() {
        eventRet.returnValue = confirmResponse;
        confirmWindow = null;
    });
}

updateExtension = async (modPath, manifestPath, manifest, browserData) => {
  const tempPath = path.join(app.getPath('temp'), 'M3');
  await ensureDir(tempPath);
  const dl = await download(BrowserWindow.getFocusedWindow(), browserData.download, { directory: tempPath });
  const extDir = path.join(tempPath, dl.getFilename().split('.')[0]);
  await decompress(dl.savePath, extDir);
  const tempManifestPath = await findManifest(extDir);
  if (!tempManifestPath) return;
  const tempManifest = await handlers[mods.parseFile]({ filePath: tempManifestPath });
  const updatedManifest = {
    ...manifest,
    name: browserData.title,
    description: tempManifest.description,
    version: browserData.version,
    origin: 'browser',
    browserId: browserData.id
  };
  await emptyDir(modPath);
  await copy(path.dirname(tempManifestPath), modPath);
  await injectModId(modPath, updatedManifest.id);
  await writeJson(manifestPath, updatedManifest, { spaces: 2 });
  await emptyDir(tempPath);

  return { ...updatedManifest, version: updatedManifest.version, updateAvailable: null };
}

openTrayPage = () => {
    if (trayPageHandle == null) {
        console.warn("create new trayPageHandle")
        trayPageHandle = new BrowserWindow({
            height: 100,
            width: 360,
            frame: false,
            resizable: false,
            show: false,
            transparent: true,
            webPreferences: {
                nodeIntegration: true,
                backgroundThrottling: false
            }
        })

        trayPageHandle.loadURL(winURL + "#tray")

        trayPageHandle.setMaxListeners(MaxBrowserWindowLimits)

        trayPageHandle.once('ready-to-show', () => {
            windowBounds = trayPageHandle.getBounds();
            openTrayMenu();
        })

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

        trayPageHandle.on('blur', () => {
            trayPageHandle.hide();
        })
    } else {
        trayPageHandle.show()
    }
}

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1900,
    height: 1080,
    icon: 'my.ico',
    webPreferences: {
      webSecurity: false, // 解决接口跨域
      nodeIntegration: true
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
  win.setMenu(null) // 去掉默认菜单
  win.on('closed', () => {
    win = null
  })
}

async function createWindow () {
    const mainWindow = new BrowserWindow({
        width: 1314,
        height: 860,
        webPreferences: {
            contextIsolation: false, nodeIntegration: true
        },
        resizable: false
    })

    if (process.env.WEBPACK_DEV_SERVER_URL) {
        await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
        //  if (!process.env.IS_TEST)
    } else {
        createProtocol('app')
        mainWindow.loadURL('app://./index.html')
    }
    mainWindow.webContents.openDevTools()
}

createWindow = () => {
  const mainWindowState = windowState({
    defaultWidth: 1000,
    defaultHeight: 800,
  });

  // Create the browser window.
  const mainWindow = new BrowserWindow({
    x: mainWindowState.x,
    y: mainWindowState.y,
    width: mainWindowState.width,
    height: mainWindowState.height,
    // frame: false,
    // titleBarStyle: 'hidden',
    autoHideMenuBar: true,
    webPreferences: {
      contextIsolation: true,
      enableRemoteModule: false,
      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
      icon: path.resolve('./res/icon.ico'),
    },
  });

  mainWindowState.manage(mainWindow);

  // and load the index.html of the app.
  mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);

  // Open the DevTools.
  if (process.env.NODE_ENV !== 'production')
    mainWindow.webContents.openDevTools();
}

notify = (title, message) => {
    const windows = BrowserWindow.getAllWindows();
    if (windows.length === 0) {
        return;
    }

    windows[0].webContents.send('notify', title, message);
}

async function createWindow(ctx) {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    title: "follow",
    autoHideMenuBar: process.env.NODE_ENV === "production",
    titleBarStyle: "hiddenInset",
    fullscreenWindowTitle: true,
    icon: path.resolve(
      __dirname,
      process.env.QUASAR_PUBLIC_FOLDER,
      "icons-electron",
      process.platform === "win32"
        ? "icon.ico"
        : process.platform === "darwin"
        ? "icon.icns"
        : "icon.png"
    ),
    width: 960,
    height: 1080,
    useContentSize: true,
    webPreferences: {
      contextIsolation: true,
      preload: path.resolve(__dirname, process.env.QUASAR_ELECTRON_PRELOAD),
    },
  });

  ctx.mainWindow = mainWindow;

  mainWindow.loadURL(process.env.APP_URL);

  if (process.env.DEBUGGING) {
    // if on DEV or Production with debug enabled
    mainWindow.webContents.openDevTools();
  } else {
    // we're on production; no access to devtools pls
    mainWindow.webContents.on("devtools-opened", () => {
      mainWindow.webContents.closeDevTools();
    });
  }

  mainWindow.on("closed", () => {
    mainWindow = null;
  });
}

openHomePage = (show_force) => {
    if (homeWinHandle == null) {
        console.warn("create new openHomePage")
        homeWinHandle = new BrowserWindow({
            show: false,
            fullscreen: false,
            height: 600,
            minHeight: 600,
            minWidth: 800,
            width: 900,
            maxWidth: 1200,
            useContentSize: true,
            // center: true,
            frame: false,
            titleBarStyle: 'hidden',
            webPreferences: {
                experimentalFeatures: true,
                nodeIntegration: true,
            },
            // transparent: true
        })

        homeWinHandle.loadURL(winURL);

        homeWinHandle.setMaxListeners(MaxBrowserWindowLimits)

        homeWinHandle.once('ready-to-show', () => {
            _homeWinMenu();

            var loginItemSettings = app.getLoginItemSettings();
            if (loginItemSettings && typeof loginItemSettings.wasOpenedAtLogin != "undefined" && loginItemSettings.wasOpenedAtLogin == true) {
                homeWinHandle.hide();
            } else {
                if(show_force == "hide"){
                    homeWinHandle.hide();
                }else{
                    homeWinHandle.show();
                }
            }

            if (isDev()) {
                homeWinHandle.webContents.openDevTools()
            }
        })

        homeWinHandle.on('close', (event) => {
            console.error("homeWinHandle close start")
            homeWinHandle.hide();
            homeWinHandle.setSkipTaskbar(true);
            app.dock.hide()
            event.preventDefault();
        });


        homeWinHandle.on('closed', (event) => {
            console.error("homeWinHandle closed")
        });
    } else {
        homeWinHandle.show();
        homeWinHandle.setSkipTaskbar(false);
        app.dock.show()
    }
}

createWindow() {
    this.browserWindow = new BrowserWindow({
      webPreferences: { nodeIntegration: true },
      //titleBarStyle: 'hidden',
      height: 800, // This is adjusted later with window.setSize
      resizable: false,
      width: 500,
      minWidth: 320,
      minHeight: 320,
      y: 100,
      // Set the default background color of the window to match the CSS
      // background color of the page, this prevents any white flickering
      backgroundColor: '#202124',
      // Don't show the window until it's ready, this prevents any white flickering
      show: false,
    });
    if (this.isDevelopment) {
      this.browserWindow.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
      this.browserWindow.resizable = true;
    } else {
      this.browserWindow.loadFile(path.join(__dirname, 'index.html'));
    }

    // Handle window logic properly on macOS:
    // 1. App should not terminate if window has been closed
    // 2. Click on icon in dock should re-open the window
    // 3. ⌘+Q should close the window and quit the app
    this.browserWindow.on('close', (e) => {
      if (!this.forceQuit) {
        e.preventDefault();
        this.browserWindow.hide();
      }
    });

    this.app.on('activate', () => {
      this.browserWindow.show();
    });

    this.app.on('before-quit', () => {
      this.forceQuit = true;
    });

    if (this.isDevelopment) {
      // auto-open dev tools
      //this.browserWindow.webContents.openDevTools();

      // add inspect element on right click menu
      this.browserWindow.webContents.on('context-menu', (e, props) => {
        const that = this;
        Menu.buildFromTemplate([
          {
            label: 'Inspect element',
            click() {
              that.browserWindow.inspectElement(props.x, props.y);
            },
          },
        ]).popup(this.browserWindow);
      });
    }
  }