Chromeの拡張機能を作ってみました

こんな感じで、画像をアップロードすると・・・

その画像が常に右下に表示されるという拡張機能を作ってみました

サイトによく付随しているフローティングバナーの画像を自分の好きなものに変えられたらいいなと思いつき、そんな拡張機能を作ってみたいな〜と思いました。
例えば、愛犬の写真とかがChromeのブラウザの隅っこに常にあれば、嬉しいし可愛いので、癒される＆ストレス下がるかなと🐶。（推しがいる人は推し活もできそう！）
効率やコスパは前提に入れていない、完全に自己満足のためだけの拡張機能です。

そもそも拡張機能って素人が作れるんだろうか

まず、これが気になった。
なので、調べました。
以下の記事は、構造と躓くポイント、そして実際に作成したものが画像付きで分かりやすく記述されているので概要を掴みやすかったです！助かります。

必要なファイルの構成を見ると、基本的には馴染みのある親しみやすいファイル構成ですが、記事にもあるとおり、manifest.jsonというものが厄介そうですね。

私のイメージでは、今回の私が作りたい拡張機能はそこまで複雑ではないはずなので、なんとかできそうかも？と予想し、作っていきました。

手順

やりたいこと

拡張機能のボタンを押すと、右上に、画像をアップロードできるエリアを出す
アップロードしたら、右下に画像が常に表示される
ドラッグで自由に移動できる
ホバーで右上に ✕ ボタン表示 → 押したら画像削除（=非表示）

上記ができるようにしたい。というのをAIに指示、出力されたものを適宜調整しました。

フォルダ構成（実際のコードはほとんど省略）

dog-corner/
├─ manifest.json   # 拡張機能の設定（MV3）
├─ popup.html      # 画像アップロード・設定用UI
├─ popup.js        # ポップアップの挙動
└─ content.js      # ページ右下に画像を常駐表示（ドラッグ・削除対応）

▼manifest.jsonは以下。

{
  "manifest_version": 3,
  "name": "Dog Corner",
  "version": "0.1.0",
  "description": "右下に好きな画像を常駐表示します",
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

使い方（読み込み）

/dog-corner/ フォルダをローカルに作って上のファイルを保存
Chrome → chrome://extensions/
右上「デベロッパーモード」ON
「パッケージ化されていない拡張機能を読み込む」→ dog-corner を選択

拡張機能できました！

拡張機能アイコンを押して画像を選ぶ → 右下に表示される🐶

完成後に調整したところ

画像が、正方形にトリミングされてしまうので、レスポンシブに変更。写真の大きさを優先させるように調整。
拡張機能のアイコンを追加した。
- AIにアイコンを作ってもらった（16px,32px,48px,128px）。
- ちょっと似たかな？？

▼アイコン追加後のフォルダ構成

dog-corner/
├─ manifest.json   # 拡張機能の設定（MV3）
├─ popup.html      # 画像アップロード・設定用UI
├─ popup.js        # ポップアップの挙動
├─ content.js      # ページ右下に画像を常駐表示（ドラッグ・削除対応）
└─ icons/          # アイコン追加
   ├─ 16.png  
   ├─ 32.png
   ├─ 48.png
   └─ 128.png

▼manifest.jsonは以下。
/icons/　を追加したのでmanifest.jsonに追記。

{
  "manifest_version": 3,
  "name": "Dog Corner",
  "version": "0.1.0",
  "description": "右下に好きな画像を常駐表示します",
  "permissions": ["storage"],
  "action": { "default_popup": "popup.html" },
  "icons": {
    "16": "icons/16.png",
    "32": "icons/32.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

再読み込み（リロード）でOK。再度「読み込む」は不要！
chrome://extensions/ で対象拡張の更新ボタン（リロード）を押すと更新されました。

完成と感想

アイコンも変更できていました！

写真もレスポンシブに変更できていました

2時間ほどで完成。想像していたよりも簡単にできました。
やっぱり、常にブラウザ内に表示されているとかわいい、癒されます
ページ遷移しても、常に表示されるのもポイント高めです。
好きな画像や写真をデスクトップ背景に設定するのは隠れてしまうし、今回のように拡張機能なら「大きさもちょうど良く、常に見える位置にある、移動もできる」というのが良いなと思いました。