最近寫了一個可以利用 vue 或者 react 快速開發 chrome 外掛的 boilerplate，只需要使用我之前寫的 bigroom-cli 工具，就可快速簡單地進行啟動、打包、編譯等，同時也支援儲存程式碼後，外掛自動更新，頁面自動重新整理。
boilerplate 生成：
首先我們安裝 bigroom-cli：
npm install -g bigroom-cli
複製程式碼然後生成 chrome 外掛的 boilerplate，這裡可以選擇使用 react 版本，還是 vue 版本:
bigroom generate/g chrome-extension
複製程式碼-
bigroom-react-chrome-extension git：github.com/fe-bigroom/…
-
bigroom-vue-chrome-extension git：github.com/fe-bigroom/…
啟動：
npm start
複製程式碼打包：
npm build
複製程式碼開發目錄檔案：
- manifest.json 中的 vendor.js 是什麼？
"js": ["modules/vendor/vendor.js", "modules/content/content.js"],
"scripts": ["modules/vendor/vendor.js", "modules/background/background.js"]
複製程式碼因為專案內部使用 webpack 打包編譯，所以 這裡的 vendor.js 就是 webpack 使用了 optimization-splitChunks 後分離出來的共同依賴檔案包。
- manifest.json 中 permissions 的 3000 埠是做什麼用的？
"permissions": ["http://*/*", "https://*/*", "http://127.0.0.1:3000/*", "http://localhost:3000/*"]
複製程式碼這套開發模式支援修改程式碼儲存後，正在開發的 chrome 外掛會進行自動重啟，並重新整理當前 tab 的頁面，那麼這個通訊需要服務支撐並需要外掛允許接受此服務的資訊，那麼開發模式下需要允許 http://127.0.0.1:3000/* 或者 http://localhost:3000/*， 否則會出現跨域錯誤。
- manifest.json 中的 content_security_policy 設定
"content_security_policy": "default-src 'self'; script-src 'self' http://127.0.0.1:3000 http://localhost:3000 'unsafe-eval'; connect-src http://127.0.0.1:7001 http://localhost:7001; style-src * 'unsafe-inline' 'self' blob:; img-src 'self' data:;"
複製程式碼因為使用了 webpack 編譯，所以很多指令碼的程式碼的引入會使用外鏈的形式，那麼就需要 chrome 外掛放行這些不安全的外鏈，所以 script-src 需要如上設定；同樣，以為頁面中需要請求服務端的介面， connect-src 也需要放行這些不安全的域名；
- 通訊
目錄中的很多檔案已經有了一些程式碼，這裡主要提供了 background、content、popup 之間的通訊方法。 建議：popup、background、content(inject)之間的通訊建議以 background 作為中間傳遞層，防止維護混亂問題。