marshallofsound/electron-devtools-installer

An easy way to ensure Chrome DevTools extensions into Electron

electron-devtools-installer's Issues

7zip-lite folder

for some reason when executing this code in electron main:

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

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

i get 'file not found' error for [directory where electron main is]/7zip-lite/7z.exe

i was able to fix this simply by copying node_modules/7zip/7zip-lite folder over there - then electorn successfully installs all 3 tools and error goes away even if i remove copied 7zip-lite folder.

im guessing, that somewhere in code u have wrong path to 7z.exe - not pointing to node_modules ...

Failed to fetch extension

I have used the proxy tool to ensure that the chrome browser install Vue.js devtools extension fine(with macos SOCKS Proxy). But there is still request timeout for the Vue.js devtools installation

let installExtension = require('electron-devtools-installer')

installExtension.default(installExtension.VUEJS_DEVTOOLS)
    .then((name) => mainWindow.webContents.openDevTools())
    .catch((err) => console.log('An error occurred: ', err))

result:

...
Failed to fetch extension, trying 0 more times
electron  An error occurred:  { Error: ETIMEDOUT
              at Timeout._onTimeout (/Users/zicjin/Work/pidan/node_modules/request/request.js:759:15)
              at tryOnTimeout (timers.js:232:11)
              at Timer.listOnTimeout (timers.js:202:5) code: 'ETIMEDOUT', connect: false }

__REACT_DEVTOOLS_GLOBAL_HOOK__ is undefined

I'm trying to use this with the react dev tools and the preact dev tool wrapper...

Preact's dev tool wrapper calls this function when it's module is added but never gets past the first if statement

function initDevTools() {
  if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
    // React DevTools are not installed
    return;
  }
  //...

I've added devtools-installer as a dependency and in my main process, I've got

import installDevTool,
       { REACT_DEVELOPER_TOOLS } from "electron-devtools-installer"

and then in my create window function I call

  //...
  installDevTool(REACT_DEVELOPER_TOOLS)
   .then((n) => {
     console.log(`Added extension ${ n }`)

     active.loadURL(url.format({
       pathname: file,
       protocol: "file:",
       slashes: true
     }))

     console.log(BrowserWindow.getDevToolsExtensions())
   })
   .catch((err) => console.warn("Error loading extension", err))

I get back

Added extension React Developer Tools
{ 'React Developer Tools': { name: 'React Developer Tools', version: '2.4.0' } }

but __REACT_DEVTOOLS_GLOBAL_HOOK__ remains undefined in the renderer process. Am I doing something wrong?

JSON.parse error

a few day ago, I got a bug in electron

finally find the problem is about IDMap.json

maybe I closed the electron when it was running in fs.writeFileSync

so the file is broken

const IDMapPath = path.resolve(getPath(), 'IDMap.json');
if (fs.existsSync(IDMapPath)) {
IDMap = JSON.parse(fs.readFileSync(IDMapPath, 'utf8'));
}

maybe you can add try catch in there? or some better solutions

Better explanation on how to use electron-devtools-installer

I had some troubles to use this module, especially because of a bad documentation.

This is unclear where to put this code:

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));

Also, I used a boilerplate so it may be good if someone could give a more accurate explanation on where to put those lines. In my case, I copied them into my main.js, right after this line of my boilerplate:

mainWindow = new BrowserWindow({
    width: 1024, height: 768, show: false
  });

Is there any specific way to initialise the devtools or does it have to be initialised right after the BrowserWindow is created?

What if users don't install Chrome

There's no ~/Library/Application\ Support/Google/Chrome/Default/Extensions like path

Can I load the extension locally, which means we pack our extension inside Electron package

Peer dependency on "electron-prebuilt" is not necessary?

Hi, I don't use npm to load my Electron binaries. This package requires that I do. But when I simply ignore the warnings everything seems to work fine.

If the dependency doesn't add anything it should probably be eliminated.

Thanks!

Question: how to configure devtools?

