After updating my Electron app from Electron 8.2.5 to 9.0.0, the following errors start to appear in the terminal:

[1] (electron) 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead.
[1] Added Extension:  [object Object]
[1] (electron) 'BrowserWindow.getDevToolsExtensions' is deprecated and will be removed. Please use 'session.getAllExtensions' instead.
[1] Added Extension:  [object Object]

My electron app uses electron-devtools-installer to install React Developer Tools and Redux DevTools after the Electron app has loaded.

How can we make use of session.loadExtension and session.getAllExtensions to install devtools properly in Electron 9?

const electron = require("electron");
const app = electron.app;
const path = require("path");
const isDev = require("electron-is-dev");
let mainWindow;
const BrowserWindow = electron.BrowserWindow;

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

  const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
  for (const extension of extensions) {
    try {
      const name = await installExtension(extension);
      console.log(`Added Extension:  ${name}`);
    } catch (e) {
      console.log('An error occurred: ', err);
    }
  }
}

...

app.on("ready", async () => {
  createWindow();

  if (isDev) {
    await installExtensions();
    mainWindow.webContents.on("did-frame-finish-load", () => {
      mainWindow.webContents.once("devtools-opened", () => {
        mainWindow.focus();
      });
      mainWindow.webContents.openDevTools({
        mode: 'undocked'
      });
    });
  }
});

After updating my Electron app from Electron 8.2.5 to 9.0.0, the following errors start to appear in the terminal:

[1] (electron) 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead.
[1] Added Extension:  [object Object]
[1] (electron) 'BrowserWindow.getDevToolsExtensions' is deprecated and will be removed. Please use 'session.getAllExtensions' instead.
[1] Added Extension:  [object Object]

My electron app uses electron-devtools-installer to install React Developer Tools and Redux DevTools after the Electron app has loaded.

How can we make use of session.loadExtension and session.getAllExtensions to install devtools properly in Electron 9?

const electron = require("electron");
const app = electron.app;
const path = require("path");
const isDev = require("electron-is-dev");
let mainWindow;
const BrowserWindow = electron.BrowserWindow;

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

  const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
  for (const extension of extensions) {
    try {
      const name = await installExtension(extension);
      console.log(`Added Extension:  ${name}`);
    } catch (e) {
      console.log('An error occurred: ', err);
    }
  }
}

...

app.on("ready", async () => {
  createWindow();

  if (isDev) {
    await installExtensions();
    mainWindow.webContents.on("did-frame-finish-load", () => {
      mainWindow.webContents.once("devtools-opened", () => {
        mainWindow.focus();
      });
      mainWindow.webContents.openDevTools({
        mode: 'undocked'
      });
    });
  }
});

• javascript
• node.js
• reactjs
• electron
• google-chrome-devtools

1 Answer 1

Regarding the log error:

[1] Added Extension:  [object Object]

I ran into the same problem. installExtension actually returns the extension object and you can get the extension name with:

const installedExt = await installExtension(extension);
console.log(`Added Extension:  ${installedExt.name}`);

Regarding the deprecation warning:

[1] (electron) 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead.

The package electron-devtools-installer should be updated to support the new way of registering the devtools as explained in: Electron API docs for devtools extension

Example:

const { app, BrowserWindow, session } = require('electron')
const mainWindow = new BrowserWindow({...})

const ext = await session.defaultSession.loadExtension('/path/to/unpacked/chrome-ext')

I will try to make a PR for this package to fix the deprecation warning.

Please let me know if this helps.