I am working on a small electron app, and I seem to have hit a road block. I have a webview in my app that loads to www.google.com . The webview loads fine, but when I right click anywhere in the webview, no context menu is created, clicking on any part of the page that is not the webview results in a context menu being successfully created. I am using electron-content-menu to create the menus, and I read through the documentation included at the git repository: https://github.com/sindresorhus/electron-context-menu#readme, but got nothing of value. Any help would be appreciated, as I really need context menu's to appear in my webviews.
Main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow, Menu, shell} = require('electron')
const path = require('path')
var holder;
var checkmax = 0;
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1919,
height: 1079,
frame: true,
webPreferences: {
webviewTag: true,
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html');
holder = mainWindow;
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 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 (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
//testing context
const contextMenu = require('electron-context-menu');
contextMenu({
prepend: (defaultActions, params, browserWindow) => [
{
label: 'Rainbow',
// Only show it when right-clicking images
visible: params.mediaType === 'image'
},
{
label: 'Search Google for “{selection}”',
// Only show it when right-clicking text
visible: params.selectionText.trim().length > 0,
click: () => {
shell.openExternal(`https://google.com/search?q=${encodeURIComponent(params.selectionText)}`);
}
}
]
});
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="background-color:red;">
<webview style="position: absolute; top: 10vh; left:0; width:100vw; height: 90vh;" src="https://www.google.com/"></webview>
</body>
</html>
I figured it out after a ton of trial and error, and I came up with this, which works for any generated webviews within the page after the initialization.
This goes in Main.js
var menu = new Menu();
//Basic Menu For Testing
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log("YES");
} }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));
app.on("web-contents-created", (...[/* event */, webContents]) => {
//Webview is being shown here as a window type
console.log(webContents.getType())
webContents.on("context-menu", (event, click) => {
event.preventDefault();
console.log(webContents.getType())
menu.popup(webContents);
}, false);
});
Related
I want to make a message box which contains yes and no buttons in a electron.js app. I tried to do it with dialog inside the electron. But it didn't work:
const electron = require('electron')
const { dialog } = electron
console.log(dialog) // undefined
const electron = require('electron')
const dialog = electron.remote.dialog
console.log(dialog) // Uncaught Error: Cannot read "dialog" of undefined (remote is undefined)
Then, I tried to do it with dialog which is a module in npm. But it didn't do the thing that I want to do. There wasn't any yes or no buttons also it returned the same responses when I clicked OK or I closed window:
const electron = require('electron')
const dialog = require('dialog')
dialog.info('Are you sure?', 'Confirmation', function(exitCode) {
if (exitCode == 0) {
// Should clicked OK (always response)
}
if (exitCode == 1) {
// Should closed window (but never works)
}
})
What did I do wrong?
You will want to use
Electron's dialog.showMessageBox();
method.
The dialog.showMessageBoxSync();
method would block your main process until a response is received, so you won't want to use that unless intended.
I have placed the creation and management of your dialog box in the main.js file. If you want to move this into its
own file, that's not a problem. All you would need to do is get() the (main) window instance if you want your dialog
box to be a child of the main window.
main.js (main process)
// Import required Electron modules
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronDialog = require('electron').dialog;
const electronIpcMain = require('electron').ipcMain;
// Import required Node modules
const nodePath = require('path');
// Prevent garbage collection
let window;
function createWindow() {
const window = new electronBrowserWindow({
x: 0,
y: 0,
width: 800,
height: 600,
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: nodePath.join(__dirname, 'preload.js')
}
});
window.loadFile('index.html')
.then(() => { window.show(); });
return window;
}
electronApp.on('ready', () => {
window = createWindow();
});
electronApp.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
electronApp.quit();
}
});
electronApp.on('activate', () => {
if (electronBrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// ---
electronIpcMain.on('openDialog', () => {
electronDialog.showMessageBox(window, {
'type': 'question',
'title': 'Confirmation',
'message': "Are you sure?",
'buttons': [
'Yes',
'No'
]
})
// Dialog returns a promise so let's handle it correctly
.then((result) => {
// Bail if the user pressed "No" or escaped (ESC) from the dialog box
if (result.response !== 0) { return; }
// Testing.
if (result.response === 0) {
console.log('The "Yes" button was pressed (main process)');
}
// Reply to the render process
window.webContents.send('dialogResponse', result.response);
})
})
For proper communication between processes, we must
use Inter-Process Communication.
preload.js (main process)
// Import the necessary Electron modules
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;
// Exposed protected methods in the render process
contextBridge.exposeInMainWorld(
// Allowed 'ipcRenderer' methods
'ipcRenderer', {
// From render to main
openDialog: () => {
ipcRenderer.send('openDialog');
},
dialogResponse: (response) => {
ipcRenderer.on('dialogResponse', response);
}
}
);
Finally, your index.html file will listen for a button click. Once clicked, send a message to the main process to open
the
dialog box.
Once a valid response is received from the dialog box, the response is sent back to the render process for processing.
PS: The render
method ipcRenderer.invoke()
could be used instead of
the ipcRenderer.send() method.
But if it was, you would need to handle the "No" or escape (ESC) response in the render process.
index.html (render process)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Electron Test</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
</head>
<body>
<input type="button" id="openDialog" value="Show Dialog">
<hr>
<div id="response"></div>
</body>
<script>
// Open dialog (in main process) when "Show Dialog" button is clicked
document.getElementById('openDialog').addEventListener('click', () => {
window.ipcRenderer.openDialog('openDialog');
})
// Response from main process
window.ipcRenderer.dialogResponse((event, response) => {
if (response === 0) {
// Perform your render action here
document.getElementById('response').innerText = 'The "Yes" button was clicked';
}
});
</script>
</html>
To use more than 2 buttons in your dialog box(es), in the creation of your dialog box you may want to designate
a cancelId and check for all valid return values before actioning anything.
I'm building an app with React and Electron and trying to create a communication channel between the main (electron.js in my case) and renderer processes. By achieving this, I want to access the Store object created in my main process to save user preferences etc.
I have set up a preload script and provided the path in my main.js (electron.js). But when I try to access the method defined in the preload.js from the renderer like this window.electronAPI.sendData('user-data', this.state), it does not recognise the electronAPI (undefined variable electronAPI). Also the console.log in my preload.js is never shown when a window is loaded. Hence I assume the preload script never gets loaded and I don't know why. Any help is very much appreciated!
EDIT: The preload script seems to load now because the console.log gets printed. Maybe preload.js did load before too but I could not see it since I could only access the application by opening localhost:3000 in the browser. Now the app opens in a BrowserWindow. However the 'electronAPI' defined in the preload script cannot be accessed still.
Here is the code:
electron.js (main.js)
const electron = require('electron');
const path = require('path');
const {app, BrowserWindow, Menu, ipcMain} = electron;
let isDev = process.env.APP_DEV ? (process.env.APP_DEV.trim() === "true") : false;
function createWindow (){
const win = new BrowserWindow({
width: 970,
height: 600,
backgroundColor: '#0C0456',
webPreferences: {
nodeIntegration: true,
contextIsolation: true,
enableRemoteModule: false,
preload: path.join(__dirname, 'preload.js')
}
});
//if in development mode, load window from localhost:3000 otherwise build from index.html
try {
win.webContents.loadURL(isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname,'../build/index.html')}`
)
} catch(e){
console.error(e)
}
win.webContents.openDevTools({"mode":"detach"});
//Remove menu
Menu.setApplicationMenu(null);
win.once('ready-to-show', () => win.show());
console.log("main window is shown");
console.log(typeof path.join(__dirname, 'preload.js'));
win.on('crashed',() => {
console.error(`The renderer process has crashed.`);
})
}
app.on( 'ready', () => {
createWindow(); // open default window
} );
ipcMain.on('user-data', (event, args)=>{
console.log(args);
});
preload.js
const {contextBridge, ipcRenderer} = require("electron");
const validChannels = ['user-data'];
console.log("this is the preload script");
contextBridge.exposeInMainWorld('electronAPI', {
sendData: (channel, data) => {
if(validChannels.includes(channel)){
ipcRenderer.send(channel, data);
}
}
})
I'm using an index.html including an iframe. When a page is opened in a new tab with CTRL + Click keys, the properties I defined for BrowserWindow are not applied.
I want to remove the frame of the opened new tab. How can I do it?
const path = require('path')
const {app, BrowserWindow, Menu} = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 1000,
height: 700,
frame: false,
show: false,
})
win.loadFile('index.html')
win.once('ready-to-show', () => { win.show() });
}
const menu = Menu.buildFromTemplate([])
Menu.setApplicationMenu(menu)
app.whenReady().then(() => { createWindow() })
Windows opened via links don't inherit their parents options, instead, you have to register a window open handler and set the options manually:
win.webContents.setWindowOpenHandler(({ url }) => {
return {
action: 'allow',
overrideBrowserWindowOptions: { // These options will be applied to the new BrowserWindow
frame: false,
// other BrowserWindow settings
}
}
}
On the documentation: https://www.electronjs.org/docs/latest/api/window-open#native-window-example
When a popup is created I'd like to display it in a BrowserView.
Is there a way of piping the entire popup request into a BrowserView?
The example below works for simple urls but not for more complex popups (eg window.open creates an about:blank page and uses document.write to generate content). Can be tested with "Method #1.1" on https://webbrowsertools.com/popup-blocker/.
const { app, BrowserWindow, BrowserView } = require('electron')
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600
})
mainWindow.webContents.on('new-window', (event, url, frameName, disposition, options, additionalFeatures) => {
event.preventDefault();
const view = new BrowserView()
mainWindow.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 800, height: 800 })
view.webContents.loadURL(url)
})
mainWindow.loadURL("https://webbrowsertools.com/popup-blocker/")
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 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 (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
I have all my html handlers in a second file (b.js). They look like this:
window.onload = function () {
let btn = window.getElementById('btn');
button.addEventListener('click', fn);
}
This works fine, but I want to make a button to open another window, so I tried adding an exported method in main.js. My full main.js is below:
const {app, BrowserWindow} = require('electron');
let mainWindow;
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 500,
height: 300,
frame: false,
transparent: true,
resizable: false,
webPreferences: {
nodeIntegration: true,
}
});
mainWindow.setResizable(false);
mainWindow.loadFile('index.html');
mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow.quit();
})
}
app.on('ready', createWindow);
module.exports = {
openMainScreen: function () {
mainWindow.loadFile("mainScreen.html");
mainWindow.resizeTo(1200, 800);
}
};
If I try to require(main.js)in b.js as I thought I should: I get this error:
Uncaught TypeError: Cannot read property 'on' of undefined
Pointing to app.on('ready'.... Looking at this post: Cannot read property 'on' of undefined in electron javascript It says the app is starting twice. How can I resolve this?
The way I fixed this was to use electrons built in IPCmain to communicate between javascript that was being rendered with the html and the main javascript that ran the app.
https://electronjs.org/docs/api/ipc-main