一、環境安裝
安裝nodejs
首先需要安裝nodejs，可以到官網下載，不過推薦使用nvs來安裝nodejs。這裏使用的是v11.5.0版本
安裝yeoman
npm -g install yo
安裝generator-web-extension
npm install -g generator-web-extension
二、項目搭建
# 創建項目目錄
mkdir helloworld && cd helloworld
# 生成項目文件
yo web-extension然後根據提示完成項目配置
上圖是詢問是否需要UI Action
No：不需要
Browser：創建瀏覽器級別的UI Action
Page：創建頁面級別的UI Action
本示例選擇Page來進行演示
上圖是詢問是否需要覆蓋一些瀏覽器的默認頁面
No：不需要
Bookmarks Page：覆蓋瀏覽器的書籤頁面
History Page：覆蓋瀏覽器的歷史頁面
Newtab Page：覆蓋瀏覽器的新標籤頁面
本示例選擇No
上圖是詢問擴展需要的頁面或者腳本
Options Page：擴展的設置頁面
Devtools Page：在devtools裏面的頁面
Content Scripts：在訪問頁面中運行的腳本
Omnibox：給地址欄增加的功能
按空格鍵根據需要進行選擇，也可以按a鍵全部選擇，本示例選擇來全部
上圖是詢問這個擴展需要的權限，因爲這個擴展不只可以運行在chrome，還可以運行在firefox等其他一些瀏覽器上，有些權限是chrome瀏覽器不支持的，可以根據需要進行選擇，也可以按a全選，然後後面再刪除掉不支持的權限。這裏爲了簡單先全選。
然後接下來的一路按回車就可以了
項目創建完畢
三、運行項目
編譯項目
npm run dev chrome
可以看到編譯生成了很多文件，生成的擴展目錄是dist/chrome/
用chrome把擴展加載起來
打開chrome的擴展管理頁面，打開開發者模式，加載已解壓的擴展程序，選擇剛纔生成的dist/chrome/目錄
可以看到擴展已經加載了，但是有個錯誤按鈕。點擊這個按鈕查看錯誤信息
前面在選擇權限的時候選擇了所有權限，但是有些權限是chrome不支持的，因此需要把這些權限刪掉
擴展需要的頁面、腳本、配置等都在app/目錄裏面，一般只需要修改裏面的文件就可以了
要修改權限，打開app/manifest.json文件，找到提示的幾個權限全部刪除掉
重新加載一下擴展
修改文件重新編譯有點慢，多點幾次應該就可以了
隨便打開一個頁面，可以看到擴展已經成功運行了
四、打包
npm run build chrome
運行完打包命令之後，會在packages/目錄下面生成擴展的壓縮包
五、其他
使用firefox加載擴展
先進行編譯
npm run dev firefox
用firefox進行加載
firefox需要選中manifest.json文件
可以看到擴展已經運行成功了