Chapter 05無料公開

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

Kei Touge

2021.09.18に更新

このチャプターの目次

DevTools extension を読み込む
1. メインプロセス

DevTools extension を読み込む

ここでは例として React Developer Tools を取り上げます。

メインプロセス

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();
});

BrowserWindow.loadURL() の代わりに BrowserWindow.loadFile() を利用する場合は、オプション { allowFileAccess: true } の指定が必要です。