【Electron】アプリの背景を透明にしてマウスイベントも拾わせない

Electronでデスクトップアプリを作りました。 その中で

• 背景を透明にしたい
• フレームを消したい
• サイズを変えてほしくない
• ウィンドウに影をつけない（背景を透明にしたときに文字の影のような者が出てきていた）
• マウスでクリックさせたくない（選択などもできないようにする）
• 開発者モードを開いてほしくない

という設定をしたので、それのメモです。 あまりネットでまとまっているものがなかったので、参考までに。

package.json の main で定義している main.js にてウィンドウを開くときに設定を追加していきました。

const { BrowserWindow } = require("electron")

function createClapWindow() {
  // ウィンドウを作る
  const mainWindow = new BrowserWindow({
    transparent: true,   // ウィンドウを透明にする
    frame: false,     // フレームをなくす
    resizable: false,    // 画面の大きさを変えさせない
    hasShadow: false,    // ウィンドウに影をつけない
    webPreferences: {
      devTools: false       // 開発者モードを表示させない
    }
  })
  mainWindow.setIgnoreMouseEvents(true)     // マウスイベントを無視させる
  mainWindow.loadFile('public/index.html')
}

この設定で、Electronのブラウザらしさが無くなって、デスクトップアプリっぽく動いてくれました。

参考リンク BrowserWindow | Electron