Google Chrome の拡張機能(プラグイン)を作ってみた

カテゴリー :Chrome

最近,研究室で湖池屋スコーン ブレインアウトが(一瞬)話題になりました。

ゲームとしては最後のまでクリアしたのですが、どうもこのBGM耳につく

ということで(どういうことだ)、このBGMを再生できるGoogle Chromeのプラグインを作成しました。

湖池屋スコーン ブレインアウト

コイケヤさんが先日公開したWebアプリケーションのゲームです。

湖池屋スコーン ブレインアウト

http://scorn.jp

全5問なんですが、激ムズです。

あと裏モードもあります。そこら辺は頑張って探してね!

作成したプラグイン「Anywhere Scorn」

スクリーンショット 2015-06-15 1.35.46

スクリーンショット 2015-06-15 1.36.01

githubで公開しました。

him0/Anywhere-Scorn

https://github.com/him0/Anywhere-Scorn

なんとこのプラグインを使うとChromeで何を開いている時でもあのBGMを再生することができます。(誰得)

使い方

  1. ダウンロードする
  2. Chromeの設定から拡張機能の画面(chrome://extensions/)を開く
  3. ダウンロードしたディレクトリを拡張機能の画面にドラッグアンドドロップする
  4. インストールされる

なぜGoogle Chromeのプラグインなのか

理由は2つあります。

  • Google Chromeの拡張機能が作ってみたかった
  • JavaScriptが,久々に書きたかった

作成の流れと参考にしたサイト

Google Chrome拡張機能のHello, World!

Chrome拡張開発: Hello Worldするだけの拡張を作りたい

http://qiita.com/suin/items/2b31079056f1356257cb

Getting Started: Building a Chrome Extension – Google Chrome

https://developer.chrome.com/extensions/getstarted

Chrome 拡張機能のマニフェストファイルの書き方

http://qiita.com/mdstoy/items/9866544e37987337dc79

Backgroud.html と popup.html でどうやってJavaScriptを連動させるのか

最初困りました。幾つかドキュメントをあたりましたが、background.jsとpopup.js間でメッセージングを行う方法が多く引っかかりました。

Chrome拡張機能のbackground.jsとpopup.jsで通信

http://trycatchand.blogspot.jp/2014/06/how-to-communicate-between-backgroundjs-and-popupjs-on-chrome-extensions.html

ですが今回はそこまで複雑にしたくなかったので

var backgroundPage = chrome.extension.getBackgroundPage();

このようにしてbackgroudPageのDOMを取得する方法を用いました。

読みやすいJavaScriptを書く

JavaScriptの名前空間定義チートシート

http://qiita.com/mocha/items/c6a626416daaa04d0668

音楽を再生する

Javascriptでaudioを再生する方法はいくつかあるようですが今回は「audio.js」というライブラリを利用しました。

http://kolber.github.io/audiojs/

まとめ

Chromeの拡張機能の作り方を勉強する事ができたので、今後何かあれば拡張機能という形で作ってみようかなと思います。

これまで、Chromeの拡張機能の動作の仕組みを理解せず活用していましたが今回その点が明らかになってすごく良かったと思います。