Есть ли способ использовать элемент проверки для выбора элемента в Electron?

Question

Я хочу использовать утилиту «Выберите элемент на странице, чтобы проверить его» * ​​1001 * в инструментах разработчика Chromium, чтобы позволить пользователю выбрать элемент в приложении 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 на страницу, просто пытался избежать этого, если вообще возможно)

Поиск в документации API Electon пролил свет на метод contents.inspectElement(x, y). Это звучит так, как если бы это позволяло выбрать элемент для проверки с позиции x, y на странице, но ничего не упоминает о доступе к теперь проверяемому элементу удаленно. Я также могу представить, что это приведет к открытию инструментов разработчика, если они еще не открыты, чего, надеюсь, можно избежать.

EDIT: Из того, что я видел, я не полагаю, что будет возможно легко использовать селектор элемента inspect, не открывая инструменты разработчика. По этой причине будут приниматься ответы, требующие, чтобы инструменты разработчика были открыты, но предпочтительно, чтобы инструменты разработчика не были открытыми.

Answer 1

Хорошие новости! Вот очень чистое решение для этого. Я полностью понимаю, с какой конкретной проблемой вы столкнулись.

Установить электронное контекстное меню

Если вы используете Npm ( узнайте больше о NPM здесь )

npm install electron-context-menu

В противном случае используйте пряжу (подробнее о пряжи здесь)

  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")
            }
        }
    ]
});

детальное обучение для этого метода - Способ 1 Github репозиторий электронного контекстного меню

Надеюсь, это будет помогу :) Удачного кодирования.

Answer 2

Это выполняет проверку при наведении курсора так же, как и утилита проверки элемента, но не выделяет элемент. Для этого также требуется, чтобы инструменты разработчика работали. самое близкое, что я смог найти к решению этой проблемы.