如何为电子文件制作自定义 url

Question

我正在尝试使用 Electron.js 构建一个迷你浏览器。是否可以使 urls 像 chrome://settings 或 about:config，这样当用户转到那个 link 我可以显示一个 html文件？我基本上想将 url 与电子文件相关联。

Answer 1

您可以使用Data URIs, and base64-encode the contents of your data as a link. You can use Javascript编码和解码二进制数据，然后您只需在开始时指定 MIME 类型即可。

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

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

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

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

Answer 2

您可以使用 did-start-navigation 来检测他们何时去 chrome://settings/ 然后拦截它并告诉它去 https://whosebug.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://whosebug.com/');
        }, 0);
    }
});

_{我尝试了 `will-navigate` 事件，但它没有用。}

Docs for: did-start-navigation

Answer 3

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

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")
      }
 });

在此示例中，如果您转到 link 浏览器://newtab，它会打开 newtab.html。如果你输入 location.href DevTools，它也会在那里显示 browser://newtab

如何为电子文件制作自定义 url

How to make a custom url for a file in electron

html

javascript

css

node.js

electron