I want to use the "ExtensionImmutable.js Object Formatter" extension (https://chrome.google.com/webstore/detail/immutablejs-object-format/hgldghadipiblonfkkicmgcbbijnpeog).

Installing it using electron-devtools-installer works flawlessly (const IMMUTABLEJS_OBJECT_FORMATTER = { id: 'hgldghadipiblonfkkicmgcbbijnpeog', electron: '^1.2.1' };)

When I start up electron I get the message "Immutable Object Formatter: Make sure to check 'Enable custom formatters' in the DevTools settings."

So how do I adjust that setting?

React Dev Tools tab is missing

My code is as follows:

  private installExtensions = async () => {
    const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];

    if (!BrowserWindow.getDevToolsExtensions().hasOwnProperty("devtron")) {
      BrowserWindow.addDevToolsExtension(path.join(__dirname, "..", "..", "node_modules", "devtron"));
    }

    await Promise.all(
      extensions.map((extension) => installExtension(extension)
      .then((name) => debug("Added Extension: " + name))
      .catch((err) => error("An error occurred: ", err)))
    );
  }

The redux dev tools tab shows up in the Chromium dev tools, but React does not. Anyone else experiencing this?

Exclude from production build

I am currently trying to remove your library from production builds since it is not needed. I wrapped the install statements:

const installExtensions = async () => {
  if (process.env.NODE_ENV === 'development') {
    const extensions = ['REACT_DEVELOPER_TOOLS', 'REDUX_DEVTOOLS'];

    return Promise
      .all(extensions.map(name => install.default(install[name])))
      .catch(console.log);
  }
  return Promise.resolve();
};

For some odd reasons, the dependency still stays in production. Is it intended to?

Throws an error when attempting to write ID map

When using electron-devtool-installer I get the following error:

