不得不說 Chrome 給前端帶來了無限的可能，Chrome 插件更是如虎添翼，讓開發者有了更大的操作權限。
這樣，我們就可以做很多有趣的事情了。
一、寫在前面
對於很多開發者來說，通篇的概念可能會讓人感到厭煩。所以，咱們先繞開一些預備知識，進行簡單的實踐。
採用「自頂向下」的學習方式，我們先來看一個具型的東西，稍後再逐步深入概念和內在原理。
本文將會一步步去搭建一個 Chrome 插件開發環境，採用 React 來實現基本功能。
二、簡單瞭解
Chrome 插件是一系列文件的集合，這些文件包括 HTML文件、CSS樣式文件、JavaScript腳本文件、圖片等靜態文件以及 manifest.json。
說白了就是：
Chrome 擴展更像是一個運行於本地的網站，只是它可以利用 Chrome 平臺提供的豐富的接口，獲得更加全面的信息，進行更加複雜的操作。
三、創建項目
因為選擇了採用 React 來開發，所以我們可以使用腳手架來生成最基本的項目結構。
首先，安裝 create-react-app
然後，初始化項目：
進入 public 目錄，修改文件：mainfest.json：
設計幾個不同尺寸的 icon，放入 image 目錄下。
圖片就緒，此外我們還需要創建一個腳本 background.js：
最終 public 下目錄結構大概如此：
稍後我會對參數做詳細說明，所以這裡我們只實現插件的最小閉環。
四、構建
按照上面的步驟，我們開發了一個極其簡單的功能，打個包先：
注意觀察 dist 目錄下的文件變化。
五、如何運行
Chrome 瀏覽器打開：chrome://extensions，選擇「加載已解壓的擴展程序」。看到如下圖：
需要注意：將插件目錄指向我們上文構建出的 dist 目錄。
安裝完之後，頁面和頁頭工具欄都會出現我們新開發的插件，如下圖：
看到這個界面，就表明我們的插件已經完美運行了。
六、異常
奇怪的是，插件導入後，並沒有運行，我們看到了如下的警告：
Refused to execute inline>
大概意思是違反了 CSP 原則，這裡大概提一下，詳細請看另一篇文章：
說白了其實 CSP 是一種安全策略，Chrome 插件不允許如此操作。
到這裡其實已經明確了，使用 Create-React-App 創建的項目，在我們構建的時候，默認將 js 打包為內聯，所以
違反了 CSP 原則，我們修改一下打包命令：
請注意：我們增加了 INLINE_RUNTIME_CHUNK=false 用來控制打包的 js 文件。
好了，現在再次安裝 Chrome 插件就不會有任何問題了。細節問題，可以查看我的 Demo：
https://github.com/chenfengyanyu/my-web-accumulation/tree/master/chrome-extension
七、補充說明
上面我們完成了一個簡單的 Chrome 插件，細心的童鞋可能發現了，文件中創建了 background.js，這是什麼意思呢？
這裡大概提一下：
1.background 層，chrome 插件底層，控制整個 chrome 插件的大腦，具有最高權限；
2.content 層，content-script 腳本工作平臺，本質上是 chrome 插件腳本注入層，權限最低只能影響頁面DOM ，不能跨域操作，但是可以通過 chrome.runtime.sendMessage 與 background 層交互；
3.popup/option 層，UI 交互層，權限中等，可以直接使用 background 的實例對象，也可以通過消息與 content 層交互。
這是開發 Chrome 插件中最重要的三個層概念，後面我們還會著重去講解。
八、關於調試
插件的開發過程，我們需要不斷調試。因為插件的獨特性，所以不同的層，調試方式是不同的。
1.popup.html 調試： 右鍵點擊 popup 圖標，選擇「審查彈出內容」；
2.content_script 調試：devtool -> sources -> Content>
3.background 調試： chrome://extensions/ 激活開發者模式，點擊對應插件「檢查視圖」後的「背景頁」；
九、驗證，打包
1.驗證
打開網址：chrome://extensions/，選擇開發者模式，選擇加載已解壓的擴展程序，選擇我們編寫的根目錄即可。
如果出現類似文章開頭展示的最終效果，並能實現想要實現的功能，表示驗證成功；如果失敗，請修改代碼，重新執行此驗證流程。
2.打包
打開網址：chrome://extensions/，選擇開發者模式，選擇打包擴展程序，選擇根目錄，下面的 key 為空即可，最後選擇打包擴展程序即可；
如果打包失敗，請根據錯誤提示信息修正，如果打包成功，會在與根目錄同級的目錄中生成 CRX 插件文件和 PEM 秘鑰文件。
十、總結
文章主要從項目構建，插件運行，異常處理，調試，打包發佈等方面出發，完整的梳理了開發 Chrome 插件的過程。
一個完整的示例，可以很快幫你入門。
在知道了整個輪廓之後，我們需要進一步的摸索，所以後續文章會增加一些難度。
1.
2.
3.
閱讀更多 F2EAwesome 的文章
