はじめに

会社の同期と一緒に何か作ってみたいね、という話になり手始めにリリースまでやってみました。
昔(v2の頃？)触ったことがあったのですが、(v3？になり)結構変わっているようで色々調べ直すところから始めたので、私たちが実装したベースで内容を備忘録として残します。
折角なのでリリースした拡張機能について。実装する上で苦労した点も少し触れます。

拡張機能概要

まず先に機能概要について書きます。
最初はマウスについてこずフラフラしていますが、餌をあげることで少しずつ懐いてついてくるようになります。餌をあげることでウン〇コをするので片づける必要があります。(私が描いた)下手なドット絵ですがちょっとした癒しになればと思っています。

Chrome拡張V3について

manifest.json

以下、私たちが実装したmanifest.jsonです。v2の時と比べると色々変わっているので、これをv3のひな型として使用していただけるかもしれません。

{
  "manifest_version": 3,
  "name": "petKeeper",
  "version": "1.0",
  "action": {
    "default_title": "petKeeper",
    "default_icon": "img/icon.png"
  },
  "icons": {
    "16": "img/icon.png",
    "48": "img/icon.png",
    "128": "img/icon.png"
  },
  "background": {
    "service_worker": "js/background.js",
    "type": "module"
  },
  "commands": {
    "feed": {
      "suggested_key": {
        "default": "Ctrl+Shift+E",
        "mac": "Command+Shift+E"
      },
      "description": "餌を出す"
    }
  },
  "content_scripts": [
    {
      "run_at": "document_start",
      "matches": ["https://*/*"],
      "js": ["js/loader.js"],
      "css": ["css/animation.css"]
    }
  ],
  "permissions": ["background"],
  "web_accessible_resources": [
    {
      "resources": [
        "img/*/*.png",
        "css/*.css",
        "class/*.js",
        "js/*.js",
        "util/*.js"
      ],
      "matches": ["https://*/*"]
    }
  ]
}

主要なところについて説明します。

background

文字通りバックグラウンドで動かす機能を設定します。DOMにアクセスできませんがAPIが利用でき、私たちが実装したようにコマンド入力を検知することができます。それをcontent_scriptに流す、ということができます。

content_script

backgroundとは異なりDOMアクセスが可能です。しかし利用できるAPIには制限がありますので記載した通りbackgroundから必要なAPI実行結果を連携する必要があります。

web_accessible_resources

対象リソースとそれを利用することができるURLを指定します。
jsファイルや犬猫の画像、httpsであれば全URLで拡張機能が有効になるようにhttps://*/*を設定しています。

苦労した点

content_scriptの動作確認

私はいつもconsole.log()を埋め込んで動作確認をしていたのですがどこにそのログが表示されるのかわからずの状態でした。暫くはひたすら実際に触って動かして現象からコードの箇所を切り分けて…と動作検証をしていたのですが、あきらめ半分でalert()を埋め込んだところ動作したので、これを使って動作確認していました。

パッケージされた画像を取得

第一の壁として、ドット絵を描いてパスもあっているはずなのにドット絵が表示されない問題にぶち当たりました。拡張機能特有の取り方があるようでchrome.runtime.getURL(URL)で実装していたのにも関わらず取得できませんでした。結局原因がわからないままですが、class対して以下のようにcssをあてることでも画像取得ができるようでした。

.class {
    background-image: url(chrome-extension://__MSG_@@extension_id__/imapgePath)
}

リリース

折角なのでリリースまでやってみました。(記憶違いかもしれませんが)昔調べたときはお金を払う必要なかった気がするのですが、今回リリースにあたって調べなおしてみると5ドルかかるようでした。
その際の手順に関してはこちらを参照ください。

▼補足
「プライバシーへの取り組み」欄はしっかり描いた方がよさそうです。審査に時間がかかり、リリースが遅くなる可能性があるようです。参考までに、私は以下のように記載しました。

単一用途
これはストア掲載情報の説明欄に記載した内容を記載しました。

backgroundが必要な理由

コマンドを入力して餌を配置するために必要です。

ホスト権限が必要な理由

chromeを使っている限りあらゆるドメインで使用して、楽しんでいただきたいためです。

さいごに

少なくとも私担当分では大した実装はしていませんでしたが、拡張機能特有v2とv3の違いに苦しめられました。また、これを作成する案が出たときに深く考えていなかったのですが、身近な人でドット絵が描ける人がいなかったので自分たちで描く羽目になりました…。もう少しだけでも可愛く癒し成分を加えて描き上げたかったです…。

一人で色々勉強をしてアウトプットし続けることは難しいと思っていたため、一緒に開発を通して勉強していけるかどうか相性を確認する意味合いが強かった今回の同期との開発ですが、今後もやっていけそうに感じました。今はReact、Next.js、TypeScript、Docker辺り一緒に勉強中です。

どなたかの参考になり、またインストールして楽しんでいただければ幸いです。