electronに手軽にDevTools Extensionを導入する

react devtoolsやredux devtoolsは非常に便利ですが、electronではchromeにインストールしたDevTools Extensionをそのまま使えません。
そして、electronはDevTools Extensionをサポートしていますが、その導入はやや複雑です。

[electron/devtools-extension.md](https://github.com/electron/electron/blob/master/docs/tutorial/devtools-extension.md)

ドキュメントにはReact Developer Toolsを例にその導入方法が書かれています。

1. ChromeにReact Developer Toolsをインストールしてください。
2. 検索バーから`chrome://extensions`に移動し、extension IDを見つけます。`fmkadmapgofadopljbjfkapdkoienihi`のようにハッシュ文字列になっています。
3. 拡張機能を格納しているChromeのファイルシステムの場所を確認します。
- Windowsは`%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions`
- Linuxは以下のいずれかです。
	* `~/.config/google-chrome/Default/Extensions/`
	* `~/.config/google-chrome-beta/Default/Extensions/`
	* `~/.config/google-chrome-canary/Default/Extensions/`
	* `~/.config/chromium/Default/Extensions/`
- macOSは`~/Library/Application Support/Google/Chrome/Default/Extensions`
4. ファイルパスを`BrowserWindow.addDevToolsExtension` APIに渡します。
React Developer Toolsは`~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0`のようになります。



となりますが、さすがに面倒です。

`electron-load-devtool`を使うと、開発環境を考慮し、簡単にDevTools Extensionを導入できます。

[akameco/electron-load-devtool: Easily load dev tool for electron](https://github.com/akameco/electron-load-devtool)

## インストール

```
$ npm install --save-dev electron-load-devtool
```

## Usage

[redux devtools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)を利用する場合です。
`loadDevtool`にextension IDを渡します。
redux devtoolsは`electron-load-devtool`がサポートしているので`REDUX_DEVTOOLS`を渡しています。

```js
const electron = require('electron');
const loadDevtool = require('electron-load-devtool');

electron.app.on('ready', () => {
    const win = new electron.BrowserWindow({width: 400, height: 400});
    win.loadURL(`file://${__dirname}/index.html`);

    loadDevtool(loadDevtool.REDUX_DEVTOOLS);

    win.openDevTools();
});
```

デフォルトで以下のDevToolsのextension IDをサポートしています。

- [`REDUX_DEVTOOLS`](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
- [`EMBER_INSPECTOR`](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
- [`REACT_DEVELOPER_TOOLS`](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ja)
- [`BACKBONE_DEBUGGER`](https://chrome.google.com/webstore/detail/backbone-debugger/bhljhndlimiafopmmhjlgfpnnchjjbhd)
- [`JQUERY_DEBUGGER`](https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi)
- [`ANGULARJS_BATARANG`](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk)
- [`VUEJS_DEVTOOLS`](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)


## 8/24追記

すでに対象のDevTools Extensionがアクティブになっている場合に、読み込み処理をスキップするようにしました。
loadDevtoolに`extension ID`だけではなく、`{id: 'extension ID', name: 'extension name'}`のようなidとnameを持ったオブジェクトを渡してやると、チェックを行います。
もちろん上記のDevTools Extensionはチェック対象です。

また、[electron-debug](https://github.com/sindresorhus/electron-debug)と同様に、開発環境のみ機能を有効にするようにしました。
プロダクション環境でも有効にする場合は(あまりないと思いますが)、第二引数のオプションの`enabled`を`true`にする必要があります。


## 参考
[akameco/electron-load-devtool: Easily load dev tool for electron](https://github.com/akameco/electron-load-devtool)
[electron/devtools-extension.md](https://github.com/electron/electron/blob/master/docs/tutorial/devtools-extension.md)
[sindresorhus/electron-is-dev: Check if Electron is running in development](https://github.com/sindresorhus/electron-is-dev)
[sindresorhus/electron-debug: Adds useful debug features to your Electron app](https://github.com/sindresorhus/electron-debug)