Electron 如何给titlebar添加action按钮呢？

Question

如图：

我想要添加几个按钮在titlebar中，
这个titlebar是electron框架自带的，不是我们自己写的，请问如何添加呢？

更新1

我们见VSCode，这里就是在titleBar上添加自定义的按钮。这样的效果是怎么做到的呢？

Answer 1

创建一个创建无边框窗口，然后在那个位置自己写一个标题栏。

毕竟在自定义中没有这样的选项。

---

更新 1：

你或许可以使用 Window Controls Overlay API（WICG、MDN、Electron）来实现该功能。

就像 WICG 的这张图那样，只有红框部分是浏览器提供的控件，其左边部分你可以自己写你想要的按钮。

效果图（来自 WICG）：

---

更新 2：

我手头只有 Windows，你看它的 body，正好缺了右上方一角：

而你看这个，这是一个设置了 display_override 包含 window-controls-overlay 的 PWA，它的 body 也是缺了那一块，所以我认为 VSCode 就是通过 Window Controls Overlay API 来实现的这样的效果。

有了答案之后再去搜索，发现 VSCode 确实在这里设置了属性，并在这里用包含 titleBarOverlay 的对象去初始化了窗口。这种方式和 Electron 文档上的第二个示例的使用方式是一样的：

// on Windows
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
  titleBarStyle: 'hidden',
  titleBarOverlay: {
    color: '#2f3241',
    symbolColor: '#74b1be',
    height: 60
  }
})

所以 VSCode 通过使用 Window Controls Overlay API 来实现你想要的效果。

看到你的评论，我就打开了 VSCode 的源码，但我发现我既读不懂又没时间读，所以我就换了一种方式，不过最终还是回到了源码。