Electronで半透明のウィンドウの作り方がわかったので、ここにメモしておきます。
index.js
'use strict';
var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({
width: 400,
height: 600,
transparent: true,
frame: false,
});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>半透明テスト</title>
<style>
html { height: 100%; width: 100% }
body {
-webkit-app-region: drag;
-webkit-user-select: none;
margin: 0;
height: 100%;
width: 100%;
opacity:0.5;
}
#main {
height: 100%;
width: 100%;
background-color: black;
color: white;
}
</style>
</head>
<body>
<div id='main'>半透明のウィンドウ</div>
</body>
</html>
CSSで強引にやってる感じが否定できませんが、とりあえず目的は果たせているのかなｗ