Как добавить правый клик Inspect Element в электронное приложение?(Так же, как в Google Chrome)

Question

Я пытаюсь включить правый клик элемента Inspect в свое электронное приложение, я нашел предыдущую статью об этом, но мне уже 4 года, и я не знаю, где это включить.Мне уже удалось заставить devtools открываться автоматически, но теперь я хочу добавить элемент проверки правой кнопкой мыши.У меня вопрос.

Как и где я могу добавить элемент inspect как щелчок правой кнопкой мыши, чтобы работать глобально во всем приложении, и как мне открыть dev-tools с помощью ярлыка.в настоящее время я автоматически открываю Devtools в скрипте main.js, но когда я щелкаю его, у меня не получается вернуть его.Заранее спасибо за помощь.

Answer 1

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

const { remote, webFrame } = require ('electron');
const { getCurrentWebContents, Menu, MenuItem } = remote;
//
let rightClickPosition;
//
const contextMenu = new Menu ();
const menuItem = new MenuItem
(
    {
        label: 'Inspect Element',
        click: () =>
        {
            let factor = webFrame.getZoomFactor ();
            let x = Math.round (rightClickPosition.x * factor);
            let y = Math.round (rightClickPosition.y * factor);
            getCurrentWebContents ().inspectElement (x, y);
        }
    }
);
contextMenu.append (menuItem);
//
window.addEventListener
(
    'contextmenu',
    (event) =>
    {
        event.preventDefault ();
        rightClickPosition = { x: event.x, y: event.y };
        contextMenu.popup ();
    },
    false
);

Ссылки:

• webFrame.getZoomFactor ()
• contents.inspectElement (x, y)
• menu.popup (опция)

Что касается того, как открыть devTools с помощью ярлыка, это произойдет автоматически, если ваша строка меню содержит подменю с пунктом меню, чей role равен toggledevtools. Например, в коде основного процесса добавление этого в шаблон меню обеспечит элемент меню Toggle Developer Tools со стандартным сочетанием клавиш:

{
    label: "Developer",
    submenu:
    [
        { role: 'reload' },
        { role: 'toggledevtools' }
    ]
}

Ссылка: Пункт меню Роли

UPDATE

Похоже, существует более мощный и гибкий способ обработки контекстного меню на уровне webContents путем прослушивания события 'context-menu', документированного начиная с Electron 1.0.2.

Одна важная особенность заключается в том, что коэффициент масштабирования больше не нужно принимать во внимание, координаты x и y, возвращаемые в params, всегда всегда правильны.

Ссылка: Событие webContents: 'context-menu'

Вот некоторый альтернативный код процесса рендеринга , использующий этот метод:

const { getCurrentWebContents, Menu, MenuItem } = require ('electron').remote;
//
let webContents = getCurrentWebContents ();
//
let rightClickPosition;
//
const contextMenu = new Menu ();
const menuItem = new MenuItem
(
    {
        label: 'Inspect Element',
        click: () =>
        {
            webContents.inspectElement (rightClickPosition.x, rightClickPosition.y);
        }
    }
);
contextMenu.append (menuItem);
//
webContents.on
(
    'context-menu',
    (event, params) =>
    {
        rightClickPosition = { x: params.x, y: params.y };
        contextMenu.popup ();
    }
);