Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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. 公開
nomuyoshi
フリーランス。 Rails/React/Vue/golang
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away