如何在Electron中添加具有“检查元素”选项的右键菜单，如Chrome？

2 回答

• 48

  Electron有一个名为win.inspectElement(x, y)的内置函数 .

  通过创建带有 MenuItem 的Electron Menu ，可以将此功能作为右键单击上下文菜单中的选项包括在内 . 在客户端（aka渲染器进程）中调用以下Javascript：

  // Importing this adds a right-click menu with 'Inspect Element' option
  const remote = require('remote')
  const Menu = remote.require('menu')
  const MenuItem = remote.require('menu-item')
  
  let rightClickPosition = null
  
  const menu = new Menu()
  const menuItem = new MenuItem({
    label: 'Inspect Element',
    click: () => {
      remote.getCurrentWindow().inspectElement(rightClickPosition.x, rightClickPosition.y)
    }
  })
  menu.append(menuItem)
  
  window.addEventListener('contextmenu', (e) => {
    e.preventDefault()
    rightClickPosition = {x: e.x, y: e.y}
    menu.popup(remote.getCurrentWindow())
  }, false)
  

  回复于 2024-04-18T08:25:41+08:00
• 6

  试试这个：

  https://www.npmjs.com/package/electron-context-menu

  它添加了 inspect element ， copy 和 paste .

  回复于 2024-04-18T08:25:41+08:00