日常の進捗

主に自分のための,行為とその習慣化の記録

Chrome拡張(5)マウスを追跡して画像を表示するChrome拡張

基本的に下記リンクを参照しつつ,もう少し機能を簡単なものにした.1つの画像でマウスを追従する.CSSもファイルに書き込む形にしたけど,数値変更が必要だからメンテナブルじゃないのに後で気づいた.

それにしてもjQuery,書き方ぼんやりしか覚えてないのでChromeのConsoleがたまにエラーを吐く.

qiita.com

以下Chrome拡張が正しく動作しないときの検証の方法.大抵こんな感じでやってる.

  • Chromeで「拡張機能」の設定タブを開き,該当するChrome拡張でエラーが表示されていないか確認する.例えばこういうやつ.そういう場合ほとんどがmanifest.jsonでの記述ミス.
    • f:id:takawo:20171023194011p:plain
  • 拡張機能」設定タブでエラーが出てない場合は,動作が確認できるURLを開いて「検証」または「メニュー>表示>開発 / 管理>JavaScript コンソール」を実行.
  • 大抵ここでエラーが吐かれているので,該当jsファイルの行番号を確認しておかしなところがないか確認する.CSSの場合はディベロッパーツール内で確認するなどする.以下動画は実際の例.

ファイル一式置いておきます.健闘を祈る.

mouse_stalker.zip

追記:動作こんな感じ

f:id:takawo:20171024124713g:plain