2023-04-03

画面の隅に黒猫を配置できるChrome拡張機能を作りました！

black cat

どんな拡張機能？

Google Chromeのブラウザの隅に、黒猫を配置できるChrome拡張機能です。

動作イメージはこちらのGIF画像をご参照ください。

ソースコードはこちらで公開しています。

https://github.com/Tatsurou-Yajima/cat-in-leftmost

なぜ作ったか？

こちらの記事に触発されて作りました！

猫に癒されながらネットを徘徊できるChrome拡張開発

上記の記事では実写の猫を表示していたので、今回は「イラストのシルエットを固定位置に表示する」という方向で実装しました。

どうやって作ったか？

ここからは、どのようにこの拡張機能を作ったかを順に記します。

（ほとんど前述の参考記事と同じです）

1. manifest.jsonを準備

拡張機能として機能するために最低限必要な、manifest.jsonを作成します。

manifest.json
{
    "manifest_version": 3,
    "name": "Cat in Leftmost",
    "version": "1.0",
    "description": "ブラウザの左下で猫を飼うことができる拡張機能です",
    "content_scripts": [
        {
            "matches": [
                "https://*/*"
            ],
            "js": [
                "/index.js"
            ],
            "css": [
                "/index.css"
            ]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": [
                "/images/*"
            ],
            "matches": [
                "https://*/*"
            ]
        }
    ]
}

ポイントは以下のとおりです。

manifest_versionは3を指定
- 以前は2がよく使われていたが、現在は非推奨
name, version, descriptionは好きな文字列でOK
content_scriptsで、拡張機能がどのページで動作するか、どのファイルを読み込むかを指定
- matchesをhttps://*/*と指定することで、httpsの全サイトで動作するようにする
- JavaScript, CSSファイルのパスを指定
web_accessible_resources ← 重要！
- resourcesに、読み込みたい画像のパスを指定
- 今回は/images/以下の全ファイル
- この指定がないと画像を読み込むことができない
- matchesも同様に指定する

2. JavaScriptファイルを作成

今回は、下記のような処理を実装します。

ブラウザの左下に、常に静止画の黒猫を配置
クリックすると、GIF画像に差し代わる
- 動く！！
5秒経ったら静止画に戻る
GIF画像は2種類存在する
- ランダムでどちらかを表示する

実際のコードはこちらです。

index.js
const init = async () => {
    const body = document.body;

    const div = document.createElement("div");
    div.setAttribute("id", "cat-image-wrapper");

    const catImage = document.createElement("img");
    catImage.src = chrome.runtime.getURL("images/black_cat.png");
    catImage.classList.add("cat-image");

    div.appendChild(catImage);
    body.appendChild(div);

    let timerId;

    catImage.addEventListener("click", () => {
        const randomNum = Math.floor(Math.random() * 2);
        const randomImage = randomNum === 0 ? "images/black_cat.gif" : "images/black_cat_stretches.gif";
        catImage.src = chrome.runtime.getURL(randomImage);

        clearTimeout(timerId);
        timerId = setTimeout(function () {
            catImage.src = chrome.runtime.getURL("images/black_cat.png");
        }, 5000);
    });
};

init();

下記記事の内容を大いに参考にさせていただきました！

猫に癒されながらネットを徘徊できるChrome拡張開発

3. CSSファイルを作成

今回は以下のような表示を目指します。

常に左下に静止画を表示する
- スクロールしても位置は変わらない
- クリックできるよ、と伝えるため、ホバー時はポインターにする

実際のコードはこちらです。

index.css
#cat-image-wrapper {
    position: fixed;
    left: 0;
    bottom: 10px;
    z-index: 10000;
}

.cat-image {
    width: 80px;
    height: auto;
}

.cat-image:hover {
    cursor: pointer;
}

4. 猫の画像を作成

今回は/imagesフォルダにすべての画像を配置します。

用意するのは以下の画像です。

① 静止画(PNG)

背景を投下させたいので、PNG画像を用意します。

black cat

（切り抜きが甘いのがバレてしまう……）

② 動画(GIF)

今回の実装で一番時間がかかったのがこのステップです。

先に成果物をお見せすると、こちらです。

1つ目

2つ目

今回はGoogle Web DesignerというアプリでGIFを作成しました。

始めて触るアプリということもあり、思うように猫を動かすことができなくて苦労しました。

試行錯誤の末できあがったのが上記の2ファイル、というわけです。

また、作成したGIFの背景を透過させたかったので、下記のサービスを使用しました。

unscreen

これですべての準備ができました！

動作確認方法

ここまででフォルダ構造は以下のようになっています。

.
├── images
│   ├── black_cat.gif
│   ├── black_cat.png
│   └── black_cat_stretches.gif
├── index.css
├── index.js
└── manifest.json

ここからは、実際にGoogle Chrome上で動かしてみましょう。

1. chrome://extensions/へアクセス

Google Chromeを起動し、アドレスバーに下記アドレスを入力します。

chrome://extensions/

すると下記のような画面になります。

2. デベロッパーモードをONにする

3. パッケージ化されていない拡張機能を読み込む

4. フォルダ指定

ルートディレクトリを指定し、「選択」ボタンをクリックします。

5. 拡張機能が表示される

拡張機能一覧画面に、Cat in Leftmost拡張機能が表示されます。

6. 使ってみる！

では、いよいよ実際に使ってみましょう！

お好きなWebサイト（SSL化されたページ）を開き、拡張機能をクリックします。

動きました！

おわりに

以上、拡張機能を作って動かしてみました。

ソースコードはこちらで公開しています。

https://github.com/Tatsurou-Yajima/cat-in-leftmost

拡張機能を作るのは初めてだったのですが、思ったよりも簡単に作れました！

manifest.jsonの書き方で少し悩んだりしましたが、すぐに解決することができました。

ちゃんとパッケージ化して配布するにはもう少しきちんとドキュメントを読んだりしないといけないと思いますが、とっかかりとしては今回のシンプルな成果物で満足しています！

今後は、気が向いたらGIFのパターンを追加したり、画質を上げたりしていきたいと思います。

（とはいえ、どちらかといえばデザイナーの領域になるので、別の人にお願いするかも……）

以上です。

改めて、今回拡張機能を作るきっかけをくれたこちらの記事に感謝します！

猫に癒されながらネットを徘徊できるChrome拡張開発

最後まで見ていただきありがとうございました。

バグ解消法、お役立ち情報など

画面の隅に黒猫を配置できるChrome拡張機能を作りました！

どんな拡張機能？

なぜ作ったか？

どうやって作ったか？

1. manifest.jsonを準備

2. JavaScriptファイルを作成

3. CSSファイルを作成

4. 猫の画像を作成

1つ目

2つ目

動作確認方法

1. chrome://extensions/へアクセス

2. デベロッパーモードをONにする

3. パッケージ化されていない拡張機能を読み込む

4. フォルダ指定

5. 拡張機能が表示される

6. 使ってみる！

おわりに

バグ解消法、お役立ち情報など