如何在电子中为文件制作自定义网址

Posted 2023-03-22

【中文标题】如何在电子中为文件制作自定义网址

【英文标题】：How to make a custom url for a file in electron

【发布时间】：2021-11-11 04:11:15

【问题描述】：

我正在尝试使用 Electron.js 构建一个迷你浏览器。是否可以制作 chrome://settings 或 about:config 之类的网址，以便当用户转到该链接时，我可以显示一个 html 文件？我基本上想将 url 与电子文件相关联。

【问题讨论】：

我假设您的磁盘上有.html 文件，所以您的意思是：“当用户尝试转到chrome://settings 时，如何将他们重定向到file:///electron/path/here/test.html”？

@Joshua 是的，这就是我想要实现的目标，但是在 devtools 和其他任何地方我希望它显示为 chrome://settings

你所说的“其他任何地方”是指什么样的地方？

我的意思是无论我在哪里尝试获取窗口的 src 或者如果我在开发工具中键入 location.href 我想看到 chrome://settings，就像在实际浏览器中一样

我想不出办法，不过如果你有自己的 HTML url 栏，那么你可以更改 url 栏以说出你想要的任何内容。

【参考方案1】：

您可以使用Data URIs，并将您的数据内容进行base64 编码作为链接。您可以use javascript 对二进制数据进行编码和解码，然后您只需在开始时指定 MIME 类型。

例如，如果您在浏览器中访问以下 URL，您将看到 png 已解码并呈现：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

第一个链接中的 MDN Web 文档提到了对 HTML 文件进行 base64 编码的过程。

或者，如果您只想强制下载链接，您可以将add download 属性添加到您的锚点。

【讨论】：

感谢您的回复，但这不是我的意思。我想要的是当用户进入像chrome://settings 这样的页面时，我想显示一个像setttings.html 这样的文件。

【参考方案2】：

您可以使用did-start-navigation 检测他们何时转到chrome://settings/，然后拦截并告诉它转到https://***.com/。

代码如下：

mainWin.webContents.on('did-start-navigation', function (evt, navigateUrl) 
    if (navigateUrl == 'chrome://settings/') 
        evt.preventDefault();
        setTimeout(function ()  // Without this it just crashes, no idea why.
            mainWin.loadURL('https://***.com/');
        , 0);
    
);

我尝试了 `will-navigate` 事件，但没有成功。

Docs for: did-start-navigation

【参考方案3】：

在 npm 上稍作搜索后，我找到了一个完全符合我要求的包，它是 electron protocols。在 Electron 中添加自定义 protolc 是一种简单的方法，下面是一个示例”

const protocols = require('electron-protocols');
const path = require('path');    
protocols.register('browser', uri => 
   let base = app.getAppPath();
      if(uri.hostname == "newtab")
            return path.join(base,"newtab.html")
      
 );

在本例中，如果您转到链接 browser://newtab，它将打开 newtab.html。如果你在 DevTools 中输入 location.href 它也会显示 browser://newtab