create-react-appでChrome拡張機能開発

create-react-app をインストール

npm install -g create-react-app

アプリケーション作成

create-react-app [アプリ名]

public/manifest.json 編集

以下のようにmanifest.jsonを書き換える。最低限以下のようにすれば動きます。
(アイコンはお好きに)

manifest.jsonの仕様については、公式ドキュメントを参照してください。

Before

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

After

{
  "manifest_version": 2,
  "version": "1.0",
  "name": "My Chrome Extension Sample",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "description": "ReactでChrome拡張機能を作ってみる",
  "browser_action": {
    "default_icon": {
      "16": "icon16.png",
      "24": "icon24.png",
      "32": "icon32.png"
    },
    "default_title": "react extension",
    "default_popup": "index.html"
  }
}

yarn build

以下のコマンドを実行。build/ 以下にファイルが生成される

$ yarn build

ビルドしたファイルをchromeに読み込ませる

1. chrome://extensions/ にアクセス
2. デベロッパーモードをON
3. パッケージ化されていない拡張機能を読み込む
4. buildディレクトリを指定

すると、URLバーの隣にアイコンが表示され、React Create App の画面が表示されます。

もくもく開発

Tips

'chrome' is not defined no-undef

create-react-app を使った場合、ビルド時にeslintのチェックが走り
'chrome' is not defined no-undef と怒られてビルドできません。

これだとChrome APIsが使えないので、/*global chrome*/ と記述する。

browserAction のonClickedは componentDidMount or componentWillMount で代用可能

browserAction のonClicked とは、アイコンをクリックしたときに呼ばれるイベントです。

クリック時にReactでなにかしたいときは、componentDidMount or componentWillMount を使えばOK

公開

公式のPublish in the Chrome Web Storeを参考に進めればOK。

1. Chrome Developer Dashboard に行く
2. build をzip化
3. ストアに表示するスクリーンショットやプロモーション用の画像をアップ
4. その他必要項目を入力
5. $5払う
6. 公開