Safie Engineers' Blog!

Safieのエンジニアが書くブログです

Google Chrome 拡張機能をPlasmoで作ってみた

はじめに

セーフィー株式会社でサーバーサイドエンジニアをやっております石塚です。 今回はGoogle Chromeの拡張機能に入門したので備忘録として残しておこうと思います。完全にプライベートで利用するための拡張機能を実装したので、ゆるりと呼んでいただけると幸いです。

拡張機能の作り方

今回はGoolge Chrome向けの拡張機能を実装する方法を紹介します。 Google公式の拡張機能ドキュメントがあります。詳しくはこれを参照してください。基本的にはHTML, CSS, JavaScriptで実装可能なので簡単に構築することができそうです。他には他にWXTやExtention.js, plasmoなどの拡張機能向けのフレームワークを使う方法もあります。

今回はplasmoを選択しました。”the all-in-one platform that makes it easy for browser extension developers to create, test, and publish amazing extensions.“とあったので全部入りかつ簡単に導入できそうという安易な理由です。

インストール

動作環境は以下の通りです。

  • macOS Sonoma 14.7
  • node v18.16.0
  • npm 9.5.1

まずはプロジェクトを作成します。今回はnpmを使いますが公式ではpnpmの使用が推奨されているようです。

npm create plasmo

対話形式でプロジェクト名や説明などを設定します。

しばらく待つとプロジェクトが作成され、以下のようなディレクトリ構造になっているはずです。

/<PROJECT_NAME>
├── README.md
├── assets
│   └── icon.png
├── package.json
├── popup.tsx
├── tsconfig.json
└── yarn-error.log

意外とシンプルな構造ですね。

ローカルで実行

まずはローカルで実行してみましょう。

# 筆者の環境では不足していたので追加
$ npm install sharp

# 実行
$ npm run dev
> extention-sample@0.0.1 dev
> plasmo dev

🟣 Plasmo v0.89.4
🔴 The Browser Extension Framework
🔵 INFO   | Starting the extension development server...
🔵 INFO   | Building for target: chrome-mv3
🔵 INFO   | Loaded environment variables from: []
(node:29924) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
🟢 DONE   | Extension re-packaged in 1734ms! 🚀

ビルドされ、開発サーバーで実行可能な状態になっているのでブラウザから拡張機能を有効化して動作確認してみます。
chromeの右上の3点リーダーから「拡張機能」、「拡張機能を管理」に進みます。拡張機能のページの右上に「デベロッパーモード」があるので、このトグルボタンをおして有効化します。

「パッケージ化されていない拡張機能を取り込む」から先ほどビルドの成果物を選択します。./build/hrome-mv3-devに出力されています。
取り込むと以下の画像のようになります。

ブラウザから拡張機能をピン留めしてクリックすると作成した拡張機能が確認できます。

これで最低限の開発ができるようになりました！

実装

今回はサンプルとしてページがロードされたときにコンソールにURLを出力してみます。

mkdir contents
code contents/content.ts

新しくcontents.tsを編集します。今回は以下のような実装にしました。

export {};

window.addEventListener("load", () => {
    const url = new URL(window.location.href);
    console.log("URL:", url.origin + url.pathname);
});

ホットリロードが有効なのでコンソールを表示しながらページをリロードするとアクセスしているURLが表示されます！ ビルドの成果物にはHTML, JavaScript, manifest.json（それから画像ファイル）が含まれています。manifest.jsonは拡張機能に必須のファイルですが、これはplasmoが生成しています。manifest.jsonの内容はpackage.jsonで定義できます。

このままではあまり意味のある拡張機能ではないですが、ビルドしていつでも使えるようにしてみましょう。

npm run build

./build/chrome-mv3-prod/にビルド成果物が出力されます。 これをブラウザの拡張機能のページから読み込むと開発サーバーが起動していないときでも使えます。

拡張機能を広く公開するにはパッケージ化したり、Googleウェブストアで公開したりしないといけないですが、ここでは紹介しないのでぜひ公式のヘルプページなどを参照して公開してみてください。

最後に

簡単ですが、Google Chrome拡張機能の作り方について紹介しました。
シンプルにHTML, CSS, JavaScriptで実装する方法もありますが、フレームワークを使うとフレームワーク特有のお作法があったりと学習コストが増える分、いろいろとよしなに作ってくれます。
30分から1時間程度あれば簡単な拡張機能は作れると思いますので、年末年始に作ってみるのはいかがでしょうか？

セーフィーではエンジニアを積極的に募集しています。気になる方はこちらをご覧ください！
https://safie.co.jp/teams/engineering/

この記事を読んでもし興味を持っていただけた方は、ぜひ採用サイトもご覧ください。
カジュアル面談のみでも大歓迎ですので、お気軽にご連絡ください。

最後までお読みいただき、ありがとうございました。

© Safie Inc.