How to use electron-devtools-installer?

What I have

When it comes to installation and configuration the official documentation states the following:

All you have to do now is

import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';

installExtension(REACT_DEVELOPER_TOOLS)
.then((name) => console.log(`Added Extension:  ${name}`))
.catch((err) => console.log('An error occurred: ', err));

That is a bit concise.

Questions

• Where should I place this code?
• How should I initialize it?
• How can I add multiple extensions?

tl;dr

Place it in the file where you include Electron (main.ts) and run it in the whenReady function:

import { installExtension, REACT_DEVELOPER_TOOLS, MOBX_DEVTOOLS } from 'electron-devtools-installer';

app.whenReady().then(() => {
  installExtension([REACT_DEVELOPER_TOOLS, MOBX_DEVTOOLS])
    .then(([react, mobx]) => {
      console.log(`Added Extensions:  ${react.name}, ${mobx.name}`);
    })
    .catch((err) => console.log('An error occurred: ', err));
  createWindow();
});

With legacy Electron, listen to the ready event:

const { app } = require('electron');
app.on('ready', functionWithTheCodeFromDocs);

In the past, you only had to do this once. The extensions were persisted after this code had been run, but this is no longer true. See below.

Keep in mind that sometimes Electron doesn't show the extensions after the app starts. Try closing and reopening the DevTools or hard refreshing with Ctrl + Shift + R.

In depth explanation

Install the package

Install the package just like the docs instruct you. In case of npm:

npm install electron-devtools-installer --save-dev

Require the package

You may require the package and configure it in the file where you build up your Electron app. You need to include the installer function and the (possibly multiple) needed extension(s):

With ES6 modules:

import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer';

With require:

const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require('electron-devtools-installer');

Configuration and usage

I will presume that somewhere you required Electron:

const { app } = require('electron');

The installExtension function have to be called in the whenReady function or after the ready event was emitted by the application with older Electron. If you want to add multiple extensions just pass an array like in the example at the top, but with older versions you had to call the function multiple times with the different extensions by copy-paste:

app.on('ready', () => {
    installExtension(REACT_DEVELOPER_TOOLS)
        .then((name) => console.log(`Added Extension: ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
});
app.on('ready', () => {
    installExtension(REDUX_DEVTOOLS)
        .then((name) => console.log(`Added Extension: ${name}`))
        .catch((err) => console.log('An error occurred: ', err));
});

Or you could write a loop:

 app.on('ready', () => {
    [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS].forEach(extension => {
      installExtension(extension)
          .then((name) => console.log(`Added Extension: ${name}`))
          .catch((err) => console.log('An error occurred: ', err));
    });
});

If you have done everything properly, after you run electron . in your project's folder, you should see this in the console:

Added Extension: React Developer Tools
Added Extension: Redux DevTools

In the past, you had to do this only once since Electron's BrowserWindow.addDevToolsExtension documentation stated:

The extension will be remembered so you only need to call this API once, this API is not for programming use. If you try to add an extension that has already been loaded, this method will not return and instead log a warning to the console.

But nowadays the opposite is true, as the Chrome Extension Support documentation states:

Loaded extensions will not be automatically remembered across exits; if you do not call loadExtension when the app runs, the extension will not be loaded.

Note that loading extensions is only supported in persistent sessions. Attempting to load an extension into an in-memory session will throw an error.