Chapter 05

開発用拡張機能の読み込み (DevTools Extension, session)

Kei Touge
Kei Touge
2022.01.12に更新

https://www.electronjs.org/ja/docs/latest/tutorial/devtools-extension

https://www.electronjs.org/ja/docs/latest/api/session

DevTools extension を読み込む

メインプロセス

main.js
const { app, session } = require('electron');
const os = require('os');
const path = require('path');

const isDarwin = process.platform === 'darwin';
const isWin32 = process.platform === 'win32';

const reactDevtools =
  // バージョン番号は適宜読み換えてください
  '/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.13.5_0';

const extDir = isDarwin
  ? '/Library/Application Support/Google/Chrome'
  : isWin32
  ? '/AppData/Local/Google/Chrome/User Data'
  : '/.config/google-chrome';

app.whenReady().then(async () => {
  await session.defaultSession.loadExtension(
    path.join(os.homedir(), extDir, reactDevtools),
    { allowFileAccess: true }
  );

  createWindow();
});

各種デベロッパーツール用拙作ライブラリ

React Developer Tools 以外の拡張機能やそのバージョンアップなどに柔軟に対応するには、以下の拙作ライブラリを試してみていただきたい。

https://www.npmjs.com/package/electron-search-devtools