electron 有没有办法使用检查元素来选择一个元素在电子？

xtfmy6hx 于 2022-12-16 发布在 Electron

关注(0)|答案(3)|浏览(226)

我希望利用 chrome 的开发工具中的“选择页面中的元素来检查它”Ctrl + Shift + C实用程序，以便允许用户选择电子应用程序上的元素。
例如，应该加载一个页面或文件。然后，在调用一个函数时，用户应该能够选择一个元素，就像他们打开了开发工具并按下了检查元素按钮一样。单击一个元素来检查它应该会导致一个函数被检查的元素调用。而不打开开发工具。其目的是，这是一种内置的方式来选择页面上的元素，而不需要重写代码，以允许这种风格的点，突出显示，并单击选择系统。
预期用途如下

const {app, BrowserWindow} = require('electron');

app.on('ready', function() {
    let window = new BrowserWindow();
    window.loadURL('https://stackoverflow.com/');

    // This should trigger the inspect element tool
    window.getElementFromInspector(function(element) {
        // This should be called after an element is selected with the inspect element tool
    });
});

我们并不期望窗口必须包含.getElementFromInspector(callback: function)方法。但是，解决方案应该在功能上类似于建议的用法。（即使它需要将外部JavaScript加载到页面中，只要可能，我们就尽量避免它）
在Electon的API文档中做了一些研究，发现了contents.inspectElement(x, y)方法。这听起来好像允许从页面上的x，y位置选择元素进行检查，但没有提到远程访问现在检查的元素。我还可以想象这会导致打开开发人员工具，如果还没有打开的话，这是希望可以避免的。

**EDIT：**从我所看到的，我不相信在不打开开发人员工具的情况下使用inspect元素选择器是可能的。因此，需要打开开发人员工具的答案将被接受，但最好不需要打开开发人员工具。

electron

来源：https://stackoverflow.com/questions/62055385/is-there-a-way-to-use-inspect-element-to-select-an-element-in-electron

3条答案

按热度按时间

raogr8fs1#

**好消息！**这里有一个非常干净的解决方案。我完全理解你所面临的特殊问题。
安装电子上下文菜单

如果您使用的是Npm（learn more about NPM here）

npm install electron-context-menu

否则使用Yarn(learn more about Yarn here)

yarn add electron-context-menu

第1步：了解上下文菜单的工作原理

// ./main.js
const {app, BrowserWindow} = require('electron');
const contextMenu = require('electron-context-menu');

// Add an item to the context menu that appears only when you click on an image
contextMenu({
    prepend: (params, browserWindow) => [{
        label: 'Rainbow',
        // Only show it when right-clicking images
        visible: params.mediaType === 'image'
    }]
});

// Your code that starts a new application
let win;
(async () => {
    await app.whenReady();
    win = new BrowserWindow();
})();

步骤2：使用自定义行为向上下文菜单添加项目

const contextMenu = require('electron-context-menu');

contextMenu({
    prepend: (params, browserWindow) => [
        {
            label: 'Destroy Atomic Bombs',
            click: (menuItem, browserWindow, event) => {
                // Note that the alert function is only avaialble in the renderer process
                //alert("You destroyed all the atomic bombs in the world, thanks :3")

                // If executed from the main process, the console log function will appear in the terminal, not in the developer tools
                console.log("You destroyed all the atomic bombs in the world, thanks :3")
            }
        }
    ]
});

详细了解此方法-Way 1 Github repo of electron-context-menu
我希望，它会对你有帮助：）快乐编码。

赞(0）回复(0）举报 2022-12-16

gojuced72#

这与inspect element实用程序一样完成了inspect on hover，但是不会突出显示元素，还需要显示开发人员工具才能工作。

// main.js
const electron = require('electron');
const path = require('path');

electron.app.on('ready', function() {
  let window = new electron.BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'inspector.js')
    }
  });

  window.webContents.openDevTools();

  electron.ipcMain.addListener('mouse', function(event, e) {
    event.returnValue = null;
    window.webContents.inspectElement(e.x, e.y);
  });

  window.loadURL('https://stackoverflow.com/');
});

// inspector.js
window.onload = function() {
  let {ipcRenderer} = require('electron');

  document.onmousemove = e => ipcRenderer.sendSync('mouse', { x: e.clientX, y: e.clientY });
};

这并不完全是我想要的，也不是在我想要的庄园里，但这是我能够解决这个问题的最接近的方法。

赞(0）回复(0）举报 2022-12-16

piztneat3#

我找到了解决办法：（在元素上单击鼠标右键+ Shift）
main.js:

ipcMain.on('InspectMeAtPos', (ev, cursorPos) => { 
    let senderWd = BrowserWindow.fromWebContents(ev.sender)
    console.log('InspectMeAtPos : ', cursorPos)
    senderWd.webContents.inspectElement(cursorPos.x, cursorPos.y)
})

preload.js:

addEventListener('contextmenu', (ev) => {
  ev.shiftKey ? ipc.send('InspectMeAtPos', { x: ev.x, y: ev.y }) : null
})

这是我第一次在这里回答问题，我需要写更多，但我的英语不好：（（

赞(0）回复(0）举报 2022-12-16

我来回答

electron 有没有办法使用检查元素来选择一个元素在电子？

3条答案

相关问题

热门标签

最新问答