はじめに

Chrome向けの拡張機能を作成する際に、
フレームワークを利用して得た知見の共有となります。

作成したものについては、下記URL先の記事にて紹介しています。

背景

Chrome向けの拡張機能を作成する際に利用するツールの選択にて
過去の開発で利用したことがあるCRXJSも選択肢の中に入っていたが、
CRXJSの開発状況の雲行きに怪しさを感じたため選択肢から外しました。

よくよく調べてみると、ブラウザ拡張機能開発用のフレームワークあるとのことで
せっかくなので利用してみようとなり、Plasmoを選択した背景があります。

Plasmoとは

Plasmoはブラウザ拡張機能開発の専用フレームワークであり、
公式では、ブラウザ拡張機能開発のNext.jsと表現している。

Plasmoを使用することで、Chrome拡張機能の「manifest.json」の設定が自動化され
メインロジック部分の開発に専念できるのが大きい利点である。

Plasmoのコマンド紹介

環境構築時

環境構築を行う際には以下のコマンドを利用した。
公式ドキュメントにおけるGetting Startedとは異なるコマンドだが、
このコマンドだと自動作成されるsrcディレクトリ配下にソースコードが配置される利点がある

pnpm create plasmo --with-src

また、環境作成時に拡張機能名・機能説明・作成者名と問われるが
拡張機能名を「.」にすることで、カレントディレクトリ直下に環境作成も可能である。

# 拡張機能名と同じディレクトリを作成し、その中に環境構築する
✔ Extension name: plasmo-test-pjt
✔ Extension description: plasmo-test
✔ Author name: plasmo-user

# カレントディレクトリ直下に環境構築し、拡張機能名もそのディレクトリ名と同じになる
✔ Extension name: .
✔ Extension description: plasmo-test
✔ Author name: plasmo-user

開発時

開発時には以下のコマンドを利用する。

pnpm dev

コマンド実行後、build配下に「chrome-mv3-dev」ディレクトリが自動作成されるので、
このディレクトリをブラウザの拡張機能ページにパッケージ化されていない拡張機能として追加する。

開発中は、ファイルの変更が即時で反映されるのが便利である。
また本番用と区別をつけるために、拡張機能のアイコンはモノクロで表示される。

リリース時

リリースを行う際は、以下2つのコマンドを実行する。

pnpm build

pnpm package

buildコマンドを実行すると、
build配下に「chrome-mv3-prod」ディレクトリが自動作成される。

続けてのpackageコマンドで、
パッケージ化された「chrome-mv3-prod.zip」ファイルが自動作成される。

Chrome WEBストアのDeveloper Dashboardへアップロードする際は、
この自動作成されたzipファイルを選択する。

拡張機能の設定まわり

本来であれば拡張機能の設定は「manifest.json」へ記入していくことになるが、
Plasmoを利用する際は、「package.json」へ記入する。

拡張機能の情報設定

拡張機能の名称や作成者情報は「package.json」の上部に記載されており、
環境作成時に聞かれた内容が反映されている。
バージョン情報が"0.0.1"になっているので、リリース時は忘れずに修正が必要である。

{
  "name": "plasmo-test-pjt",
  "displayName": "Plasmo test pjt",
  "version": "0.0.1",
  "description": "plasmo-test",
  "author": "plasmo-user",

拡張機能の権限設定

拡張機能が利用する権限の設定は、「package.json」の上部に記載する。
デフォルトだと下記のようになっているので必要なものを選んで追加していく。


  "manifest": {
    "host_permissions": [
      "https://*/*"
    ],
    "permissions": [
      "tabs"
    ]
  }
}

拡張機能のアイコン

拡張機能で利用するアイコンについては、
assetsディレクトリ配下にある、「icon.png」を自動認識して利用する。

assets/icon.png

現段階でサポートしているのは、PNG画像のみのようなので注意が必要である。

また先にも記載しているが、
カラーアイコンを設定しても「devコマンド」実行時はモノクロとなる。
「build」コマンドを実行したら元の色で表示されるので心配は不要である。

参考

Plasmo公式ドキュメント
- https://docs.plasmo.com/
Using the src directory for source code
- https://docs.plasmo.com/framework/customization/src
Browser Extension Pages
- https://docs.plasmo.com/framework/ext-pages
Extension Icon – Plasmo
- https://docs.plasmo.com/framework/icon
【2024年夏】ブラウザ拡張機能開発を加速するフレームワーク・ツール3選をコードベース付きで紹介！
- https://zenn.dev/cybozu_frontend/articles/introduction-browser-extensions-tools
ブラウザ拡張機能を作るためのReactフレームワーク『Plasmo』
- https://zenn.dev/nado1001/articles/plasmo-browser-extension
Future of CRXJS 🔮 👀 · crxjs/chrome-extension-tools · Discussion #974
- https://github.com/crxjs/chrome-extension-tools/discussions/974