Error adding extension: { Error: ENOENT: no such file or directory, open '/Users/karl/Library/Application Support/Electron/extensions/IDMap.json'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.module.(anonymous function) [as openSync] (ELECTRON_ASAR.js:173:20)
    at Object.fs.writeFileSync (fs.js:1343:33)
    at /Users/karl/example/index.js:48788:18
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/karl/Library/Application Support/Electron/extensions/IDMap.json' }

It looks like this is thrown from https://github.com/MarshallOfSound/electron-devtools-installer/blob/master/src/index.js#L48

It seem like the extensions directory does not exist, so the write to IDMap.json fails. Do you think that electron-devtools-installer should create the directory first?

Unfortunately I don't have a repo to recreate this, I'm still new to using Electron so I'm not sure how to create a slimmed down example that shows this. I thought it was still worth raising the bug.

Reduce size of dependency tree

Let's reduce the dependency tree of consumers as much as possible. Would be good to get a raw http implementation of downloadChromeExtension.js

Cannot use React dev: multiple console errors

Node: v7.7.1
Electron: ~1.6.2

Trying to install the react extension i'm getting more than 86 errors in the console:

Uncaught TypeError: this.on is not a function
    at once (events.js:305)
    at CallbacksRegistry.apply (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:48)
    at EventEmitter.<anonymous> (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:299)
    at emitThree (events.js:116)
    at EventEmitter.emit (events.js:194)
events.js:305 Uncaught TypeError: this.on is not a function
    at once (events.js:305)
    at CallbacksRegistry.apply (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:48)
    at EventEmitter.<anonymous> (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:299)
    at emitThree (events.js:116)
    at EventEmitter.emit (events.js:194)
_stream_writable.js:241 Uncaught TypeError: Cannot read property 'ended' of undefined
    at Writable.write (_stream_writable.js:241)
    at CallbacksRegistry.apply (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:48)
    at EventEmitter.<anonymous> (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:299)
    at emitThree (events.js:116)
    at EventEmitter.emit (events.js:194)
_stream_writable.js:241 Uncaught TypeError: Cannot read property 'ended' of undefined
    at Writable.write (_stream_writable.js:241)
    at CallbacksRegistry.apply (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:48)
    at EventEmitter.<anonymous> (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:299)
    at emitThree (events.js:116)
    at EventEmitter.emit (events.js:194)
_stream_writable.js:241 Uncaught TypeError: Cannot read property 'ended' of undefined
    at Writable.write (_stream_writable.js:241)
    at CallbacksRegistry.apply (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:48)
    at EventEmitter.<anonymous> (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:299)
    at emitThree (events.js:116)
    at EventEmitter.emit (events.js:194)
_stream_writable.js:241 Uncaught TypeError: Cannot read property 'ended' of undefined
    at Writable.write (_stream_writable.js:241)
    at CallbacksRegistry.apply (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:48)
    at EventEmitter.<anonymous> (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:299)
    at emitThree (events.js:116)
    at EventEmitter.emit (events.js:194)
_stream_writable.js:241 Uncaught TypeError: Cannot read property 'ended' of undefined
    at Writable.write (_stream_writable.js:241)
    at CallbacksRegistry.apply (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:48)
    at EventEmitter.<anonymous> (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:299)
    at emitThree (events.js:116)
    at EventEmitter.emit (events.js:194)
_stream_writable.js:241 Uncaught TypeError: Cannot read property 'ended' of undefined
    at Writable.write (_stream_writable.js:241)
    at CallbacksRegistry.apply (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:48)
    at EventEmitter.<anonymous> (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:299)
    at emitThree (events.js:116)
    at EventEmitter.emit (events.js:194)
_stream_writable.js:241 Uncaught TypeError: Cannot read property 'ended' of undefined
    at Writable.write (_stream_writable.js:241)
    at CallbacksRegistry.apply (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:48)
    at EventEmitter.<anonymous> (C:\Users\sdkca\Desktop\node-workspace\electron-quick-start\node_modules\electron\dist\resources\ele…:299)
    at emitThree (events.js:116)
    at EventEmitter.emit (events.js:194)

I'm using the module from the renderer process:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    </head>
    
    <body>
        <h1>Hello World!</h1>
        <p>Hello, type some wrong things in the following textarea !</p>
        <textarea rows="5"></textarea>
    </body>

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

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

</html>

Any idea of what im doing wrong? The Electron Project is the boilerplate of electron-quick-start.

Permission Errors

I tried to reinstall/upgrade the extensions and now I am getting permissions errors... does this need sudo or something!?

Failed to read content scripts { Error: EACCES: permission denied, open '/Users/bradennapier/Library/Application Support/Electron/extensions/fmkadmapgofadopljbjfkapdkoienihi/build/inject.js'
    at Object.fs.openSync (fs.js:584:18)
    at Object.module.(anonymous function) [as openSync] (ELECTRON_ASAR.js:173:20)
    at Object.fs.readFileSync (fs.js:491:33)
    at Object.fs.readFileSync (ELECTRON_ASAR.js:505:29)
    at readArrayOfFiles (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:235:23)
    at Array.map (native)
    at contentScriptToEntry (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:242:21)
    at Array.map (native)
    at injectContentScripts (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:250:48)
    at loadExtension (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:279:3)
    at Function.BrowserWindow.addExtension (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:375:7)
    at Function.BrowserWindow.addDevToolsExtension (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:405:40)
    at /Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron-devtools-installer/dist/index.js:74:30
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:109:7)
  errno: -13,
  code: 'EACCES',
  syscall: 'open',
  path: '/Users/bradennapier/Library/Application Support/Electron/extensions/fmkadmapgofadopljbjfkapdkoienihi/build/inject.js' }
[17:22:47.104] [info] App Finished Startup Procedure
Failed to read content scripts { Error: EACCES: permission denied, open '/Users/bradennapier/Library/Application Support/Electron/extensions/fmkadmapgofadopljbjfkapdkoienihi/build/inject.js'
    at Object.fs.openSync (fs.js:584:18)
    at Object.module.(anonymous function) [as openSync] (ELECTRON_ASAR.js:173:20)
    at Object.fs.readFileSync (fs.js:491:33)
    at Object.fs.readFileSync (ELECTRON_ASAR.js:505:29)
    at readArrayOfFiles (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:235:23)
    at Array.map (native)
    at contentScriptToEntry (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:242:21)
    at Array.map (native)
    at injectContentScripts (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:250:48)
    at loadExtension (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:279:3)
    at Array.forEach (native)
    at loadDevToolsExtensions (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:285:13)
    at WebContents.<anonymous> (/Users/bradennapier/Desktop/Dash OS/IDE/projects/dash-desktop/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:296:5)
    at emitOne (events.js:96:13)
    at WebContents.emit (events.js:191:7)
  errno: -13,
  code: 'EACCES',
  syscall: 'open',
  path: '/Users/bradennapier/Library/Application Support/Electron/extensions/fmkadmapgofadopljbjfkapdkoienihi/build/inject.js' }
