More than 5 years have passed since last update.

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

Last updated at 2019-09-21Posted at 2019-09-17

はじめに

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

パッケージ管理は yarn 前提

create-react-appの実行

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

https://github.com/facebook/create-react-app/releases/tag/v2.1.0

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

`manifest.json` の編集

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

https://developer.chrome.com/extensions/manifest

最低限必要な項目

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 フォルダを選択して追加します

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

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の設定を行う必要があります

https://developer.chrome.com/extensions/contentSecurityPolicy

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

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

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

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

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

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

CSP設定を含めた `manifest.json`