在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的啟動目錄進行配置。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！