Question

我希望利用Chromium开发人员工具中的“选择页面中的元素进行检查” Ctrl + Shift + C实用程序，以允许用户在Electron应用程序中选择元素。

例如，应加载页面或文件。然后，在调用函数时，应该向用户展示选择元素的能力，就好像他们已经打开了开发人员工具并按下了检查元素按钮一样。单击一个元素以对其进行检查应导致使用被检查的元素调用一个函数，而无需打开开发人员工具。目的是建立一种选择页面上元素的内置方式，而无需重写代码来实现这种样式的指向，突出显示和单击选择系统。

预期用途如下

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位置选择要检查的元素，但是没有提及远程访问现在已检查的元素。我还可以想象，如果尚未打开开发人员工具，就会导致这种情况的发生，这是可以避免的。

编辑：据我所知，我认为在没有打开开发人员工具的情况下使用检查元素选择器很容易。因此，将接受需要打开开发人员工具的答案，但最好不要打开开发人员工具。

Answer 1

好消息！这是一个非常干净的解决方案。我完全理解您面临的特定问题。

安装电子上下文菜单

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

npm install electron-context-menu

否则使用纱线(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();
})();

STEP2：使用自定义行为将项目添加到上下文菜单

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

我希望，它将对您有所帮助：）祝您编程愉快。

Answer 2

这将以检查元素实用程序的相同方式完成悬停检查，但不会突出显示元素。它还要求开发人员工具能够正常工作。

// 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 });
};

这并不能完全满足我的要求，也没有达到我想要的目的，但这是我能够解决此问题的最接近的方式。

有没有一种方法可以使用检查元素在Electron中选择元素？

2 个答案: