ElectronでIPC(ContextBridge)を使って右クリックメニューを実装する方法

2021/10/31 2021/11/1 Electron, HTML/CSS/JavaScript/TypeScript, Tips, VSCode, プログラミング

この記事は公開から3年以上経過しています。

LinuxのVSCodeで発生している難解なGitHub Issueの原因調査ついでに、ElectronでIPC(ContextBridge)を使ったコンテキストメニュー表示サンプルを作成したので紹介します。
前回のエントリ「VSCodeとJavaScriptでElectron入門」のソースをベースに手を入れていますが、手早く確認したい場合はElectron Fiddleに、この記事で紹介するソースコードのGitHub GistのURLを入力すればすぐに動作確認が可能です。

IPCを利用すると意図しないXSSが発生する危険性があります。ご利用にあたっては公式ドキュメントをしっかりとご確認ください。

サンプルソースコード

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Electron Context Menu Sample</title>
  </head>
  <body>
    <script>
      // コンテキストメニューイベント
      window.addEventListener('contextmenu', (e) => {
        e.preventDefault();
        // IPCでコンテキストメニューの表示を指示
        window.api.showContextMenu();
      });
    </script>
  </body>
</html>

main.js

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

// メニュー項目(ダミー)
const menu = Menu.buildFromTemplate([{ label: 'Menu Item 1' }, { label: 'Menu Item 2' }]);

app.on('ready', () => {
  const wnd = new BrowserWindow({
    width: 400,
    height: 350,
    webPreferences: {
      preload: __dirname + '/preload.js',
    },
  });
  wnd.loadFile('index.html');
});
app.on('window-all-closed', () => app.quit());

// レンダラプロセスからのコンテキスト表示メッセージでコンテキストメニューを表示
ipcMain.handle('show-context-menu', async (e, a) => {
  menu.popup();
});

preload.js

const { contextBridge, ipcRenderer } = require('electron');

// メインワールドにコンテキストメニュー表示APIを公開
contextBridge.exposeInMainWorld('api', {
  // メインプロセスにチャネル経由でコンテキストメニュー表示メッセージを送信
  showContextMenu: async () => await ipcRenderer.invoke('show-context-menu'),
});

GitHub Gist(Electron Fiddle)

実行結果

プログラムを実行してウィンドウ内で右クリックを行うと、下図のようにコンテキストメニューを表示します。

参考ウェブサイトなど

Electron Docs
contextBridge

以上です。