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,
    });
});