Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Electron.JS + devtoolsinstaller: 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead

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'
      });
    });
  }
});
like image 396
Nyxynyx Avatar asked May 19 '20 15:05

Nyxynyx


1 Answers

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.

like image 181
Nikola Jovanovic Avatar answered Nov 20 '22 18:11

Nikola Jovanovic