So I'm experiencing issue when I'm trying to make a window transparent. I made tranparent: true, frame: false but it doesn't really work. It removes the frame and stuff but doesn't do what I want till the end. I want it to be like really transparent. What I get is a: frameless window which is not transparent.

Help would be appreciated. Some code:

main.js

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const { maxHeaderSize } = require('http')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: maxHeaderSize,
    height: maxHeaderSize,
    transparent:true,
    frame: false
  })

  // and load the index.html of the app.
  mainWindow.loadFile('bodycam.html')
  

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.whenReady().then(() => {

  function onAppReady() {
    createWindow()

    app.on('activate', function () {
      // On macOS it's mon 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()
    })
  }

  setTimeout(onAppReady, 300)
  
})

// Quit when all windows are closed, except on macOS. There, it's mon
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process

some part of the code (that affects html body) from style.css (that's being linked with bodycam.html)

body {
    margin: 0px auto; 
    overflow: hidden; 
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
}

So I'm experiencing issue when I'm trying to make a window transparent. I made tranparent: true, frame: false but it doesn't really work. It removes the frame and stuff but doesn't do what I want till the end. I want it to be like really transparent. What I get is a: frameless window which is not transparent.

Help would be appreciated. Some code:

main.js

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const { maxHeaderSize } = require('http')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: maxHeaderSize,
    height: maxHeaderSize,
    transparent:true,
    frame: false
  })

  // and load the index.html of the app.
  mainWindow.loadFile('bodycam.html')
  

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.whenReady().then(() => {

  function onAppReady() {
    createWindow()

    app.on('activate', function () {
      // On macOS it's mon 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()
    })
  }

  setTimeout(onAppReady, 300)
  
})

// Quit when all windows are closed, except on macOS. There, it's mon
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process

some part of the code (that affects html body) from style.css (that's being linked with bodycam.html)

body {
    margin: 0px auto; 
    overflow: hidden; 
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
}

• javascript
• electron

• Please visit help center, take tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output, preferably in a Stacksnippet – mplungjan Commented Jul 4, 2021 at 9:55
• @mplungjan hi. Um I'd like to know if my question is clear enough. If it is not, I could explain more what I would like to get as a result of the code. – Nihad Badalov Commented Jul 4, 2021 at 10:05
• Did you check other questions, like stackoverflow./questions/53538215/… ? – Daantje Commented Jul 4, 2021 at 10:27

1 Answer 1

Why you are facing this issue

In your case, you are facing this issue because you are trying to define the size of the window from the maxHeaderSize value, wich es from the http Node API. And this... Actually makes no sense. The value of maxHEaderSize is probably way bigger than the size of your screen. Electron seems to be suffering when creating a transparent window that big.

How to fix

You just need to remove that crazy value when creating your BrowserWindow. For example :

const mainWindow = new BrowserWindow({
    transparent: true,
    frame: false,
})

If you want to set your window at the same size of your screen, you can use the fullscreen option :

const mainWindow = new BrowserWindow({
    transparent: true,
    frame: false,
    fullscreen: true,
})

Finally, if you want your user to be able to "click throught the window", you probably will be interested in the setIgnoreMouseEvents method :

const mainWindow = new BrowserWindow({
    transparent: true,
    frame: false,
    fullscreen: true,
})
mainWindow.setIgnoreMouseEvents(true)