そんなに使わないのでいつも流し見していたのだけど、どうしてもReact Dev ToolをElectronに入れたくなって本気出したら詰んだ。

ドキュメントはこのあたり。両方読まないとはまりがち。

最終形のjsはこんな具合

const {BrowserWindow} = electron;

const os = require('os')
const path = require('path')
const fs = require('fs')

function createWindow() {
  　:
  　:
  // react dev toolのID
  const id = "fmkadmapgofadopljbjfkapdkoienihi"

  // extensionの場所、"~/Library"だとダメだった
  const extensionDir = path.resolve(os.homedir(), "Library/Application Support/Google/Chrome/Default/Extensions/")

  // version指定
  const versions = fs.readdirSync(`${extensionDir}/${id}`).sort()
  const version = versions.pop()

  // 利用
  BrowserWindow.addDevToolsExtension(`${extensionDir}/${id}/${version}`)
}

app.on('ready', createWindow);

ポイントなど

ドキュメントには書いてることとか
- Chromeからインストールしておく必要がある。
- extensionのIDを調べておかないといけない
ハマりどころとか工夫とか
- BrowserWindow.addDevToolsExtensionはready後じゃないと使えない
- "~/Library"のような相対指定だとうまくいかないっぽかった。
- なのでos.homedir()とpath.resolveを使って解決。（直接絶対パスにしてもいい）
- versionも指定しないといけない。
- 調べてもいいけど、多分だるいだろうなーと思ったので、fs.readdirSyncを使うって楽をする。
  - sortしてpopすれば多分最新versionがとれる。はず。

ElectronでChrome Extension使えるようにするまでのハマりどころ

ポイントなど