I'm looking to make an Electron window have a transparent background, but keep its window chrome.
I used the following:
const previewWindow = new BrowserWindow({
width: 800,
height: 600,
x: 1000,
y: 100,
transparent: true,
webPreferences: {
nodeIntegration: true
}
});
I also set the following CSS on the body of the page being displayed in the window:
background: transparent;
I also tried background: none.
The window still have the default white background.
Is it possible to have a transparent window in Electron without it being frameless?
Related
I also looked for solutions to other problems, but they did not turn out as I wanted. How can I delete the top bar of the window, as I marked in the photo?
[photo]
native APIs directly supports frameless windows. You need to pass the frame option false while creating new window. Here is the example.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()
You can read more at official docs
I'm making a game with Phaser 3.
It creates a canvas at the center of the page and displays the game screen in it.
Display the canvas in the Electron window.
At that time, I would like to display the canvas without zooming in or out.
The canvas size is width: 800 px, height: 600 px.
So I wrote the following code:.
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
resizable: false,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: (process.env.ELECTRON_NODE_INTEGRATION as unknown) as boolean,
preload: path.join(__dirname, 'preload.js'),
},
});
The following window appears.
The orange part is canvas.
When I checked in Developer Tools, width: 800 px, height: 600 px are correct.
However, the size of the was width: 777 px, height: 604 px.
This value differs from the width: 800 px, height: 600 px that I specified when I created the Electron window.
Because of that, the scroll bar is displayed.
Why does Electron generate windows smaller than the size I specified when creating them?
Does anyone know why this happens?
How do I fix the size of to width: 800 px, height: 600 px?
The version of Electron is 9.2.1.
You need to add the useContentSize property set to true to the options of new BrowserWindow():
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
useContentSize: true,
resizable: false,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: (process.env.ELECTRON_NODE_INTEGRATION as unknown) as boolean,
preload: path.join(__dirname, 'preload.js'),
},
});
See options of new BrowserWindow():
useContentSize Boolean (optional) - The width and height would
be used as web page's size, which means the actual window's size will
include window frame's size and be slightly larger. Default is false.
I am using electron version 8.2.5. The window height increases after minimize and restore and goes below my task bar.
const electronScreen = screen;
const size = electronScreen.getPrimaryDisplay().workAreaSize;
win = new BrowserWindow({
x: (size.width / 2) - (550 / 2),
y: 0,
width: 550,
height: size.height,
frame: false,
resizable: false
});
I googled it and found this workaround to set size on restore event:
win.on('restore', () => {
win.setSize(550, size.height);
});
But when doing that the window flickers twice after minimize and restore. Is there any other way to rectify this?
Instead of using workAreaSize, try to use size.
const electronScreen = screen;
const size = electronScreen.getPrimaryDisplay().size;
I'm using electron 8.2.4 but works for me and I don´t have to use the event on restore.
Using ElectronJS, how do you change an existing frameless window into a framed window?
Something like this:
const splashWindow = createWindow('splash', {
width: 500,
height: 300,
frame: false,
});
splashWindow.addFrame();
// Now splashWindow has a frame
You can only set frame when creating a BrowserWindow
I've got an electron app, below is the main.js file:
var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;
app.on('ready', function() {
mainWindow = new BrowserWindow({
height: 715,
width: 1200,
minWidth: 600,
minHeight: 200,
center: true
});
mainWindow.loadURL('file://' + __dirname + '/index.html');
});
As you can see, the width and height are specified. What I want is for the app to open, but take up all of the available screen (but NOT to be in full screen, such that the dock and tool bar of the OS are hidden).
In simple CSS this is done by using
width:100%;
height:100%;
I want to be able to reproduce this in my electron app, although cannot seem to find any details on how to do it
Note: fullscreen: true is not what I am looking for, as that makes the app open so that the dock and toolbar are hidden
Can anyone help?
use this!
win = new BrowserWindow({show: false});
win.maximize();
win.show();
Call mainWindow.maximize() to maximize the window after you create it.
Use this:
const electron = require('electron')
const { app, BrowserWindow } = electron
let win
app.on('ready', () => {
const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize
win = new BrowserWindow({width, height})
win.loadURL('https://github.com')
})
try this code after your mainWindow declaration
mainWindow.once('ready-to-show', () => {
mainWindow.maximize()
})
It worked for me
The solution is simple, only add titleBarStyle: 'hidden' to declaration of your window.
const mainWindow = new BrowserWindow({
movable: false,
resizable: false,
maximizable: false,
minimizable: false,
titleBarStyle: 'hidden', // watch this line
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
DevTools: false,
}
});
note that I only have tested on Windows OS and it can be change in other OS like Mac.