使用React快速開發Chrome擴展程序

首先要說明的是這個文章其實屬於翻譯或者說轉述，我是從google上搜索到了這篇原文，而且用它的構建流程成功開發了一個擴展，很爽，速度很快，五分鐘直接進入擴展開發，不須要花費太多的精力在構建開發環境上，不過可能還會有一些不太方便的方，下面會講到。 咱們開始吧！

全局安裝 create-react-app

npm install –g create-react-app

構建你的應用程序

請隨意命名

create-react-app reactextension

修改mainfest文件

進入你的開發目錄，public/mainfest.json是你擴展的主要入口，刪除他的全部內容，寫入以下內容

chrome擴展將會依賴這個文件加載頁面

{
  "short_name": "React App",
  "name": "React Extension",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "React Ext"
  },
  "version": "1.0"
}

接下來你須要運行一次 yarn build 來初次打包，你的程序將會輸出到dist文件內

加載你的擴展程序

打開你的Chrome擴展中心 chrome://extensions ，請確保勾選開發者模式，拖入你的dist文件夾

OK! 恭喜你，你的應用程序應該已經成功的加載到了chrome擴展列表中，快去嘗試打開它吧！若是你想要進一步的修改圖標名稱等，請修改mainfest文件，圖標圖片放置在public目錄中，這裏要談到一點惋惜之處，就是 yarn dev 模式下並不能加載這個擴展，我我的推薦你在dev模式下以一個普通網頁的方式去dubug一部分，待到累積必定功能的時候，再去build一下看看效果。

最後 來推薦一下我開發的擴展（已是第三次重寫了，前兩次都沒用框架，複用性確實比較差）

徹底開源，你徹底能夠clone下來自行編譯改進，從功能上講，他的主要目的就是幫我排雷，評分特別低的片就不須要去看了，同時爬了某電影資源網站的信息，能夠進行快速的下載，你徹底能夠經過他來快速的查看最近有沒有值得看的爽片!

DaDa Movie for github
@Mackenzie Higa

最後，感謝大家的閱讀! 有興趣能夠來個人博客看看blog