最近趣味でChrome拡張を開発してるのですが、JQueryで大きなhtmlをDOMに挿入するのが辛くなってきました。Reactを使えばそのへん上手く切り分けられて幸せになれるんじゃない?って思ったので、Reactで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"
}
}
各項目が何を意味してるかは公式ドキュメントを御覧ください。
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
に設定を書けばこのエラーは回避できるみたいですが、そもそもセキュリティ的によろしくない、みたいな理由でデフォルトではインラインスクリプトの実行が禁止されてるようなので、インラインスクリプトは使用しないのが無難だと思われます。
Chromeに拡張を読み込ませる
あとはビルドしてできたファイルをChromeに読み込ませれば、完了です。
$ cd my-app $ npm run build
これでできたbuild
ディレクトリをChrome拡張として読み込み、アイコンをクリックするとポップアップにReactの画面が表示されます。
![](https://i0.wp.com/mem-archive.com/wp-content/uploads/2019/12/Screen-Shot-2019-12-31-at-3.57.27.png?resize=239%2C252&ssl=1)
参考:
![](https://i0.wp.com/qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?resize=160%2C90&ssl=1)
コメント