Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

画面に黒猫を配置するChrome拡張機能を作りました!

Posted at

どんな拡張機能?

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

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

Apr-03-2023-18-31-15.gif

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

なぜ作ったか?

こちらの記事に触発されました!:pray:

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

どうやって作ったか?

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

(ほとんど前述の参考記事と同じです)

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_version3を指定
    • 以前は2がよく使われていたが、現在は非推奨
  • name, version, descriptionは好きな文字列でOK
  • content_scriptsで、拡張機能がどのページで動作するか、どのファイルを読み込むかを指定
    • matcheshttps://*/*と指定することで、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();

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

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画像を用意します。

screenshot-2023-04-03-185723.png

(切り抜きが甘いのがバレてしまう……)

② 動画(GIF)

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

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

1つ目

black_cat (1).gif

2つ目

black_cat_stretches (1).gif

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

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

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

(3時間くらいかかりました:v:

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

登録不要で、GIFをアップロードするだけで背景を透過してくれます。

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

動作確認

ここまででディレクトリ構造は以下のようになっています。

.
├── 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/

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

screen-shot2023-04-03.png

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

2023-04-03-19.15.53.png

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

2023-04-03-19.18.57.png

4. フォルダ指定

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

2023-04-03-19.20.28.png

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

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

2023-04-03-19.22.41.png

(コードを編集した際は、リフレッシュアイコンをクリックすると反映されます)

6. 使ってみる!

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

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

2023-04-03-19.26.04.png

動きました!:tada::tada::tada:

Apr-03-2023-18-31-15 (1).gif

おわりに

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

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

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

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

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

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

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

以上です。

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

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

10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?