connected to remotedev-server

The entire thing is broken now and just errors on startup.

Consider a better zip lib

The lib used for unzipping seems a tad sketchy.

It would probably make the installation a bit larger, but would it be worth looking at alternatives:
https://www.npmjs.com/package/unzip
https://www.npmjs.com/package/yauzl

Return name AND version?

It would be useful to have the promise return the version as well.

import the module from the main process throw exception on first run

Steps:

• Remove %APPDATA%\Electron
• From the main process:
  import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';
• Run

App threw an error during load
Error: ENOENT: no such file or directory, mkdir 'C:\Users\<user>\AppData\Roaming\Electron\extensions'
    at Error (native)
    at fs.mkdirSync (fs.js:922:18)
    at Object.fs.mkdirSync (ELECTRON_ASAR.js:675:16)
    at getPath (C:\Work\UXTools-git\indigo-electron\node_modules\electron-devtools-installer\dist\utils.js:26:18)
    at Object.<anonymous> (C:\Work\UXTools-git\indigo-electron\node_modules\electron-devtools-installer\dist\index.js:42:59)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)

It seems that some code is being run at import this could be solved executing that code lazily when needed.

win7 build 7zip ENOENT

i'm trying install vueTools on build version.
boilerplate - https://github.com/SimulatedGREG/electron-vue (webpack)

C:\Users\Averia\AppData\Local\Programs\averia-elab\resources\app.asar\node_modules\electron-log\renderer.js:34
[23:41:04.519] Unable to install `vue-devtools`: => Error: spawn
C:\Users\Averia\AppData\Local\Programs\averia-elab\resources\app.asar\node_modules\7zip\7zip-lite\7z.exe
ENOENT at exports._errnoException (util.js:1050:11) at
Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:367:16) at
_combinedTickCallback (internal/process/next_tick.js:80:11) at
process._tickCallback (internal/process/next_tick.js:104:9)
(anonymous)@C:\Users\Averia\AppData\Local\Programs\averia-elab\resources\app.asar\node_modules\electron-log\renderer.js:34

physical on the disk has:

• file app.asar (~189mb)
• path app.asar.unpacked (include node_modules/7zip/7zip-lite/7z.exe)

if you can, please make condition:

 if (!existSync(app.asar\node_modules\7zip\7zip-lite\7z.exe))
	use app.asar.unpacked\node_modules\7zip\7zip-lite\7z.exe

