See You Again

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 中。

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

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

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

获取环境信息

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

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

扩展菜单

可直接修改 nw 对象(具体参考 NW.js 文档):

  1. // Create an empty context menu
  2. var menu = nw.Window.get().menu
  3. var submenu = new nw.Menu();
  4. // Add some items with label
  5. submenu.append(new nw.MenuItem({
  6. label: 'Item A',
  7. click: function(){
  8. alert('You have clicked at "Item A"');
  9. }
  10. }));
  11. submenu.append(new nw.MenuItem({ label: 'Item B' }));
  12. submenu.append(new nw.MenuItem({ type: 'separator' }));
  13. submenu.append(new nw.MenuItem({ label: 'Item C' }));
  14. menu.append(new nw.MenuItem({
  15. label: 'New Menu',
  16. submenu: submenu
  17. }));
  18. nw.Window.get().menu = menu

高级应用

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

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

2020-08-06 喜欢

Copyright © 2015-2020 BY-NC-ND 4.0

回到顶部 ↑