Nativefier 和 Electron 初体验

building-native-apps-with-native-fier.png

---

之前业余做了一个聚合搜索工具，自己使用了大半年，平日里只顾着用它查资料，对于发现的 bug，却一直忍啊忍，直到最近才下决心修理了一波。修理和略作改进之后，自我体验上升了一些，便也想分享给几个朋友用。但是这里还留着个让人很不舒爽的使用障碍，让我犯了纠结。

选择某些搜索引擎时的提示

纠结是因为这么几个问题：

• 要知道很多人使用浏览器，基本都是裸奔的
• 能访问 Chrome 商店也是件奢侈的事
• 用户使用别的浏览器怎么办。Firefox 的插件商店，倒是有几个能实现类似效果的插件，但是推荐哪个插件也是个问题，自己也不可能一一去试用

以前的想法是，把搜索页面打包成一个 Chrome Web App，然后把插件的功能自己实现到 App 中，但这毕竟又是番折腾，始终下不了决心花这份时间。

---

Nativefier

最近无意中发现这个开源项目，Nativefier，看着它的项目介绍，以及1w+ 的 Star，感觉自己错过了一个世纪。

Nativefier is a command line tool that allows you to easily create a desktop application for any web site with succinct and minimal configuration.

我们来分解下这段话，a desktop application, 简直是比好更好，要知道 Chrome Web App 可做不到像在桌面应用一样，按下 cmd + tab / ctrl + tab，切换的那么舒畅。再看 easily create，有多 easy 呢？

nativefier --name "Warmhole Search" "http://warmhole.gadn.in"

收工。

上面的命令执行后，会生成这样一个目录。图中箭头所指，就是预想中的 a desktop application 了。

生成的应用

简单是简单，但这和前面提到的整合插件功能的事情，有什么关联呢？这就要提到 Nativefier 与另外一个伟大的开源项目，Electron 之间的关系了。下面这句话，同样来自 Nativefier 的项目介绍。

Apps are wrapped by Electron in an OS executable

---

Electron

这个项目的名声可要大多了，现在前端界最流行的 Visual Studio Code，以及 GitHub 开源的 Atom，两个非常流行的现代编辑器，都重要地依赖着这个项目。

这里不展开更多的介绍，感兴趣的朋友自会前去搜索。今次只说它的一个特点，Electron 暴露的 API，可以完成 Chrome 暴露给其插件相同的功能。

---

既然 Nativefier 是一个生成器，生成的是一个个被 Electron 包裹的应用，那么如果能找到这个应用的源代码，再用 Eelctron 的 API 做些扩展，就可以实现预期目标了。

扒开生成的应用 - 1

扒开生成的应用 - 2

看到了什么，package.json, 活脱脱一个 nodejs 项目啊。

迫不及待地打开 main.js，再配合着 Electron 的文档及 GitHub Issues，一番探究后，明确了修改点， 找到 registerListener(session, ...)函数，在函数结束前，给 session 对象的 webRequest 注册一个事件回调函数。通过这个函数，来实现之前期望 X-Frame-Options 来达成的效果。

function registerListener(session, opts = {}, cb = () => {}) {
  // ... exists code

  var onHeadersReceived=(d, c)=>{
    if(d.responseHeaders['x-frame-options']) {
      delete d.responseHeaders['x-frame-options'];
    }
    c({cancel: false, responseHeaders: d.responseHeaders});
  }

  session.webRequest.onHeadersReceived({}, onHeadersReceived);
}

因为是脚本语言，保存修改后，再打开应用就可以验证效果。这是原生应用不容易做到的啊。

之后还做了点改动，为了让网页能检测出是否运行在 Electron，还是运行在浏览器里，同样在 main.js 中找好个时机，向页面注入了一句脚本，来给网页中的 window 对象增加一个属性，这样网页中就可以根据这个属性，来区别出运行环境的差异了。

function injectWindowVariable (browserWindow) {
    var injectVariable = function () {
        browserWindow.webContents.executeJavaScript("window.electronFlag=true;");
    }
    browserWindow.webContents.on('did-finish-load', function () {
        // remove the injection of css the moment the page is loaded
        browserWindow.webContents.removeListener('did-get-response-details', injectVariable);
    });

    // on every page navigation inject the css
    browserWindow.webContents.on('did-navigate', function () {
        // we have to inject the css in did-get-response-details to prevent the fouc
        // will run multiple times
        browserWindow.webContents.on('did-get-response-details', injectVariable);
    });
}

function createMainWindow(inpOptions, onAppQuit, setDockBadge) {
  // ...

  // below `maybeInjectCss(mainWindow);`
  injectWindowVariable(mainWindow);
  
  // ...
}

---

之前的几个纠结点，都被强大/伟大的开源项目和社区消解完了。我也不用再担心，分享给朋友后，面对种种疑惑时的尴尬。

对于 Nativefier 和 Electron，一个是相见恨晚，另一个是慕名已久，只叹无缘。今日初识，就结出了不错的成果，而它们都还有非常多好玩的 API，提供着更多的可能性。

参考资料

• https://discuss.atom.io/t/detect-electron-or-web-page-running/33180/8
• Electron 中文文档
• https://github.com/electron/electron/pull/573
• https://github.com/electron/electron/issues/1498