NW.js 功能扩展开发

NW.js 即所谓的 Node-Webkit 项目，允许使用 Node 库对 DOM 进行操作，使用 Web 技术进行跨平台的桌面开发。

类似的技术方案是 Electron，都是差不多的思想，相比而言，Electron 更活跃使用的人也更多。

国内某小程序开发者工具用的就是 NW.js 方案，有时候有一些个性化的需求，比如获取页面数据、截图、做一些自动化工作等，需要进行功能扩展开发，下面给出一些实践方向的可能性。

关键原理

前端开发本质上是执行 Js 的过程，只要把我们想执行的脚本注入到其执行文件即可。

以 /Applications/devtools.app/Contents/Resources/package.nw 为例，把定制脚本注入到 js/core/index.js 中。

原始文件是经过混淆的一行代码，只需要增加一行，例如：

setTimeout(() => {
    console.warn("hello world!");
    alert("hello world!");
}, 1500);

这里在打开应用 1.5s 后执行两句代码，一是在控制台打印一条日志，二是显示一个弹窗（会阻塞后续的代码执行）。

获取环境信息

Js 是可以获取到 BOM、DOM、nw 环境信息的，比如：

console.warn(devInfo);
console.warn(document.body);

扩展菜单

可直接修改 nw 对象（具体参考 NW.js 文档）：

// Create an empty context menu
var menu = nw.Window.get().menu
var submenu = new nw.Menu();
// Add some items with label
submenu.append(new nw.MenuItem({
    label: 'Item A',
    click: function(){
    alert('You have clicked at "Item A"');
    }
}));
submenu.append(new nw.MenuItem({ label: 'Item B' }));
submenu.append(new nw.MenuItem({ type: 'separator' }));
submenu.append(new nw.MenuItem({ label: 'Item C' }));
menu.append(new nw.MenuItem({
    label: 'New Menu',
    submenu: submenu
}));
nw.Window.get().menu = menu

高级应用

这里有更多想象空间，只要是 js 能实现的功能，理论上都可以集成到一起。例如：

• 做一个 socket 客户端，接受远程指令
• 实时采集小程序的运行信息
• 无限扩充功能

在使用这些用 Web 技术开发的应用的过程中，有一个感受就是，虽然硬件配置越来越高了，但软件的使用体验并没有越来越好，只是开发人员的效率变高了？这是好事还是坏事的？