add button to website

[yehtut-indexzero]

I have browserview and load a website. This is code in vue component. export default { name: "HelloWorld", props: { msg: String, }, created() {
ipcRenderer.send("load-url","https://github.com/"); }, }; </script>

This is the code in background.js

ipcMain.on("load-url", (event, arg) => { browserview = new BrowserView(); win.addBrowserView(browserview); const contentBounds = win.getContentBounds(); browserview.setBounds({ x: 0, y: 0, width: contentBounds.width, height: contentBounds.height, }); browserview.setAutoResize({ width: true, height: true }); browserview.webContents.loadURL(arg); });`

what I want to do is to add a button on github website (example) .

Can anyone help me to give any suggestion?

[klren0312]

why not use iframe in vue page and position a button, then use browserwindow open this vue page

[yehtut-indexzero]

why not use iframe in vue page and position a button, then use browserwindow open this vue page

button is not static. There will be configuration file to handle the button position.

[klren0312]

@yehtut-indexzero Demo: https://github.com/klren0312/electronExecuteJavaScriptDemo

1. make preload.js in src

2. config the vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      preload: { preload: 'src/preload.js' },
      nodeIntegration: true // 渲染模式可以使用node
    }
  }
}

3. edit the preload.js

Easy to call ipcRenderer, use window.ipcRenderer

window.ipcRenderer = require('electron').ipcRenderer

4. createWindow

Open new window, that open the url, and add the button

async function createSecondWindow() {
  secondWin = new BrowserWindow({
    width: 300,
    height: 300,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js')
    }
  })

  secondWin.webContents.loadURL('https://www.baidu.com')
  // add the button, and add click event to ipc
  secondWin.webContents.executeJavaScript(`
      const btn = document.createElement('button')
      btn.innerText = 'test'
      btn.style.position = 'absolute'
      btn.style.top = '20%'
      btn.style.left = '20%'
      btn.style.zIndex = '999999'
      document.body.appendChild(btn)
      btn.addEventListener('click', () => {
        window.ipcRenderer.send('test', 'test')
      })
    `, true)
  secondWin.webContents.openDevTools()
}
// test
ipcMain.on('test', (e, v) => {
  console.log(v)
})

5. add ipc event to open new window

ipcMain.on('openSecondWindow', () => {
  setTimeout(() => createSecondWindow(), 400)
})

6.test the demo

[nklayman]

Sorry for the delayed response, had to take a break from open source to focus on school.

Your question doesn't seem to be specific to this plugin, just about electron. I'd suggest asking for help on a forum somewhere if the above suggestion doesn't work. Thanks for trying to help @klren0312.