Appを使ったChrome拡張開発ブラウザ拡張2019.12.31最近趣味でChrome拡張を開発してるのですが、JQueryで大きなhtmlをDOMに挿入するのが辛くなってきました。Reactを使えばそのへん上手く切り分けられて幸せになれるんじゃない?って思ったので、ReactでChrome拡張の作成を試してみました。Appというツールを使うと簡単に新規Reactアプリの開発を始めることができるので、今回はこれを使います。Appをまだ導入していない方は次の記事を参考にインストールをしてください。最近いい加減フロントエンド開発の知識もないとまずいなと思い始めたので、Reactを触ってみることにしました。Appというツールを使うと簡単にReactを使ったサービスを作り始めることができるみたいなので、...mem-archive.com2019.12.31Reactアプリの作成とりあえずデフォルトのReactアプリを作成します。my-appmanifest.jsonの書き換えpublic/manifest.jsonをChrome拡張用に書き換えます。書き換えというか、ほぼ書き直しになります。今回はお試しなので、とりあえずミニマムなmanifest.jsonを用意してやります。public/manifest.jsonの中身を一旦全消しして、以下の内容を書き込んでやります。}}各項目が何を意味してるかは公式ドキュメントを御覧ください。scriptを使用しない設定に修正このままビルドするとJavaScriptのコードがインラインスクリプトとして展開されてしまいます。Chrome拡張はインラインスクリプトを使っているとエラーを吐いて正常に動作しないため、htmlファイルからscriptタグでJavaScriptのファイルを読み込むよう設定を入れてやる必要があります。この方法は次の記事にまとめていますので、この記事の通りにインラインスクリプトを使わないよう設定してください。Appで開発したアプリを何も考えずビルドすると、JavaScriptのコードはbuild/index.htmlにインラインスクリプトとして埋め込まれます。これをbuild/index....mem-archive.com2020.01.01ちなみにこの設定を入れずにChrome拡張を動作させようとすると、以下のようなエラーが出力され、拡張が正常に機能しません。execution.manifest.jsonに設定を書けばこのエラーは回避できるみたいですが、そもそもセキュリティ的によろしくない、みたいな理由でデフォルトではインラインスクリプトの実行が禁止されてるようなので、インラインスクリプトは使用しないのが無難だと思われます。Chromeに拡張を読み込ませるあとはビルドしてできたファイルをChromeに読み込ませれば、完了です。buildこれでできたbuildディレクトリをChrome拡張として読み込み、アイコンをクリックするとポップアップにReactの画面が表示されます。前回、Chrome拡張機能のポップアップの表示について書きました。アイコンのクリック時にポップアップを表示する最近Chrome拡張を開発してみてるので、その開発メモです。コメントをキャンセルメールアドレスが公開されることはありません。管理人についてそのうちサイエンス領域の仕事に関われたらなーって思ってるITエンジニアです。間違いがあればコメント欄から知らせてくれると泣いて喜びます。管理人についてそのうちサイエンス領域の仕事に関われたらなーって思ってるITエンジニアです。間違いがあればコメント欄から知らせてくれると泣いて喜びます。フォローツイートカテゴリーAndroidlinuxWeb開発Windowsサーバ運用ブラウザ拡張プログラミング便利ツール。