マウスストーカーのchrome拡張機能を作った

13770 ワード
jQuery JavaScript chrome-extension JavaScript テキストリンク

はじめに

chrome拡張機能の作り方をちょっと学んだので何か作ってみようと思い、マウスストーカーを作ってみました。

ソース

chrome-mouse-stalker(GitHub)

サンプル画像が3つ(静止時、左向き時、右向き時アイコン)入ってますが、適当に好きな画像ファイルに差し替えて使うと良いと思います。
ソースの改造もご自由にどうぞ。

導入方法

chromeのサポートページに書いてました。以下引用。

Chrome を起動して メニュー > [ツール] > [拡張機能] にアクセスします。
[デベロッパー モード] > [パッケージ化されていない拡張機能を読み込む] をクリックします。
manifest.json ファイルとロゴがあるフォルダにアクセスして選択します。
ファイルがすぐに読み込まれない場合は、JSON Validator で JSON コードの書式を確認します。
Chrome で新しいタブを開いて、アプリケーションが読み込まれて正しく動作するかどうか確認します。うまくいかない場合は、ブラウザで正しく動作するまで調整とテストを行います。

パッケージ化もできるようですが、今回はそこまでやってません。

解説

manifest.json

同梱したjsファイルをchrome拡張機能として実行するための設定なんかを記述するファイル。
今回はこんな感じになっています。

manifest.json
{
    "manifest_version": 2,
    "name": "マウスストーカー",
    "description": "マウスに追従してきます.",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "js": [
                "vendor/jquery-2.2.4.js",
                "vendor/jquery.easing.1.3.js",
                "mouse-stalker.js"
            ],
            "run_at": "document_start"
        }
    ],
    "web_accessible_resources": [
        "image/*"
    ]
}
  • manifest_version …manifest.jsonのバージョン
  • name …拡張機能の名前
  • description …拡張機能の説明
  • version …拡張機能のバージョン
  • content_scripts
    • matches …どのWebサイトにアクセスした時に拡張機能を実行するかをURLで指定
    • js …実行するJavaScriptのファイル。今回はjQuery使用。
    • run_at …この拡張機能を実行するタイミング。今回はWebページのDOMを読み込む直前。
  • web_accessible_resources …拡張機能に組み込んだ画像などのリソースファイルを記述

mouse-stalker.js

拡張機能実行時の処理をここに書いてます。
流れはざっくりこんな感じ。

アイコン画像表示用のDOM要素を生成。
生成したDOM要素の表示位置はcssで絶対座標に。ついでに最前面に表示されるように。
(z-indexの最大値は2147483647らしいですが、とりあえず999999にしてます)

mouse-stalker.js
    //アイコン表示用のDIV要素を作成
    $('body')
        .append(
            '<div id="' + DIV_ID + '"><img src="' +
            chrome.extension.getURL('image/' + IMG_WAIT) +
            '" alt="" width="' + IMG_WID + '" height="' + IMG_HEI + '"></div>');

    //cssを定義
    $('#' + DIV_ID).css({
        width: IMG_WID + 'px',
        height: IMG_HEI + 'px',
        overflow: 'hidden',
        position: 'absolute',
        top: '0',
        left: '0',
        'z-index': '999999'
    });

マウスカーソルが動いたらイベント発生。アイコンの現在位置からマウスの右下に向けてアイコンを動かす。
せっかくなので、アイコン静止時と移動時で表示する画像が切り替わるようにしています。

mouse-stalker.js
$('html').mousemove(function (e) {
        var icon = $('#' + DIV_ID).offset();
        $('#' + DIV_ID).stop();

        //マウスのX座標とアイコンのX座標からアイコンの向きを決定
        var mouseX = e.pageX + 10;
        var imgX = String($('#' + DIV_ID).css('left')).replace('px', '');
        direction = mouseX - imgX > 0 ? 'right' : 'left';

        //アニメーション実行
        $('#' + DIV_ID).animate({
            top: e.pageY + 10,
            left: e.pageX + 10
        }, {
            duration: 1000,
            specialEasing: {
                top: 'easeOutCirc',
                left: 'easeOutCirc'
            },
            done: function (animation, goToEnd) {
                updateIcon('image/' + IMG_WAIT);
            },
            fail: function (animation, goToEnd) {
                updateIcon('image/' + (direction === 'right' ? IMG_RIGHT : IMG_LEFT));
            },
            always: function (animation, goToEnd) {}
        });
    });

まとめ

たまに適当に好きなキャラクターを動かして遊ぶ分にはそこそこ楽しいと思います。

参考

Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
JavaScript でマウスストーカーを作る | q-Az

php配列ランダムソート実装方法
Pythonでのvirtualenvの使用