既然有Vue，怎麼可以沒有React呢？

那我們今天就來用React完成一個Chrome extension吧!

首先，我們要安裝 React，已經安裝過的可以省略，

npm install -g create-react-app

接下來就是創建一個react app啦

create-react-app my-app

打開專案來看，似乎會發現一個很面熟的檔案 manifest.json

*public/

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

雖然還不清楚緣由，但絕對不是巧合！！
不過我們還是直接覆蓋掉吧，並且放兩個icon到public底下

{
  "manifest_version": 2,
  "name": "React ext",
  "description": "React ext test",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_icon": "icon128.png"
  },
  "icons": {
    "128": "icon128.png"
  },
  "permissions": ["activeTab"]
}

然後執行

npm build

於是build/資料夾就會產生以下檔案

然後我們載入到chrome以後看一下結果

果然！還是有安全性的問題，所以要主動增加sha256的雜湊金鑰，
而我直接拿它提示的雜湊放入我的安全性策略裡

"content_security_policy": "script-src 'self' 'sha256-FC666qq/sDUJ5h1wAnuD99ocJuDhfA+8O4fR9EOPtvQ='; object-src 'self'",

再編譯一次，就正常囉！

但是我們這樣系統沒有後台腳本可以使用，所以如果要後台腳本的話
就必須要自己copy一份到build資料夾了，所以我們可以在package.json中新增一個指令

"build:ext": "react-scripts build && cp src/background.js build/background.js",

這樣就可以順便copy一份後台到build囉

參考資料：https://medium.com/@gilfink/building-a-chrome-extension-using-react-c5bfe45aaf36