i trying understand this problem, but unsuccessfully(

We should store a cache of extension names so we don't install the same extension twice

We can use BrowserWindow.getDevToolsExtensions() to determine which extensions are installed.

https://github.com/electron/electron/blob/master/docs/api/browser-window.md#browserwindowgetdevtoolsextensions

Add Devtron Dev Tools

Add the electron dev tools to gain access to the features of the tool which is listed below.

• Require graph
• IPC monitor
• Event inspector
• App Linter

https://github.com/electron/devtron

Getting permission error while reading the extension

1. Getting permission error.
2. Even though I'm getting an error it's being resolved as a success and not as an error.

Failed to read content scripts { Error: EACCES: permission denied, open '/Users/neerajsingh/Library/Application Support/aceinvoice/extensions/fmkadmapgofadopljbjfkapdkoienihi/build/inject.js'
    at Object.fs.openSync (fs.js:584:18)
    at Object.module.(anonymous function) [as openSync] (ELECTRON_ASAR.js:173:20)
    at Object.fs.readFileSync (fs.js:491:33)
    at Object.fs.readFileSync (ELECTRON_ASAR.js:505:29)
    at readArrayOfFiles (/Users/neerajsingh/code/aceinvoice-projects/aceinvoice-electron/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:235:23)
    at Array.map (native)
    at contentScriptToEntry (/Users/neerajsingh/code/aceinvoice-projects/aceinvoice-electron/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:242:21)
    at Array.map (native)
    at injectContentScripts (/Users/neerajsingh/code/aceinvoice-projects/aceinvoice-electron/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:250:48)
    at loadExtension (/Users/neerajsingh/code/aceinvoice-projects/aceinvoice-electron/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:279:3)
    at Function.BrowserWindow.addExtension (/Users/neerajsingh/code/aceinvoice-projects/aceinvoice-electron/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:375:7)
    at Function.BrowserWindow.addDevToolsExtension (/Users/neerajsingh/code/aceinvoice-projects/aceinvoice-electron/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:405:40)
    at /Users/neerajsingh/code/aceinvoice-projects/aceinvoice-electron/node_modules/electron-devtools-installer/dist/index.js:75:30
    at <anonymous>
  errno: -13,
  code: 'EACCES',
  syscall: 'open',
  path: '/Users/neerajsingh/Library/Application Support/aceinvoice/extensions/fmkadmapgofadopljbjfkapdkoienihi/build/inject.js' }
Added Extension:  React Developer Tools

Here is source code.

const electron = require('electron');
const isDev = require('electron-is-dev');
const path = require('path');
const url = require('url');
const R = require('ramda');

const { app, Tray, BrowserWindow, Menu, ipcMain, MenuItem, dialog } = electron;

const attachReactDeveloperTool = () => {
  if (isDev) {
    require('electron-debug')({ enabled: true });
    const {
      default: installExtension,
      REACT_DEVELOPER_TOOLS,
    } = require('electron-devtools-installer');
    installExtension(REACT_DEVELOPER_TOOLS)
      .then(name => console.log(`Added Extension:  ${name}`))
      .catch(err => console.log('An error occurred: ', err));
  }
};

app.on('ready', attachReactDeveloperTool);

Uncaught exception when installing React Developer Tools and Redux DevTools

Electron-devtools-installer version: 2.1.0
Electron version: 1.4.12

I am seeing an uncaught exception when trying to install developer tools:

 Uncaught exception Error: Attempting to call a function in a renderer window that has been closed or released. Function provided here: C:\Users\FlyingSquad\AppData\Local\EMRConnect\app-1.0.1\resources\app.asar\node_modules\electron-devtools-installer\dist\utils.js:41:9.
        at ClientRequest.callIntoRenderer (C:\Users\FlyingSquad\AppData\Local\EMRConnect\app-1.0.1\resources\electron.asar\browser\rpc-server.js:199:19)
        at emitOne (events.js:96:13)
        at ClientRequest.emit (events.js:188:7)
        at URLRequest.ClientRequest.urlRequest.on (C:\Users\FlyingSquad\AppData\Local\EMRConnect\app-1.0.1\resources\electron.asar\browser\api\net.js:201:12)
        at emitOne (events.js:96:13)
        at URLRequest.emit (events.js:188:7)

Note that this issue does not occur when using version 2.0.1 of electron-devtools-installer

Errors thrown by use of electron.net.request

Under electron 1.6.2 I tried running installExtension in the renderer process, but it threw all sorts of errors which appeared to be related to the use of electron.net.request (if I changed https://github.com/MarshallOfSound/electron-devtools-installer/blob/master/src/utils.js#L13 to use http.request it worked fine).

I switched to running installExtension in the main process in the app.on('ready' event handler, that works great.

I'm not sure if there's a bug here regarding the use of electron.net.request or if the documentation just needs updating to indicate where to run installExtension

Exception after upgrading to Electron 2.0.0

On latest 2.2.3:

"stack":"Error: Version of Electron: 2.0.0 does not match required range ^1.2.1 for extension fmkadmapgofadopljbjfkapdkoienihi
at install C:\Users\user\AppData\Local\Programs\myApp\resources\app.asar\node_modules\electron-devtools-installer\dist\index.js:62:29)
at C:\Users\user\AppData\Local\Programs\myApp\resources\app.asar\node_modules\electron-devtools-installer\dist\index.js:54:14
at Array.map ()
at install (C:\Users\user\AppData\Local\Programs\myApp\resources\app.asar\node_modules\electron-devtools-installer\dist\index.js:53:43)

Coming from index.js:
export const REACT_DEVELOPER_TOOLS = {
id: 'fmkadmapgofadopljbjfkapdkoienihi',
electron: '^1.2.1',

My project only uses REACT_DEVELOPER_TOOLS and REDUX_DEVTOOLS. I upped those lines to electron: '^2.0.0', and they loaded ok but my devTools locked up several times not long after starting up my app. It runs ok without those tools loaded. I also got lockups just with REDUX_DEVTOOLS, so I'm forced to roll my Electron back to 1.8.6 until this is fixed.

net::ERR_TUNNEL_CONNECTION_FAILED

I'm using this package as part of the Electron/Vue.js template.

Its called via:

// Install `vue-devtools`
require('electron').app.on('ready', () => {
  
  let installExtension = require('electron-devtools-installer')
  installExtension.default(installExtension.VUEJS_DEVTOOLS)
    .then(() => {})
    .catch(err => {
      console.log('Unable to install `vue-devtools`: \n', err)
    })
})

And i'm getting the following error.

Unable to install vue-devtools:
Error: net::ERR_TUNNEL_CONNECTION_FAILED

• I am behind a corporate firewall
• The firewall does SSL Inspection

I'm unsure how to diagnose the issue.

The command yarn add @vue/devtools seems to work fine so I'm pretty sure the tools should be able to be installed.

My yarn config has 'strict-ssl': false, set

Any ideas what else to try or how to get this working?

Thanks!

Add Apollo Dev Tools

I'm sorry for not writing a PR, but the following hack (into the bundled version) worked for me, I guess it should be obvious where to place this for someone familiar with the codebase.
This is the tool and this is the bug where I got the id from.

APOLLO_DEVELOPER_TOOLS = exports.APOLLO_DEVELOPER_TOOLS = {
  id: 'jdkknkkbebbapilgoeccciglkfbmbnfm',
  electron: '^1.2.6'
};

Issue downloading extensions behind proxy

Hi,

I have had an issue with electron-react-boilerplate/electron-react-boilerplate#377

I am behind a corp proxy but my proxy settings work well (using cntlm).

For some reason I get and errro when I try to run electron-react-boilerplate's noder run dev command.

I have tracked the error to https://github.com/MarshallOfSound/electron-devtools-installer/blob/master/src/downloadChromeExtension.js

{ Error: connect ECONNREFUSED 216.58.194.110:443
    at Object.exports._errnoException (util.js:1008:11)
    at exports._exceptionWithHostPort (util.js:1031:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1080:14)
  code: 'ECONNREFUSED',
  errno: 'ECONNREFUSED',
  syscall: 'connect',
  address: '216.58.194.110',
  port: 443 }

My concern is if electron-devtools-installer is honoring the proxy settings I have set as environment variables?

Error on renderer process

ERROR in ./~/har-validator/lib/schemas/timings.json
Module parse failed: /Users/sobrinho/Developer/.../node_modules/har-validator/lib/schemas/timing
s.json Unexpected token (2:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:12)
    at Parser.pp$4.raise (/Users/sobrinho/Developer/.../node_modules/acorn/dist/acorn.js:2221:15
)

This error appears on renderer process, the documentation is not clear if the plugin must be called from main process or renderer process.

Vue Devtools showing blank.

Simply put there are no components within the inspector to select, but it did install. I am using the Electron-Vue boilerplate. https://github.com/SimulatedGREG/electron-vue

Extension isn't updating?

I'm getting this console error when adding React DevTools:

Warning: The installed version of React DevTools is too old

My feeling is that I have a cached version of the extension installed somewhere that isn't updating. Any thoughts? On OSX.

Always return 1 exit code for unzip

https://github.com/GPMDP/electron-devtools-installer/blob/master/index.js#L25

I used forceDownload, unzip always callback error, but actually unzip success.

Uncaught TypeError: this.on is not a function

flowing the Usage，and console error show this
Uncaught TypeError: this.on is not a function

version info : React16.0, electron 1.4.6

Redux devtools won't load on Linux, maybe due to missing installation option

Hi,

Even after a successul install, window.__REDUX__DEVTOOLS_EXTENSION_COMPOSE__ is undefined, at least on Linux (the issue does not seem to appear on Windows).

This seems to be due to the following issue: zalmoxisus/redux-devtools-extension#219

However, when using the installer, I don't have access to the module options (or at least I did'nt find them ?). Is it possible to make sure that the Allow access to file url option is ticked when installing React Devtools ?

Uninstall?

Once the plugin is installed, is it possible to uninstall it?

Is the 7zip dependency used?

Is the 7zip dependency in package.json used for anything?

7zip does not show up in GitHub search (apart from the package.json), while cross-unzip does show up:

Possible bug Electron beta version incompatible

when testing with electron 1.8.2-beta.3 I get this error:

Error: Version of Electron: 1.8.2-beta.3 does not match required range ^1.2.1 for extension fmkadmapgofadopljbjfkapdkoienihi

Is it expected that this should fail with:

export const REACT_DEVELOPER_TOOLS = {
  id: 'fmkadmapgofadopljbjfkapdkoienihi',
  electron: '^1.2.1',
};

Dependencies not found

I am setting up an electron boilerplate for personal use (see here), and when I try to use electron-devtools-installer I see the following errors in my webpack build output:

https://gist.github.com/xwvvvvwx/e7e895fb1614fedd362b4d82cc377239

I am calling electron-devtools-installer in my index.tsx

Am I doing something wrong?

Can't load extension over HTTPS

Hi!

Part of my app loads a page over HTTPS. That page has some React.js in it and I need to debug something that is going on there.

The problem is: the React Devtools Extension is added, but won't load because the page is loaded over HTTPS:

Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure script 'chrome-extension://react-developer-tools/build/backend.js'. This request has been blocked; the content must be served over HTTPS.

Is there anything that I can do to load the extension over HTTPS as well?
Thanks.

Support Electron 2-0-x?

Hi, since the electron 2-0-x series has just come out, will electron-devtools-installer support this series as well?

Currently, it only supports ^1.2.1 to install most dev extensions. 😞

Example with Require()

Consider adding this example to the README, for those of us who don't use Browserfy (since we are coming from the Node.js world, and use straight ea6 and node.js).

let installExtension = require('electron-devtools-installer')

console.log("Node started...");
app.on('ready', () => {
  let win = new BrowserWindow({
    windth: 800,
    height: 600
  })
  win.loadURL('http://localhost/NodeWork/window.html');
    installExtension.default(installExtension.REACT_DEVELOPER_TOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));
        installExtension.default(installExtension.REDUX_DEVTOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));
  win.webContents.openDevTools();
});

