I'm trying to load a website, and then changing it's DOM (and present it back..)
I got the part of taking the DOM elements, but I can't parse it back to the document.
how should I do that (the createWindow is living inside of the ready ) ?
function createWindow () {
mainWindow = new BrowserWindow({
width: 1900,
height: 600
})
mainWindow.webContents.executeJavaScript(
`require('electron').ipcRenderer.send('gpu', document.body.innerHTML);`)
ipc.on('gpu', (_,gpu)=> {
console.log(gpu)
})
mainWindow.loadURL('http://google.com');
mainWindow.on('closed', () => {
mainWindow = null
})
}
Related
I have the following scenario: when I minimize the main window, the main window hides and a child window opens, and when I click on it, the main window opens again and the child window closes.
main.js
app.on("ready", () => {
// Main window
const mainWindow = windows.createMainWindow(app);
provider.generateProviderData(mainWindow)
const ses = mainWindow.webContents.session
// Display Dev Tools
//mainWindow.openDevTools();
// Quit when all windows are closed.
app.on("window-all-closed", () => {
app.quit()
});
ipcMain.on("windowControls:maximize", (ipcEvent) => {
const minimizedWindow = findBrowserWindow(ipcEvent)
const mainWindow = minimizedWindow.getParentWindow()
const minimizedWindowPosition = minimizedWindow.getPosition()
mainWindow.setPosition(minimizedWindowPosition[0], minimizedWindowPosition[1])
mainWindow.show()
minimizedWindow.close()
})
ipcMain.on("windowControls:minimize", (_ipcEvent) => {
mainWindow.hide()
windows.createMinimizedWindow(mainWindow)
})
function findBrowserWindow(ipcEvent) {
return BrowserWindow.fromWebContents(ipcEvent.sender)
}
});
window.js
exports.createMinimizedWindow = (parent) => {
const minimizedWindow = new BrowserWindow({
width: 220,
height: 50,
frame: false,
resizable: false,
transparent: true,
alwaysOnTop: true,
parent: parent,
webPreferences: {
preload: path.join(__dirname, "../preload.js"),
},
})
minimizedWindow.loadFile("minimized.html")
const parentPosition = parent.getPosition()
minimizedWindow.setPosition(parentPosition[0], parentPosition[1])
return minimizedWindow
}
The problem is that on Windows platform it works ok, but on MacOs it does not work and always keeps the parent window behind the child and does not keep hidden.
I use BrowserView as window devtoolswebcontents. It’s work fine. but there no context menu popup if i right click at like <div></div>dom element in elements tab. Can i get context menu like chrome devtools ?
test code:
const {
app,
BrowserWindow,
BrowserView
} = require('electron')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
/**
* commend out this code , It will popup context menu
* else devtools dont popup context menu
* ========== start **/
const serviceViewDevTools = new BrowserView();
win.setBrowserView(serviceViewDevTools);
serviceViewDevTools.setBounds({
x: 400,
y: 30,
width: 400,
height: 600
});
serviceViewDevTools.setAutoResize({
width: true,
height: true
});
// =============== end
win.on("ready-to-show", () => {
const contents = win.webContents
// and commend out this line , It will popup context menu
contents.setDevToolsWebContents(serviceViewDevTools.webContents);
contents.openDevTools({
mode: 'detach'
})
})
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
These are the only four attributes mentioned in docs.
(1) minimizable
(2) maximizable
(3) fullscreen
(4) fullscreenable
While former two specify that these aren't implemented on Linux, the latter two are for mac only.
So, how do I prevent user from making the window occupy full screen on Linux? And what's the point of having max height and max width properties then (I can't drag and resize beyond those but I can still maximize the window)?
Code:
const { app, BrowserWindow,Menu } = require('electron');
const path = require('path');
require('electron-reload')(__dirname, {
electron: path.join(__dirname,'..', 'node_modules', '.bin', 'electron')
});
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit();
}
let mainWindow;
const createWindow = () => {
mainWindow = new BrowserWindow({
width: 550,
height: 500,
skipTaskbar: true,
maxWidth:1000,
maxHeight:800,
show:false,
fullscreenable:false,
fullscreen: false,
maximizable: false
});
mainWindow.loadURL({url});
mainWindow.once('ready-to-show', () => {
mainWindow.show()
})
mainWindow.on('closed', () => {
mainWindow = null;
});
};
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
Indeed, as said in the docs, maximizable has not been implemented in Linux.
I have not found a "proper" solution, but a work-around.
You should be able to listen to the maximize event, and then call the unmaximize method (I don't see any warning about this event or method about Linux so they should be available). So essentially you would "cancel" the maximizing.
mainWindow.on('maximize', () => {
mainWindow.unmaximize()
});
set resizable key to false:
mainWindow = new BrowserWindow({
resizable: false
});
This should disable the fullscreen button on the m
i'm very new to electron, but loving it. However, i am stuck on one thing, so after some guidance if possible.
i have a small test app, that i will be using for users to login in to a page.
in my main.js file i set the mainWindow properties as below:
function createWindow() {
mainWindow = new BrowserWindow({frame:false,
width: 1024,
height: 565,
minWidth: 1024,
minHeight: 565,
frame: false,
resizable: false,
show: false,
center: true,
backgroundColor: '#312450',
icon: path.join(__dirname, 'assets/icons/png/64x64.png')
})
mainWindow.loadURL(`file://${__dirname}/login.html`)
mainWindow.once('ready-to-show', () => {
mainWindow.show()
})
//mainWindow.webContents.openDevTools({detach: true})
mainWindow.on('closed', function() {
mainWindow = null
})
}
and then launch this in the app.on event.
This is all good so far.
I also add an eventlistener to a button in the login.html page as follows:
btnSignIn.addEventListener('click', function(){
const email = txtEmail.value;
const pass = txtPassword.value;
firebase.auth().signInWithEmailAndPassword(email, pass).then(function(){
document.location.href = 'loggedin.html';
}).catch(function(error){
if(error != null){
alert(error.message);
return;
}
})
},false);
This is all working perfectly well. The only issue i have is that i'd like the second page (loggedin.html) to be a different size.
I presume i have to change the mainWindow options specified previously, but i am unable to acheive it.
any pointers are greatly appreciated.
Regards
J
In your renderer process (js script loaded from login.html) you should be able to load Electron and Node modules.
const {ipcRenderer} = require('electron');
// Right after the line where you changed the document.location
ipcRenderer.send('resize-me-please')
In main.js
const {ipcMain} = require('electron')
ipcMain.on('resize-me-please', (event, arg) => {
mainWindow.setSize(width,height)
})
To add to Leonardo's answer, if your application may have multiple windows, you can resolve the sender window by pulling that from the IPC event, like so:
main.js
const {ipcMain} = require('electron')
ipcMain.on('resize-window', (event, width, height) => {
let browserWindow = BrowserWindow.fromWebContents(event.sender)
browserWindow.setSize(width,height)
})
Renderer
const {ipcRenderer} = require('electron');
// ...
ipcRenderer.send('resize-window', 1280, 720)
I have an Electron app + Vue for rooting. I am having problems loading the content into a newly opened window. The window is launched from a Vue component. When it opens I get a blank window and:
Not allowed to load local resource: file:///app/src/Products.vue
I have tried different methods mentioned on stackoverflow but the error still persists.
<style scoped>
</style>
<template>
<div class="container-fluid">
Parent window...
<button type="submit" class="btn btn-primary" v-on:click="add">+ Add Product</button>
</div>
</template>
<script>
export default {
methods: {
add: function () {
const remote = require('electron').remote
const BrowserWindow = remote.BrowserWindow
let win
win = new BrowserWindow({
height: 600,
width: 800
})
win.loadURL(`file://${__dirname}/app/src/Products.vue`)
win.openDevTools()
}
}
}
</script>
In your case, child window must be created from the main process to launch a child window with local resources in Electron. You can use ipc (ipcMain, ipcRenderer) for this.
For example,
In main process :
function createChildWindow(payload) {
let child = new BrowserWindow({ parent :mainWindow
});
child.loadURL(url.format({
pathname: path.join(__dirname, 'child.html'),
protocol: 'file:',
slashes: true,
}));
child.once('ready-to-show', () => {
child.show()
});
}
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // prints "ping"
createChildWindow(arg);
});
In renderer process(web page) :
const {ipcRenderer} = window.require('electron')
async launchChildWindow(){
ipcRenderer.send('asynchronous-message', '<payload>');
}
You can also write custom events like this,
// Renderer process
ipcRenderer.invoke('some-name', someArgument).then((result) => {
// ...
})
// Main process
ipcMain.handle('some-name', async (event, someArgument) => {
const result = await doSomeWork(someArgument)
return result
})