在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的启动目录进行配置。