Installing with Chrome Store ID, what am I doing wrong?

const IMMUTABLEJS_OBJECT_FORMATTER = { id: 'hgldghadipiblonfkkicmgcbbijnpeog', electron: '^1.2.1' };

const installExtensions = async () => {
  if (process.env.NODE_ENV === 'development') {
 // if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'production') {
    const installer = require('electron-devtools-installer'); // eslint-disable-line global-require

    const extensions = [
      'REACT_DEVELOPER_TOOLS',
      'REDUX_DEVTOOLS',
      'REACT_PERF',
      'IMMUTABLEJS_OBJECT_FORMATTER',
    ];

    const forceDownload = !!process.env.UPGRADE_EXTENSIONS;

    // TODO: Use async interation statement.
    //       Waiting on https://github.com/tc39/proposal-async-iteration
    //       Promises will fail silently, which isn't what we want in development
    return Promise
      .all(extensions.map(name => installer.default(installer[name], forceDownload)))
      .catch(console.log);
  }
};

This gives me the error: Error: Invalid extensionReference passed in: "undefined"

What am I doing wrong here? thanks for any advice.

Package v2.1.0 in npmjs is stale

In particular, right now in main branch, with version 2.1.0, index.js is 94 lines long, but same file, coming from npm is 86 lines. Missing are lines:

