Examples of creating a new pop-up that expands the screen window left and right when triggering electron in the web

First, make several buttons on the web page to trigger the electron. First, determine whether it is in the environment.

// 判断当前是否是 electron 环境

const isElectron = typeof require !== 'undefined' && typeof process !== 'undefined' && process.versions.hasOwnProperty('electron');

//执行非 isElectron环境的操作，此处可有可无，配合业务拓展
 if(!isElectron )
        {
          
        }

  const urlArr = [
        `http：//你想跳转的网址`,
    ]
    
 <Button type="primary"  data-u={urlArr[0]}></Button>

In electron:

package.json：
{
  "name": "react",
  "version": "1.0.0",
  "description": "An Electron application with React",
  "main": "./out/main/index.js",
  "author": "example.com",
  "homepage": "https://www.electronjs.org",
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win --config",
    "build:mac": "npm run build && electron-builder --mac --config",
    "build:linux": "npm run build && electron-builder --linux --config"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^2.0.0",
    "@electron-toolkit/utils": "^1.0.2"
  },
  "devDependencies": {
    "@electron/notarize": "^1.2.3",
    "@vitejs/plugin-react": "^4.0.0",
    "electron": "^24.4.1",
    "electron-builder": "^23.6.0",
    "electron-vite": "^1.0.23",
    "eslint": "^8.42.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "^2.8.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite": "^4.3.9"
  }
}

main,js

const { ip } = require ('./config/ipConfig')
const { app, BrowserWindow, ipcMain ,screen} = require('electron')

function getTargetDisplay(filter) {
  return [...screen.getAllDisplays()].filter(filter)
}

const getLeftDisplay = () => {
  const primaryDisplay = screen.getPrimaryDisplay()

  return getTargetDisplay(display => display.bounds.x < primaryDisplay.bounds.x)?.[0]
}
const getRightDisplay = () => {
  const primaryDisplay = screen.getPrimaryDisplay()

  return getTargetDisplay(display => display.bounds.x > primaryDisplay.bounds.x)?.[0]
}

const context = {
  mainWindow: null,
  leftWindow: null,
  rightWindow: null
}

const createWindow = (url, options) => {

  const win = new BrowserWindow({
    width: 1280,
    height: 720,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
    ...options
  })

  win.loadURL(url)

  return win

}

function injectHook(win) {
  const code = `
    console.log('[Hook] Electron hook initialed!')
    const { ipcRenderer } = require('electron')

    document.querySelectorAll('.maps-foot-r button').forEach((el, index) => {
      const pos = index !== 1 ? 'left-window' : 'right-window'

      const u = el.dataset?.u

      if ( !u ) return

      el.addEventListener('click', e => {
        e.preventDefault();

        ipcRenderer.send(pos, u)
        console.log('Click', pos, u)
      })
      
    })
  `

  const { webContents } = win

  webContents.executeJavaScript(code)
}

function initial() {
  context.mainWindow = createWindow('http://www.baidu.com')
  // context.mainWindow = createWindow(`http://${ip}:30734/login`)

  context.mainWindow.once('ready-to-show', () => {
    // 打开控制台
    // context.mainWindow.webContents.openDevTools({ mode: 'detach' })
    
    context.mainWindow.webContents.on('did-navigate-in-page', (event, url)=>{
      if(url === `http://${ip}:30734/maps`){
        injectHook(context.mainWindow)
      }
    })
  })
  handleListener()
}

function handleListener() {
  ipcMain.on('left-window', (e, url) => {
    const { bounds } = getLeftDisplay()
    const { x, y } = bounds
    if(!context.leftWindow){
      context.leftWindow = createWindow(url, {x, y})
      context.leftWindow.show()
    }else{
      context.leftWindow.loadURL(url)
    }
    context.leftWindow.setFullScreen(true)
  })

  ipcMain.on('right-window', (e, url) => {

    const { bounds } = getRightDisplay()
    const { x, y } = bounds
    if(!context.rightWindow){
      context.rightWindow = createWindow(url, {x, y})
      context.rightWindow.show()
    }else{
      context.rightWindow.loadURL(url)
    }
    context.rightWindow.setFullScreen(true)
  })
}

app.on('ready', initial)

readme

# electron-tool

#### 介绍
electron框架 实现点击按钮分屏功能

#### 软件使用说明
--- 用于点击按钮分屏显示内容 ---

 - main.js文件里：
 - 1、index !== 1 弹到左屏；否则弹到右屏
 ```
    const pos = index !== 1 ? 'left-window' : 'right-window' 
 ```
 - 2、启动创建初始页面入口
```
    context.mainWindow = createWindow(`http://${ip}:30734/login`)
```

 - 3、需要在原项目按钮上绑定data，例如：
```
    <Button data-u="http://www.baidu.com">百度</Button>
    <Button data-u="https://react.docschina.org/">React</Button>
    <Button data-u="https://ant.design/index-cn">Antd Design</Button>
```

#### 安装教程
```
    npm i
```

#### 启动
```
    npm run start
```

#### 打包
- windows系统
```
    npm run build:win
```
- Mac系统
```
    npm run build:mac
```
- linux系统
```
    npm run build:linux
```

Divergent ideas:

ReferencePresentation Receiver API Sample

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试</title>
</head>

<body>
    <button id="start">测试PresentationRequest</button>
</body>
<script>
 const presentationRequest = new PresentationRequest(['http://v3.umijs.org/zh-CN/docs/plugin']);

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

let presentationConnection;

document.querySelector('#start').addEventListener('click', function() {
  console.log('Starting presentation request...');
  presentationRequest.start()
  .then(connection => {
    console.log('> Connected to ' + connection.url + ', id: ' + connection.id);
  })
  .catch(error => {
    console.log('> ' + error.name + ': ' + error.message);
  });
});

</script>
</html>

You can invoke a new tab page in a web page or split screen, but you may need to add a browser flag setting.

I also tried moveTo, but the compatibility seems to be broken and I passed it.