快速利用 vue 或者 react 開發 chrome 插件

原文連接：github.com/lzwaiwai/bl…

最近寫了一個能夠利用 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
複製代碼

開發目錄文件：

1. 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 後分離出來的共同依賴文件包。

2. 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/*， 不然會出現跨域錯誤。

3. 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 也須要放行這些不安全的域名；

4. 通訊

目錄中的不少文件已經有了一些代碼，這裏主要提供了 background、content、popup 之間的通訊方法。 建議：popup、background、content(inject)之間的通訊建議以 background 做爲中間傳遞層，防止維護混亂問題。