I want to create a custom title bar / controls to show above the remote URL that is loaded in an electron app.
For example, let's say i have a file called title.html:
<div>
<button onclick="window.history.forward()">Go Forward</button>
<button onclick="window.history.back()">Go Back</button>
</div>
let's say i'm loading the youtube URL in my electron app:
const createWindow = () => {
const window = new BrowserWindow({
width: 800,
height: 600,
titleBarStyle: 'hiddenInset',
})
window.loadURL('https://youtube.com')
}
how do i have my title.html always show above youtube so i can add back & forward buttons and other stuff?
I think the strategy here is to load your title.html into the BrowserWindow, and then create a BrowserView that hosts youtube and position it appropriately.
(In my app, I use frame: false and not hiddenInset, but hopefully a similar idea can apply here)
import * as path from "path";
import { BrowserWindow, BrowserView } from "electron";
const TITLEBAR_HEIGHT = 50; // px
const createWindow = () => {
const window = new BrowserWindow({ width: 800, height: 600, titleBarStyle: 'hiddenInset' })
const browserView = new BrowserView({ webPreferences: { sandbox: true, contextIsolation: true });
window.setBrowserView(browserView);
// load your titlebar page
await window.loadFile(path.join(__dirname, "./index.html"))
// position the titlebar
const contentBounds = window.getContentBounds();
browserView.setBounds({ x: 0, y: 0, width: contentBounds.width, height: contentBounds.height - TITLEBAR_HEIGHT });
browserView.setAutoResize({ width: true, height: true });
browserView.loadURL('https://youtube.com');
}
And you'd set up the height of your titlebar in your stylesheet:
<div id="titlebar>
...
</div>
#titlebar {
height: 50px;
}