How to use electron-devtools-installer?

Question

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?

Answer 1

tl;dr

Place it in the file where you include Electron and run it after the ready event was emitted by it:

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

You only need to do this once! The extensions will persist after this code have been run.

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 after the ready event was emitted by the application. If you want to add multiple extensions you have 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 can 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

Keep in mind: You only need to run this code once. As Electron's BrowserWindow.addDevToolsExtension documentation states:

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.