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

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

好消息! 这是一个非常干净的解决方案。我完全理解您面临的特定问题。
安装 Electron 上下文菜单
如果您使用的是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
希望对您有所帮助:)祝您编程愉快。