LoginSignup
15

More than 5 years have passed since last update.

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

Posted at

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 の画面が表示されます。

react-chrome-extension-sample.jpg

もくもく開発

Tips

'chrome' is not defined no-undef

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

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

browserAction のonClickedcomponentDidMount 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. 公開

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15