· 中村 優斗 · blog · 6 min read
Plasmoを利用してChrome拡張機能を作る
ブラウザ拡張機能を作成するためのフレームワークであるPlasmoを用いて拡張機能を作成する流れを紹介します
合同会社TUNIの中村です。
今回、ブラウザ拡張機能を作成するためのフレームワークであるPlasmoを用いてChrome拡張機能-YouTubeLayoutFixerを作成しました。Plasmoは便利なフレームワークでありながら日本語の記事はあまりないように思えます。もちろん公式の丁寧なDocsがあるため迷うことは少ないのですが、ほんの少しだけ紹介しようと思います。
技術スタック
基本的に拡張機能自体はJavaScriptとjson、あと必要そうならCSSなどを使用することで最低でも2ファイルあれば作ることが出来、短期的な開発にはうってつけです。
一方で、拡張機能を押したときに表示される設定画面などを使用する場合、HTML要素やJavaScriptをある程度しっかりと書く必要があり、0のまっさらなファイルから始めるよりはフレームワークを使用したほうが良いことがあります。例えばWebアプリを作る際にまっさらなプロジェクトからではなく、create-next-appから始めるようなものです。
今回の拡張機能作成にあたっては、ストレージAPIやReactを使用してフロントエンドを書くことの出来るPlasmoを使用しました。
Plasmoの簡単な初め方
pnpm create plasmo で簡単にプロジェクトを開始させることが出来ます。以下の画像のようなファイル構成に初めはなっています。
| ファイル(ディレクトリ) | 説明 |
|---|---|
popup.tsx | デフォルトのReactコンポーネントをエクスポートし、拡張機能のアイコンを押したときのポップアップにレンダリングされます。 |
assets | icon.png を正方形で用意しておくとビルド時にちょうどよいサイズに変形してくれます。 |
package.json | 一般的に拡張機能を作成するときはmanifest.jsonと呼ばれる拡張機能についての詳細を記入したjsonファイルを作る必要があります。Plasmoではpackage.json内にこの内容を記述します。 |
ビルド時はpnpm buildとすることでbuildディレクトリに拡張機能がビルドされます。また、開発時はpnpm devとすることで同じディレクトリにdevバージョンが生成され、これはホットリロードが有効なので一度拡張機能をChromeに読み込ませておけば自動的にupdateされます（地味に便利）。
特定のwebページ上で特定の動作をするような拡張機能を作る場合（例えば、X上の♥を★に戻すとか）、Content Scriptsと呼ばれるものを書きます。
いっちょ前に言っていますがようはcontent.tsというファイルを作成し、その中に必要な機能を書いていくだけです。詳しいことはここに書いてあります。沢山のファイルを使用する場合はcontentと呼ばれるディレクトリを作ればいいみたいです。
あとはcontent.tsに使用したい機能を書くだけです。ポップアップ側のフロントが必要ない場合はTypeScriptを使用できるというメリットしかありませんが、ポップアップ側のフロントエンドを使用する場合、popup.tsxにReactを使用することが出来ます（もちろんJSXが使えます）。拡張機能と言えばなんらかの機能をON/OFFにしてそれにあわせてUIを変更するということが多くあるため、Reactの恩恵を受けることが出来ます。
おわりに
ごく簡単な内容になってしまいましたが、逆に言えばChromeの拡張機能はアイデアとJavaScript (今回はTypeScriptでしたが)、HTML、CSSさえなんとかする根性があれば割と簡単に作れてしまいます。是非シンプルなフレームワークPlasmoを使って拡張機能を自作してみるのをオススメします。
