Create React Appを使ったChrome拡張開発

最近趣味でChrome拡張を開発してるのですが、JQueryで大きなhtmlをDOMに挿入するのが辛くなってきました。Reactを使えばそのへん上手く切り分けられて幸せになれるんじゃない？って思ったので、ReactでChrome拡張の作成を試してみました。

Create React Appのインストール
Reactアプリの作成
manifest.jsonの書き換え
inline scriptを使用しない設定に修正
Chromeに拡張を読み込ませる

Create React Appのインストール

Create React Appというツールを使うと簡単に新規Reactアプリの開発を始めることができるので、今回はこれを使います。

Create React Appをまだ導入していない方は次の記事を参考にインストールをしてください。

Reactアプリの作成

とりあえずデフォルトのReactアプリを作成します。

$ npx create-react-app my-app

manifest.jsonの書き換え

public/manifest.jsonをChrome拡張用に書き換えます。書き換えというか、ほぼ書き直しになります。

今回はお試しなので、とりあえずミニマムなmanifest.jsonを用意してやります。public/manifest.jsonの中身を一旦全消しして、以下の内容を書き込んでやります。

{
  "name": "Create React App Sample",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html"
  }
}

各項目が何を意味してるかは公式ドキュメントを御覧ください。

Manifest file format | Chrome for Developers

An overview of the manifest.json properties of a Chrome Extension.

inline scriptを使用しない設定に修正

このままビルドするとJavaScriptのコードがインラインスクリプトとして展開されてしまいます。

Chrome拡張はインラインスクリプトを使っているとエラーを吐いて正常に動作しないため、htmlファイルからscriptタグでJavaScriptのファイルを読み込むよう設定を入れてやる必要があります。

この方法は次の記事にまとめていますので、この記事の通りにインラインスクリプトを使わないよう設定してください。

ちなみにこの設定を入れずにChrome拡張を動作させようとすると、以下のようなエラーが出力され、拡張が正常に機能しません。

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

manifest.jsonに設定を書けばこのエラーは回避できるみたいですが、そもそもセキュリティ的によろしくない、みたいな理由でデフォルトではインラインスクリプトの実行が禁止されてるようなので、インラインスクリプトは使用しないのが無難だと思われます。