NW.js中如何使用浏览器扩展

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

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

• 一键收纳所有Chrome标签：OneTab
• JSON格式化：JSON Viewer
• Github可视化代码树：Octotree
• 分析网站的编程语言：Wappalyzer
• vue神器：Vue.js devtools

另外在推荐一款Chrome应用，模拟请求：postman。现在，postman已经提供了 Windows、MacOS 和Linux 的独立安装版本。

回归正题，让我们在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
npm run dev启动Vue项目后，长这个样子：

用 vue 和 webpack 快速建构的 NW.js 项目
看看开发者面板：
NW.js devtools
是时候把Vue.js devtools安装进来了。首先，我们得有一份devtools的源码，可以从github的代码会拉取源码然后编译，或者直接从网上找同胞们已经处理好的源码，比如这里：
https://segmentfault.com/a/1190000009682735
把解压后的devtools扩展源码放在Vue项目下的static文件夹下，如下图所示：
加入Vue.js devtools扩展源码

还差一步，在package.json配置文件中添加以下内容：

"chromium-args": "--load-extension='static/vue-devtools'",

如下所示：

扩展使用配置

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

带有vue-devtools的开发者工具
在安装浏览器扩展的时候可能会遇到相对路径的问题，软件启动目录是根目录，所以扩展的路径需要留意，它得相对于NW.js的启动目录进行配置。