REACT_DEVELOPER_TOOLS is not loading #2
Comments
|
Hello, I just tested it. After electron started, Chrome Developer Tools did not load the react extension. But after Ctrl+R refreshed the page, the react extension was loaded. |
|
$ npm run start
Starting preload.js builder...
[webpack-dev-server] Project is running at: (node:31864) ExtensionLoadWarning: Warnings loading extension at C:\Users\dfranklin\AppData\Roaming\Electron\extensions\fmkadmapgofadopljbjfkapdkoienihi: (Use 10:35:04.754 > Skip checkForUpdates because application is not packed and dev update config is not forced |
|
main.ts /* eslint global-require: off, no-console: off, promise/always-return: off */
/**
* This module executes inside of electron's main process. You can start
* electron renderer process from here and communicate with the other processes
* through IPC.
*
* When running `npm run build` or `npm run build:main`, this file is compiled to
* `./src/main.js` using webpack. This gives us some performance wins.
*/
import path from 'path';
import { app, BrowserWindow, shell, ipcMain } from 'electron';
import { autoUpdater } from 'electron-updater';
import log from 'electron-log';
import MenuBuilder from './menu';
import { resolveHtmlPath } from './util';
import { installExtension, REACT_DEVELOPER_TOOLS } from '@tomjs/electron-devtools-installer';
class AppUpdater {
constructor() {
log.transports.file.level = 'info';
autoUpdater.logger = log;
autoUpdater.checkForUpdatesAndNotify();
}
}
let mainWindow: BrowserWindow | null = null;
ipcMain.on('ipc-example', async (event, arg) => {
const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
console.log(msgTemplate(arg));
event.reply('ipc-example', msgTemplate('pong'));
});
if (process.env.NODE_ENV === 'production') {
const sourceMapSupport = require('source-map-support');
sourceMapSupport.install();
}
const isDebug =
process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
if (isDebug) {
require('electron-debug')();
}
const installExtensions = async () => {
const installer = require('electron-devtools-installer');
const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
const extensions = ['REACT_DEVELOPER_TOOLS'];
return installer
.default(
extensions.map((name) => installer[name]),
forceDownload,
)
.catch(console.log);
};
const createWindow = async () => {
if (isDebug) {
await installExtensions();
}
const RESOURCES_PATH = app.isPackaged
? path.join(process.resourcesPath, 'assets')
: path.join(__dirname, '../../assets');
const getAssetPath = (...paths: string[]): string => {
return path.join(RESOURCES_PATH, ...paths);
};
mainWindow = new BrowserWindow({
show: false,
width: 1024,
height: 728,
icon: getAssetPath('icon.png'),
webPreferences: {
preload: app.isPackaged
? path.join(__dirname, 'preload.js')
: path.join(__dirname, '../../.erb/dll/preload.js'),
},
});
mainWindow.loadURL(resolveHtmlPath('index.html'));
mainWindow.on('ready-to-show', () => {
if (!mainWindow) {
throw new Error('"mainWindow" is not defined');
}
if (process.env.START_MINIMIZED) {
mainWindow.minimize();
} else {
mainWindow.show();
}
});
mainWindow.on('closed', () => {
mainWindow = null;
});
const menuBuilder = new MenuBuilder(mainWindow);
menuBuilder.buildMenu();
// Open urls in the user's browser
mainWindow.webContents.setWindowOpenHandler((edata) => {
shell.openExternal(edata.url);
return { action: 'deny' };
});
// Remove this if your app does not use auto updates
// eslint-disable-next-line
new AppUpdater();
};
/**
* Add event listeners...
*/
app.on('window-all-closed', () => {
// Respect the OSX convention of having the application in memory even
// after all windows have been closed
if (process.platform !== 'darwin') {
app.quit();
}
});
app
.whenReady()
.then(() => {
installExtension(REACT_DEVELOPER_TOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
.then(ext => console.log(`Added Extension: ${ext.name}`))
.catch(err => console.log('An error occurred: ', err));
})
.then(() => {
createWindow();
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) createWindow();
});
})
.catch(console.log);
// import { app } from 'electron';
// import { installExtension, VUEJS_DEVTOOLS } from '@tomjs/electron-devtools-installer';
// // Install Vue.js DevTools
// app.whenReady().then(() => {
// installExtension(VUEJS_DEVTOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
// .then(ext => console.log(`Added Extension: ${ext.name}`))
// .catch(err => console.log('An error occurred: ', err));
// }); |
|
It seems that my REACT_DEVELOPER_TOOLS aren't installing. Please help. |
|
@Imaginativeone Hello, please try to use the electron API to load the extension directly to see if there is any problem. installExtension(REACT_DEVELOPER_TOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
.then(ext => console.log(`Added Extension: ${ext.name}`))
.catch(err => console.log('An error occurred: ', err));
})To import { session} from 'electron';
session.defaultSession
.loadExtension(
`C:\\Users\\dfranklin\\AppData\\Roaming\\Electron\\extensions\\fmkadmapgofadopljbjfkapdkoienihi`,
)
.then(ext => console.log(`Added Extension: ${ext.name}`))
.catch(err => console.log('An error occurred: ', err)); |
/* eslint global-require: off, no-console: off, promise/always-return: off */
/**
* This module executes inside of electron's main process. You can start
* electron renderer process from here and communicate with the other processes
* through IPC.
*
* When running `npm run build` or `npm run build:main`, this file is compiled to
* `./src/main.js` using webpack. This gives us some performance wins.
*/
import path from 'path';
import { app, BrowserWindow, shell, ipcMain, session } from 'electron';
import { autoUpdater } from 'electron-updater';
import log from 'electron-log';
import MenuBuilder from './menu';
import { resolveHtmlPath } from './util';
import { installExtension, REACT_DEVELOPER_TOOLS } from '@tomjs/electron-devtools-installer';
class AppUpdater {
constructor() {
log.transports.file.level = 'info';
autoUpdater.logger = log;
autoUpdater.checkForUpdatesAndNotify();
}
}
let mainWindow: BrowserWindow | null = null;
ipcMain.on('ipc-example', async (event, arg) => {
const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
console.log(msgTemplate(arg));
event.reply('ipc-example', msgTemplate('pong'));
});
if (process.env.NODE_ENV === 'production') {
const sourceMapSupport = require('source-map-support');
sourceMapSupport.install();
}
const isDebug =
process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
if (isDebug) {
require('electron-debug')();
}
const installExtensions = async () => {
const installer = require('electron-devtools-installer');
const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
const extensions = ['REACT_DEVELOPER_TOOLS'];
return installer
.default(
extensions.map((name) => installer[name]),
forceDownload,
)
.catch(console.log);
};
const createWindow = async () => {
if (isDebug) {
await installExtensions();
}
const RESOURCES_PATH = app.isPackaged
? path.join(process.resourcesPath, 'assets')
: path.join(__dirname, '../../assets');
const getAssetPath = (...paths: string[]): string => {
return path.join(RESOURCES_PATH, ...paths);
};
mainWindow = new BrowserWindow({
show: false,
width: 1024,
height: 728,
icon: getAssetPath('icon.png'),
webPreferences: {
preload: app.isPackaged
? path.join(__dirname, 'preload.js')
: path.join(__dirname, '../../.erb/dll/preload.js'),
},
});
mainWindow.loadURL(resolveHtmlPath('index.html'));
mainWindow.on('ready-to-show', () => {
if (!mainWindow) {
throw new Error('"mainWindow" is not defined');
}
if (process.env.START_MINIMIZED) {
mainWindow.minimize();
} else {
mainWindow.show();
}
});
mainWindow.on('closed', () => {
mainWindow = null;
});
const menuBuilder = new MenuBuilder(mainWindow);
menuBuilder.buildMenu();
// Open urls in the user's browser
mainWindow.webContents.setWindowOpenHandler((edata) => {
shell.openExternal(edata.url);
return { action: 'deny' };
});
// Remove this if your app does not use auto updates
// eslint-disable-next-line
new AppUpdater();
};
/**
* Add event listeners...
*/
app.on('window-all-closed', () => {
// Respect the OSX convention of having the application in memory even
// after all windows have been closed
if (process.platform !== 'darwin') {
app.quit();
}
});
app
.whenReady()
.then(() => {
// installExtension(REACT_DEVELOPER_TOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
// .then(ext => console.log(`Added Extension: ${ext.name}`))
// .catch(err => console.log('An error occurred: ', err));
session.defaultSession
.loadExtension(
`C:\\Users\\dfranklin\\AppData\\Roaming\\Electron\\extensions\\fmkadmapgofadopljbjfkapdkoienihi`,
)
.then(ext => console.log(`Added Extension: ${ext.name}`))
.catch(err => console.log('An error occurred: ', err));
})
.then(() => {
createWindow();
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) createWindow();
});
})
.catch(console.log);
// import { app } from 'electron';
// import { installExtension, VUEJS_DEVTOOLS } from '@tomjs/electron-devtools-installer';
// // Install Vue.js DevTools
// app.whenReady().then(() => {
// installExtension(VUEJS_DEVTOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
// .then(ext => console.log(`Added Extension: ${ext.name}`))
// .catch(err => console.log('An error occurred: ', err));
// }); |
|
$ npm run start
Starting preload.js builder...
[webpack-dev-server] Project is running at: (node:44336) ExtensionLoadWarning: Warnings loading extension at C:\Users\dfranklin\AppData\Roaming\Electron\extensions\fmkadmapgofadopljbjfkapdkoienihi: (Use 11:15:05.887 > Skip checkForUpdates because application is not packed and dev update config is not forced |
|
@Imaginativeone After press F5 or Ctrl+R
|
import { app, BrowserWindow, shell, ipcMain } from 'electron'
import { createRequire } from 'node:module'
import { fileURLToPath } from 'node:url'
import path from 'node:path'
import os from 'node:os'
import { update } from './update'
import { installExtension, REACT_DEVELOPER_TOOLS } from '@tomjs/electron-devtools-installer';
const require = createRequire(import.meta.url)
const __dirname = path.dirname(fileURLToPath(import.meta.url))
// The built directory structure
//
// ├─┬ dist-electron
// │ ├─┬ main
// │ │ └── index.js > Electron-Main
// │ └─┬ preload
// │ └── index.mjs > Preload-Scripts
// ├─┬ dist
// │ └── index.html > Electron-Renderer
//
process.env.APP_ROOT = path.join(__dirname, '../..')
export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron')
export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist')
export const VITE_DEV_SERVER_URL = process.env.VITE_DEV_SERVER_URL
process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
? path.join(process.env.APP_ROOT, 'public')
: RENDERER_DIST
// Disable GPU Acceleration for Windows 7
if (os.release().startsWith('6.1')) app.disableHardwareAcceleration()
// Set application name for Windows 10+ notifications
if (process.platform === 'win32') app.setAppUserModelId(app.getName())
if (!app.requestSingleInstanceLock()) {
app.quit()
process.exit(0)
}
let win: BrowserWindow | null = null
const preload = path.join(__dirname, '../preload/index.mjs')
const indexHtml = path.join(RENDERER_DIST, 'index.html')
async function createWindow() {
win = new BrowserWindow({
title: 'Main window',
icon: path.join(process.env.VITE_PUBLIC, 'favicon.ico'),
webPreferences: {
preload,
// Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
// nodeIntegration: true,
// Consider using contextBridge.exposeInMainWorld
// Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
// contextIsolation: false,
},
})
if (VITE_DEV_SERVER_URL) { // #298
win.loadURL(VITE_DEV_SERVER_URL)
// Open devTool if the app is not packaged
win.webContents.openDevTools()
} else {
win.loadFile(indexHtml)
}
// Test actively push message to the Electron-Renderer
win.webContents.on('did-finish-load', () => {
win?.webContents.send('main-process-message', new Date().toLocaleString())
})
// Make all links open with the browser, not with the application
win.webContents.setWindowOpenHandler(({ url }) => {
if (url.startsWith('https:')) shell.openExternal(url)
return { action: 'deny' }
})
// Auto update
update(win)
}
// createWindow, then Install React DevTools
app.whenReady().then(createWindow)
.then(() => {
// installExtension(REACT_DEVELOPER_TOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
// .then(ext => console.log(`Added Extension: ${ext.name}`))
// .catch(err => console.log('An error occurred: ', err));
session.defaultSession.loadExtension(
`C:\\Users\\dfranklin\\AppData\\Roaming\\Electron\\extensions\\fmkadmapgofadopljbjfkapdkoienihi`,
)
.then(ext => console.log(`Added Extension: ${ext.name}`))
.catch(err => console.log('An error occurred: ', err));
});
// app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
win = null
if (process.platform !== 'darwin') app.quit()
})
app.on('second-instance', () => {
if (win) {
// Focus on the main window if the user tried to open another
if (win.isMinimized()) win.restore()
win.focus()
}
})
app.on('activate', () => {
const allWindows = BrowserWindow.getAllWindows()
if (allWindows.length) {
allWindows[0].focus()
} else {
createWindow()
}
})
// New window example arg: new windows url
ipcMain.handle('open-win', (_, arg) => {
const childWindow = new BrowserWindow({
webPreferences: {
preload,
nodeIntegration: true,
contextIsolation: false,
},
})
if (VITE_DEV_SERVER_URL) {
childWindow.loadURL(`${VITE_DEV_SERVER_URL}#${arg}`)
} else {
childWindow.loadFile(indexHtml, { hash: arg })
}
})
// import { app } from 'electron';
// import { installExtension, REACT_DEVELOPER_TOOLS } from '@tomjs/electron-devtools-installer';
// Install React DevTools
// app.whenReady().then(() => {
// installExtension(REACT_DEVELOPER_TOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
// .then(ext => console.log(`Added Extension: ${ext.name}`))
// .catch(err => console.log('An error occurred: ', err));
// }); |
|
$ npm run dev
vite v5.3.2 building for development... watching for file changes... watching for file changes... VITE v5.3.2 ready in 495 ms ➜ Local: http://localhost:5173/ build started... build started... (node:40056) UnhandledPromiseRejectionWarning: ReferenceError: session is not defined |
You should import session import { session} from 'electron';This plugin just downloads the corresponding extension before calling the session.defaultSession.loadExtension method. Check your computer
|
|
|
|
Aaahh...it's not loading new stuff there. Gotta figure out why not. |
|
Are you open to posting a working demo app? |
|
Never mind...found it. |
|
@Imaginativeone |
|
@Imaginativeone |
Hi thanks for making this great package!
I have tested
REACT_DEVELOPER_TOOLSandfmkadmapgofadopljbjfkapdkoienihiand the extension does not load in the Chrome Dev Tools Inspector.REDUX_DEVTOOLSdoes work so the package is working correctly.The text was updated successfully, but these errors were encountered: