From 0dfb9c37fc2c247fcae11980ecc8beaf555f25af Mon Sep 17 00:00:00 2001 From: DispatchCommit Date: Wed, 2 Dec 2020 18:23:31 -0800 Subject: [PATCH 1/2] Add React Devtools Extension Adds electron-devtools-installer to dependancies This allows for adding chrome extensions to electron Adds react devtools to electron to assist in development and debugging in electron. --- package.json | 2 ++ src/main/index.ts | 23 +++++++++++++-- yarn.lock | 71 ++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 93 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 99b1197e..bd1fb90b 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "@babel/preset-react": "^7.12.1", "@types/color": "^3.0.1", "@types/cross-spawn": "^6.0.2", + "@types/electron-devtools-installer": "^2.2.0", "@types/js-yaml": "^3.12.5", "@types/node": "12", "@types/react": "^16.9.53", @@ -58,6 +59,7 @@ "@types/webpack-env": "^1.15.3", "electron": "9.3.3", "electron-builder": "^22.9.1", + "electron-devtools-installer": "^3.1.1", "electron-webpack": "^2.8.2", "electron-webpack-ts": "^4.0.1", "ts-interface-builder": "^0.2.2", diff --git a/src/main/index.ts b/src/main/index.ts index dc0eaa0f..23771b56 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -1,6 +1,7 @@ 'use strict' import { autoUpdater } from 'electron-updater'; +import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer'; import { app, BrowserWindow, ipcMain } from 'electron'; import * as path from 'path' import { format as formatUrl } from 'url' @@ -44,6 +45,7 @@ if (!gotTheLock) { } }); + // open devtools on launch if (isDevelopment) { window.webContents.openDevTools() } @@ -76,6 +78,18 @@ if (!gotTheLock) { return window } + async function injectExtensions () { + console.log( `Attempting to injecti extensions...` ); + + // add react devtools + try { + const name = await installExtension( REACT_DEVELOPER_TOOLS ); + console.log( `Added Extension: ${name}` ); + } catch ( error ) { + console.error( 'An error occurred installing extension(s): ', error ); + } + } + // quit application when all windows are closed app.on('window-all-closed', () => { // on macOS it is common for applications to stay open until the user explicitly quits @@ -92,8 +106,13 @@ if (!gotTheLock) { }) // create main BrowserWindow when electron is ready - app.on('ready', () => { - mainWindow = createMainWindow(); + app.on('ready', async () => { + + mainWindow = createMainWindow(); + + if (isDevelopment) { + await injectExtensions(); + } }); // ipcMain.on('alwaysOnTop', (event, onTop: boolean) => { diff --git a/yarn.lock b/yarn.lock index bbacc8a5..0395a259 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1053,6 +1053,11 @@ resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd" integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ== +"@types/electron-devtools-installer@^2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@types/electron-devtools-installer/-/electron-devtools-installer-2.2.0.tgz#32ee4ebbe99b3daf9847a6d2097dc00b5de94f10" + integrity sha512-HJNxpaOXuykCK4rQ6FOMxAA0NLFYsf7FiPFGmab0iQmtVBHSAfxzy3MRFpLTTDDWbV0yD2YsHOQvdu8yCqtCfw== + "@types/events@*": version "3.0.0" resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" @@ -3278,6 +3283,15 @@ electron-devtools-installer@^2.2.4: rimraf "^2.5.2" semver "^5.3.0" +electron-devtools-installer@^3.1.1: + version "3.1.1" + resolved "https://registry.yarnpkg.com/electron-devtools-installer/-/electron-devtools-installer-3.1.1.tgz#7b56c8c86475c5e4e10de6917d150c53c9ceb55e" + integrity sha512-g2D4J6APbpsiIcnLkFMyKZ6bOpEJ0Ltcc2m66F7oKUymyGAt628OWeU9nRZoh1cNmUs/a6Cls2UfOmsZtE496Q== + dependencies: + rimraf "^3.0.2" + semver "^7.2.1" + unzip-crx-3 "^0.2.0" + electron-publish@22.9.1: version "22.9.1" resolved "https://registry.yarnpkg.com/electron-publish/-/electron-publish-22.9.1.tgz#7cc76ac4cc53efd29ee31c1e5facb9724329068e" @@ -4802,6 +4816,11 @@ ignore@^4.0.6: resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc" integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg== +immediate@~3.0.5: + version "3.0.6" + resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b" + integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps= + import-fresh@^3.0.0: version "3.2.1" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66" @@ -5429,6 +5448,16 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" +jszip@^3.1.0: + version "3.5.0" + resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.5.0.tgz#b4fd1f368245346658e781fec9675802489e15f6" + integrity sha512-WRtu7TPCmYePR1nazfrtuF216cIVon/3GWOvHS9QR5bIwSbnxtdpma6un3jyGGNhHsKCSzn5Ypk+EkDRvTGiFA== + dependencies: + lie "~3.3.0" + pako "~1.0.2" + readable-stream "~2.3.6" + set-immediate-shim "~1.0.1" + keyv@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9" @@ -5504,6 +5533,13 @@ levn@^0.3.0, levn@~0.3.0: prelude-ls "~1.1.2" type-check "~0.3.2" +lie@~3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a" + integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ== + dependencies: + immediate "~3.0.5" + load-json-file@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0" @@ -6519,7 +6555,7 @@ package-json@^6.3.0: registry-url "^5.0.0" semver "^6.2.0" -pako@~1.0.5: +pako@~1.0.2, pako@~1.0.5: version "1.0.11" resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf" integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw== @@ -7545,6 +7581,13 @@ rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.3, rimraf@^2.7.1: dependencies: glob "^7.1.3" +rimraf@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" + integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== + dependencies: + glob "^7.1.3" + ripemd160@^2.0.0, ripemd160@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c" @@ -7695,6 +7738,13 @@ semver@^7.1.3: resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.3.tgz#e4345ce73071c53f336445cfc19efb1c311df2a6" integrity sha512-ekM0zfiA9SCBlsKa2X1hxyxiI4L3B6EbVJkkdgQXnSEEaHlGdvyodMruTiulSRWMMB4NeIuYNMC9rTKTz97GxA== +semver@^7.2.1: + version "7.3.4" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.4.tgz#27aaa7d2e4ca76452f98d3add093a72c943edc97" + integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw== + dependencies: + lru-cache "^6.0.0" + semver@^7.3.2: version "7.3.2" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938" @@ -7759,6 +7809,11 @@ set-blocking@^2.0.0, set-blocking@~2.0.0: resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc= +set-immediate-shim@~1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61" + integrity sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E= + set-value@^2.0.0, set-value@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b" @@ -8826,6 +8881,15 @@ unset-value@^1.0.0: has-value "^0.3.1" isobject "^3.0.0" +unzip-crx-3@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/unzip-crx-3/-/unzip-crx-3-0.2.0.tgz#d5324147b104a8aed9ae8639c95521f6f7cda292" + integrity sha512-0+JiUq/z7faJ6oifVB5nSwt589v1KCduqIJupNVDoWSXZtWDmjDGO3RAEOvwJ07w90aoXoP4enKsR7ecMrJtWQ== + dependencies: + jszip "^3.1.0" + mkdirp "^0.5.1" + yaku "^0.16.6" + upath@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894" @@ -9292,6 +9356,11 @@ y18n@^5.0.2: resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18" integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg== +yaku@^0.16.6: + version "0.16.7" + resolved "https://registry.yarnpkg.com/yaku/-/yaku-0.16.7.tgz#1d195c78aa9b5bf8479c895b9504fd4f0847984e" + integrity sha1-HRlceKqbW/hHnIlblQT9TwhHmE4= + yallist@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" From 49796fadd8205992206460501030c5b912795efa Mon Sep 17 00:00:00 2001 From: DispatchCommit Date: Wed, 2 Dec 2020 22:41:50 -0800 Subject: [PATCH 2/2] Add dynamic import Do not always import electron-devtools-installer since it is a package included in a production build and will cause an import error since electron-devtools-installer is a dev dep --- src/main/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/index.ts b/src/main/index.ts index 23771b56..33e726b8 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -1,7 +1,6 @@ 'use strict' import { autoUpdater } from 'electron-updater'; -import installExtension, { REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer'; import { app, BrowserWindow, ipcMain } from 'electron'; import * as path from 'path' import { format as formatUrl } from 'url' @@ -82,8 +81,9 @@ if (!gotTheLock) { console.log( `Attempting to injecti extensions...` ); // add react devtools + const installExtension = await import( 'electron-devtools-installer' ); try { - const name = await installExtension( REACT_DEVELOPER_TOOLS ); + const name = await installExtension.default( installExtension.REACT_DEVELOPER_TOOLS ); console.log( `Added Extension: ${name}` ); } catch ( error ) { console.error( 'An error occurred installing extension(s): ', error );