export const CYCLEJS_DEVTOOL = {
  id: 'dfgplfmhhmdekalbpejekgfegkonjpfp',
  electron: '^1.2.1',
};

And, as a result CYCLEJS_DEVTOOL is undefined.
I guess, update of npm is needed, by bumping version to 2.1.1, to make npm accept fresh upload.

On the side, thank you very much for this package. Love it.

'"Cannot read property 'getPath' of undefined" when trying to install extensions

Today I meet an error when I tried to install REDUX_DEVTOOLS at my windows pc.

• My install script
  installTools.js

const installExtension = require('electron-devtools-installer');
const REDUX_DEVTOOLS = installExtension.REDUX_DEVTOOLS;

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

• Error log

> [email protected] init-dev C:\workspace\electron-quick-start
> node --harmony installTools.js

C:\workspace\electron-quick-start\node_modules\electron-devtools-installer\dist\       utils.js:23
  var savePath = (_electron.remote || _electron2.default).app.getPath('userData'       );
                                                             ^

TypeError: Cannot read property 'getPath' of undefined
    at getPath (C:\workspace\electron-quick-start\node_modules\electron-devtools       -installer\dist\utils.js:23:62)
    at Object.<anonymous> (C:\workspace\electron-quick-start\node_modules\electr       on-devtools-installer\dist\index.js:42:59)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\workspace\electron-quick-start\installTools.js:1:8       8)

