Chrome拡張を自作して、なめこの雪を降らせてみた

こんにちは。冬が近づいていますね。冬と言えば雪です。寒い季節になってきました。

さて、つい先日、Google Chrome(グーグルクローム)の拡張機能を自作してみました。なかなか楽しいものが出来上がったので、共有したいと思います。

jQueryで雪を降らせてみる

「jQuery」と「JQuery-Snowfall」というライブラリを使用して、ページに雪を降らせる実装をしてみました。

なお、以下のサイト様を参考に実装しております。

www.hp-stylelink.com

www.north-geek.com

実装方法

実装方法は参考サイト様を見ればわかると思いますが、拡張機能用に補足いたします。

まず、以下のファイルをダウンロードしてください。

次に、雪を降らせるJavascriptを作成します。

main.js

$(function() {
    $(document).snowfall({
        minSize : 15,
        maxSize : 20,
        round : true,
        shadow : true,
        // 雪の量 (数値)
        flakeCount : 500,
    });
});

最後に、Google Chrome で読み込ませるための、設定ファイルを作成します。

manifest.json

{
    "manifest_version": 2,
    "name": "Yuki sample",
    "description": "Sample Google Chrome extension.",
    "version": "0.1",
    "content_scripts": [
        {
            "matches": ["https://www.konosumi.net/*", "http://www.konosumi.net/*"],
            "js": ["jquery-1.12.4.min.js", "snowfall.jquery.js", "main.js"],
            "run_at": "document_end"
        }
    ]
}

適当なフォルダを作り、その下に4つのファイルが並列に配置されていれば問題ありません。

.
├── jquery-1.12.4.min.js
├── main.js
├── manifest.json
└── snowfall.jquery.js

拡張機能を有効にする

それでは、開発した拡張機能をGoogle Chromeに読み込ませましょう。

  • chrome://extensions を開きます。
  • デベロッパーモードを有効にしてください。
  • パッケージ化されていない拡張機能を読み込むを選択して、今回作成したフォルダを選択してください。
  • 有効にチェックして、読み込んだ拡張機能を有効にしましょう。

f:id:konosumi:20171111035926p:plain

ブログに冬がやってきた

私のブログは背景が白色なので、少し見づらいのですが、ブログに雪が降るようになりました。

本題とは関係ないのですが、ごちうさに雪は合いますね。

f:id:konosumi:20171111024251p:plain

なめこの雪を降らせてみた

「JQuery-Snowfall」には、任意の画像で雪を降らせる機能があります。設定に一行を足すだけです。

main.js

$(function() {
    $(document).snowfall({
        // (追加)なめこの画像を指定
        image: "http://img.f.hatena.ne.jp/images/fotolife/k/konosumi/20171111/20171111021102.png",
        minSize : 15,
        maxSize : 20,
        round : true,
        shadow : true,
        // 雪の量 (数値)
        flakeCount : 50,
    });
});

・・・というわけで、われらがなめこ栽培キットのなめこで試してみました。ページ内で、なめこが「んふんふ」しております。

f:id:konosumi:20171111025606p:plain

少し寂しい気がするので、降雪量を調節して、なめこの出現数を増やしてみました。

f:id:konosumi:20171111030650p:plain

賑やかになったものの、ページをなめこが埋め尽くしてしまっていて、ブログの記事が大変読みづらくなりました!あと、画面の読み込みがカクカクになってしまったので、かなりの負荷がかかっているみたいです。

・・・でも、これだけの大量のなめこを一気に収穫したら爽快だろうな。

さいごに

Google Chromeのブラウザ拡張は、お手軽に開発できることが分かりました。

今回は「なめこ」で試してみましたが、もちろん他のキャラクター(画像)で雪を降らせることも可能です。

但し、今回の降雪プログラム程度であれば影響はないでしょうが、拡張機能はHTMLを書き換えることが可能です。そのため、表示しているWEBサービスの動作に悪影響を及ぼす可能性があります。

拡張が必要となるサイトでのみ動くように設定した上で、拡張機能の開発では、しっかりとテストをしてからリリースすることを徹底いたしますよう、お願い申し上げます。