在NW.js项目中安装浏览器扩展

NW.js中可以使用浏览器扩展,猛的一听好像挺不可思议的,但是node-webkit本身是基于chromium开发,chrome可以做的事,这个框架多半也可以做。

我们在使用浏览器时,可能会因为它的扩展丰富而选择某款浏览器。浏览器扩展可以做很多事情,比如中英互译、图片采集、截屏、收藏夹、笔记本、网址动态生成二维码等,这里趁机推荐几款chrome扩展:

一键收纳所有Chrome标签:OneTab

JSON格式化:JSON Viewer

Github可视化代码树:Octotree

分析网站的编程语言:Wappalyzer

vue神器:Vue.js devtools

另外再推荐一款Chrome应用,模拟请求:postman。

回归正题,让我们在NW.js开发的桌面APP里使用浏览器扩展吧。接下来我们整合NW.js和Vue-cli,利用Vue.js开发一款桌面APP,当然我们的目的并不是真的开发这么一款应用,而是为了安装Chrome扩展——Vue.js devtools,进行Vue.js的日常开发调试。首先,我们需要一个集成NW.js的Vue项目,如何把NW.js加入Vue工作流中,具体操作步骤可以查看这篇文章:

https://github.com/anchengjian/anchengjian.github.io/blob/master/posts/2017/vuejs-webpack-nwjs-2.md 。

启动Vue项目后,长这个样子:

看看开发者面板:

是时候把Vue.js devtools安装进来了。首先,我们得有一份devtools的源码,可以从github上拉取代码然后编译,或者直接从网上找同胞们已经处理好的源码,比如这里:

https://segmentfault.com/a/1190000009682735。

把解压后的devtools扩展源码放在Vue项目下的static文件夹下,如下图所示:

还差一步,在配置文件中添加以下内容:

如下所示:

然后重新启动应用,vue-devtools就安装成功了。再次看看我们的NW.js devtools面板:

在安装浏览器扩展的时候可能会遇到相对路径的问题,软件启动目录是根目录,所以扩展的路径得相对于NW.js的启动目录进行配置。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180629G1V7AW00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券