为 Electron 项目添加自定义标题栏

Question

我是 electron 和 node.js 的新手，所以我决定构建一个应用程序来提取有关操作系统、CPU、RAM、GPU 等的关键信息。（是的，就像 CPU-Z、GPU-Z 和 Speccy）

我想使用此处的 VS Code 自定义标题栏https://github.com/Cristian006/frameless-titlebar。唯一的问题是我按照步骤（我认为）正确执行，但标题栏无法加载。repo 提到在“应用程序的根容器渲染方法”上添加代码，但当我安装 electron 并通过命令启动它时，npm init我找不到任何渲染文件，尽管我在其中创建并添加了代码（并且还在<script>主窗口的 HTML 文件中尝试），但我仍然没有成功。

由于我缺乏经验，我认为我做错了什么。有人能一步一步地指导我如何彻底使用这个库/API吗？我主要使用 JavaScript 和 HTML/CSS，而不是 TypeScript。

Answer 1

您发布的链接提到它是为 electron 中的 react 应用构建的。由于您说您没有这些文件，我假设您没有为您的项目安装 react。另一个非常相似的标题栏是自定义电子标题栏。

第二个注意事项是，electron 实际上是一款非常出色的浏览器。这意味着您可能会向用户显示一个网站或提供一个由 electron 渲染的 html 文件。对于这两个标题栏，代码都需要放在显示页面的 javascript 中，而不是被 electron 调用的 javascript 中。这有多种原因

1. 在 main.js 电子代码中，没有窗口可以显示任何内容，您需要自己打开一个窗口，然后将文件或网页加载到其中。
2. 服务器和浏览器 javascript 之间存在差异，因为浏览器会注入这些模块使用的各种全局常量。