I can not understand why the property app is undefined here. Is there any one who meet this error too?

PS. My env

• electron-devtools-installer 2.0.1
• nodejs v6.9.2
• npm 4.0.5
• OS win10

Extension name is returned as undefined (Vue)

installExtension's promise resolution returns name as undefined, at least for the Vue devtools. This is on the latest 1.1.4 installer / 1.2.4 electron combo, using the exported Vue ID method.

I'm not entirely sure why either, electron returns it from addDevToolsExtension which pulls it from the extension's manifest.json name field. I checked the manifest and it has a valid name field, also confirmed by the fact that electron will log a message Attempted to load extension "Vue.js devtools" that has already been loaded. so it does have the name.

My guess is it either has something to do with async which I'm very new to, or that addDevToolsExtension returns differently depending on context ( remote or not ).

Recreate:

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

installExtension(VUEJS_DEVTOOLS)
  .then(name => console.log(`Added Extension:  ${name}`));

// -> Added Extension: undefined

7zip build error

I currently get this:

Module not found: Error: Can't resolve './package' in '/Users/jason/www/my-project/node_modules/7zip'
@ ./~/7zip/index.js 2:10-30
@ ./~/cross-unzip/index.js
@ ./~/electron-devtools-installer/dist/downloadChromeExtension.js
@ ./~/electron-devtools-installer/dist/index.js
@ ./src/main.ts

on investigating to the offending '7zip' the 'bin' variable should be looking for '.package.json' :
var bin = require('./package').bin

If I upgrade the 'package.json' in 'electron-devtools-installer' to use the latest version of '7zip: 0.1.1' then all's good.

Please add a working example

I try to use this package but I cannot make it run.
the code below throw error: "installExtension" is not a function

let installExtension = require('electron-devtools-installer')
...
        installExtension(installExtension.REACT_DEVELOPER_TOOLS)
            .then((name) => {
                console.log(`Added Extension:  ${name}`)
                initMainWindow();
            })
            .catch((err) => console.log('An error occurred: ', err));

Any way to add Redux Devtools?

https://github.com/zalmoxisus/redux-devtools-extension

[Feature] Add option for check update if extension installed

Add option for check update if extension installed, I think it will be better than forceDownload.

For redux-devtools-extension, we can get the xml by https://clients2.google.com/service/update2/crx?x=id%3Dlmhkpmbekcpmknklioeibfkpmmfibljd%26uc&prodversion=32 (No response):

<gupdate xmlns="http://www.google.com/update2/response" protocol="2.0" server="prod">
  <daystart elapsed_days="3620" elapsed_seconds="67699"/>
  <app appid="lmhkpmbekcpmknklioeibfkpmmfibljd" cohort="" cohortname="" status="ok">
    <updatecheck
      codebase="https://clients2.googleusercontent.com/crx/blobs/QgAAAC6zw0qH2DJtnXe8Z7rUJP2IRVE-L9w2IT8562wiulh2IgB09conu2XJ-g73l8oozDkTpsK4nut8cp-7Murq2_r8MbzmmbAhUzPkQuuESgjcAMZSmuV2YJ8g9OU9pR7i6f1D9n90dSy57w/extension_2_11_0_4.crx"
      fp="1.48a24cd00dc54fb49dde23bb80d57eeb2dd71a6380572ca5cad9831b60d36fd0"
      hash_sha256="48a24cd00dc54fb49dde23bb80d57eeb2dd71a6380572ca5cad9831b60d36fd0"
      protected="0"
      size="1486330"
      status="ok"
      version="2.11.0.4"
    />
  </app>
</gupdate>

using require

How could I use this:

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));

With node require imports?

Fails to install extensions on win7 32-bit

I run a windows 7 32-bit VM and I am not able to install the dev extensions, all it says it cannot fetch them, but I have internet for sure.

Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
[2018-02-13 03:55:54.014][info] Error installing REACT_DEVELOPER_TOOLS extension
: spawn UNKNOWN