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

create-react-app で TypeScript × React での Chrome Extension 開発を始める

はじめに

備忘録代わりに開発をスタートするまでの手順を書きます
ゴールはツールバーのアイコンをクリックでcreate-react-appのデフォルトページがポップアップ表示されるまで

スクリーンショット 2019-09-18 1.26.52.png

パッケージ管理は yarn 前提

create-react-appの実行

v2.1.0 以降であれば --typescript のオプションが使用可能

yarnでは
yarn create react-app <プロジェクト名> --typescript
のコマンドで create-react-app のインストール/アップデートとプロジェクトの作成を行うことができます

manifest.json の編集

このままではChrome拡張として認識されないので manifest.json を編集していきます

最低限必要な項目

  • manifest_version
    • 現在有効なバージョンである 2 を指定
  • version
    • ドット区切りの 0~65535 の1~4個の整数で表現できるバージョン 自動更新の判断にも使われる
  • name
    • ストアや管理画面でも表示される拡張機能の名称 45文字まで

アイコンクリック時の動作を設定する

ツールバーに常駐し、クリック時に表示される動作を実現するために下記設定を行います

  • browser_action
    • ブラウザのツールバーでの振る舞いを設定する アイコンの指定やクリック時のポップアップ表示など
    • default_popup として index.html を表示させます

下記はアイコンや説明文を加えた例です

manifest.json
{
  "name": "test-extension",
  "manifest_version": 2,
  "version": "1.0.0",
  "description": "test-extension | サンプルアプリ",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_popup": "index.html"
  }
}

Chrome拡張機能への追加

ビルド

プロジェクトのルートで yarn build 実行
./build/ 以下にビルドされたファイルが展開されます

Chromeでの読み込み

chrome://extensions/ から

  • デベロッパーモードを有効に
  • 「パッケージ化されていない拡張機能を読み込む」 ボタンをクリック
  • プロジェクトの ./build フォルダを選択して追加します

スクリーンショット 2019-09-18 0.37.12.png

ここまでの作業でブラウザの右上部分に作成中の拡張機能のアイコンが表示されたことが確認できると思います
しかし、クリックするとエラーが出力されます

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-xxx'), or a nonce ('nonce-...') is required to enable inline execution.

Content Security Policy の設定

エラーメッセージにもあるようにインラインスクリプトの実行を許可するためのCSPの設定を行う必要があります

デフォルトの設定では外部リソースのブロックとインラインスクリプトのブロックが行われています

"content_security_policy": "script-src 'self'; object-src 'self'"

インラインスクリプトの許可

エラーで示されたハッシュ値をCSP設定に含めることでインラインスクリプトの実行を許可できます
ハッシュ値は実際に表示された値に置き換えてください

"content_security_policy": "script-src 'self' 'sha256-xxx'; object-src 'self'"

設定の追加後、再度ビルドしてアイコンをクリックするとポップアップが表示されるのが確認できます

CSP設定を含めた manifest.json

manifest.json
{
  "name": "test-extension",
  "manifest_version": 2,
  "version": "1.0.0",
  "description": "test-extension | サンプルアプリ",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_popup": "index.html"
  },
  "content_security_policy": "script-src 'self' 'sha256-xxx'; object-src 'self'"
}

まとめ

create-react-app を使ってChrome拡張機能の開発を始めるまでをまとめました
次回はAWS LambdaでAPIを用意して叩くまでを公開しようと思っています

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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