Search code examples
reactjsgoogle-chrome-extensionelectronreact-devtools

How to add "React Performance DevTools" as chrome extension in electron app using package "electron-devtool-installer"


I am trying to add "react-performance-devtool" extension to electron app using electron-devtool-installer.

When i tried with one of the mentioned extension in documentation, it is working fine, but with any other extension i am getting error.

I am trying something like this:

  const installer = require("electron-devtools-installer");
  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
  const extensions = [
    "REACT_DEVELOPER_TOOLS",
    "REDUX_DEVTOOLS",
    "REACT_PERFORMANCE_DEVTOOLS"
  ];

  return Promise.all(
    extensions.map(name => installer.default(installer[name], forceDownload))
  ).catch(console.log);
};

I got the below Error:

Error: Invalid extensionReference passed in: "undefined"

Solution

  • const REACT_PERFORMANCE_DEVTOOLS = {
      id: "fcombecpigkkfcbfaeikoeegkmkjfbfm",
      electron: "^4.0.5"
    };
    
    const installExtensions = async () => {
      const installer = require("electron-devtools-installer");
      const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
      const extensions = [
        "REACT_DEVELOPER_TOOLS",
        "REDUX_DEVTOOLS",
        "REACT_PERF",
        REACT_PERFORMANCE_DEVTOOLS
      ];
    
      return Promise.all(
        extensions.map(name =>
          installer.default(installer[name] || name, forceDownload)
        )
      ).catch(console.log);
    };
    

    REACT_PERFORMANCE_DEVTOOLS passing as name works for me.