こんにちは。
\nとても今更ながら、Chrome 拡張機能が HTML と CSS と js で作れるらしいので、作ってみました。
よくあるサンプルの、「ただ alert 出すだけ」だと芸がないので、
\nweb 版の ChatWork を改造しつつ、拡張機能について学んだメモです。
この記事を執筆したのは 2014/07/20 です。
\nChatWork の HTML 構造に激しく依存するため、
\nHTML や js の回収があった場合には動作しなくなる可能性が非常に高いです。
\n情報が古くなり動かなくなる可能性があることを、あらかじめご了承ください。
コナミコマンドを実装する jsを利用して、
\nChatWork のページ内で、
\nコナミコマンド（↑↑↓↓←→←→ba）が入力されたら、マイチャットにグラディウスの AA を投稿する
というしょうもない小ネタをやってみたいと思います。
\nちなみに完成した物はこちらになります。
ライブラリの導入に bower を使用します。
\nインストールされている前提で話を進めます。ご了承下さい。
とりあえず動作確認のために、
\nChatWork のドメイン（https://www.chatwork.com）なら alert を出すようにしてみます。
cd /path/to/work\nmkdir chrome-ext-gradius && cd chrome-ext-gradius\nbower init # 適当に入力()\nbower install --save cheet.js jquery\ntouch manifest.json main.js chatwork-util.js\necho \"bower_components\" >> .gitignore\ngit init\ngit add .\ngit commit -m \"initial commit\"コナミコマンドを実現する js、jQuery は bower で配布されています。
\nあとは拡張機能に必要なmanifest.jsonと、自作する js ファイルを生成します。
manifest.json は以下の内容にします。
\n{\n \"version\": \"1.0.0\",\n \"manifest_version\": 2,\n\n \"name\": \"CONAMI command for ChatWork\",\n \"description\": \"コナミコマンドを入力するとChatWorkに何かが起こる・・・！\",\n\n \"content_scripts\": [\n {\n \"matches\": [\"https://www.chatwork.com/*\"],\n \"js\": [\n \"bower_components/jquery/dist/jquery.min.js\",\n \"bower_components/cheet.js/cheet.min.js\",\n \"chatwork-util.js\",\n \"main.js\"\n ]\n }\n ]\n}そして、main.js にアラートだけ書きます。
\nalert('ChatWorkです')この状態で、Chrome 拡張機能として Chrome にインポートして動作確認します。
\nストアで販売してない拡張機能でもインポートできます。
\nメニューから拡張機能のページを開き、
\n「パッケージ化されていない拡張機能を読み込む…」ボタンをクリックします。
\n選択するファイルは、先ほど作成した chrome-ext-gradius フォルダです。
フォルダを選択すると、下記の画面のように拡張機能の一覧に現れます。
\nなお、一度取り込みを行ってしまえば、
\nファイルを変更した時に拡張機能のページをリロードするだけで再読込されます。
リロードしないと拡張機能の再読み込みがされないので、
\n**あれ動かない？**と思ったら拡張機能のページをリロードしてみてください。
次に、Chrome 拡張機能のcontent scriptsについての理解を深めます。
content scripts は任意の web ページに対して任意の js を実行できますが、いくつか制限があります。
\n\n\nコンテント・スクリプトは “Isolated World”(隔離空間) と呼ばれる特殊な環境で実行される。ここでは読み込まれたページの DOM にはアクセスできるが、該当ページの JavaScript の変数や関数には出来ない。そのため、各コンテンツ・スクリプトからは、あたかも他の JavaScript が全く実行されていないページで自分が実行されるように見える。逆もまた真なりで、各ページのスクリプトからもコンテンツ・スクリプトで定義した変数や関数にアクセスすることは出来ない。
\n
\n— コンテント・スクリプト | Chrome Extensions API リファレンス
このように、そのページで読み込まれている js には一切アクセスできず、
\n拡張機能で定義した機能についてもそのページの js からはアクセスできません。
ただし、DOM を介してデータのやりとりを行うことができます。
\n「DOM を書き換えることができて、どんな命名をしても対象ページ内の js と衝突することはない」
\nと捉えるとかなり幸せに思いますが、
\n特定のページ用（今回なら ChatWork 専用）の拡張機能を作る場合には、
\nChatWork で動作している js にアクセスできないため、いちいち各操作を自前で実装する必要があります。
\n例えば、チャットルームの切り替えは、タイミング制御まで合わせるとなかなかの鬼門です。
不幸中の幸いながら、
\nChatWork の HTML には属性として各種パラメータが埋め込まれているので、パース処理や値の取得自体は簡単です。
では早速実装していきます。
\n基本的にはcheet関数を使用してショートカットを設定するだけなのですが、
キーボードイベントに関して要注意なのは、ChatWork の js と衝突して、
\n↑ キーと ↓ キーが奪われてしまい、しかも握りつぶされています。
cheet.js はwindowにイベントを設定しているので、
\ndocumentで止められてしまうと反応できません。
つらい。これはつらい。
\nと思って心が折れかけましたが、無理やりイベントを先取りすることが出来ました。
\n// 握りつぶされる前にkeydownイベントをwindowオブジェクトに伝播させる\n$(document).on('keydown', function(e) {\n var ev = new Event('keydown')\n ev.keyCode = e.keyCode\n\n window.dispatchEvent(ev)\n})\n\ncheet('U U D D L R L R b a', function() {\n alert('コナミコマンド発動!')\n})カスタムイベントを作り window へぶん投げるようにしました。
\n拡張機能をリロードし、ChatWork もリロードし、
\n「↑ ↑ ↓ ↓ ← → ← → B A」と入力してみると、以下のようになります。
cheet.js 側が反応するようになったので OK です。次へ進みます。
\nなどの部分を直接書くと煩雑になるため、
\nDOM 操作や記法のユーティリティは、作成しておいたchatwork-util.jsのほうに記述していきます。
ChatWork では、[info]というタグが使えます。
\nAA など等幅にしてほしいテキストを送る場合に便利です。
使用するのでユーティリティ化します。
\n;(function(global) {\n 'use strict'\n\n var util = {\n /**\n * 指定されたテキストをChatWork記法の[info]タグへ変換する\n * @param string body [info]タグの本文にあたる部分\n * @param string [title] 指定されたら[title]タグも使用する。省略された場合使用しない\n * @return string [info]...[/info]で囲われた文字列\n */\n toInfomation: function(body, title) {\n var info = '[info]'\n\n // titleが指定されていたらtitleタグを使用\n if (typeof title !== 'undefined') info += '[title]' + title + '[/title]'\n\n info += body + '[/info]'\n return info\n },\n }\n\n global.util = util\n})(this)ChatWork の左側にあるチャットルーム一覧は、
\n頻繁に DOM の書き換えが行われるため、変数にキャッシュすると期待通りの動作になりません。
\nなのでメソッド化して、毎度 HTML に問い合わせて取得します。
なお、全体を記述すると長くなってしまうので、
\nファイル全体ではなく必要な箇所のみ記述します。
var util = {\n /**\n * マイチャットの名前。もし名前を変更している人がいたらここを書き換えてください。\n */\n MYCHAT_NAME: 'マイチャット',\n\n /**\n * マイチャットへのリンクを表す要素を取得する\n * NOTE: チャット一覧のDOMは頻繁に書き換わるため変数にキャッシュすると期待道理に動かない。\n * なので変数にキャッシュせずに毎回取得を行う\n * NOTE: MYCHAT_NAMEに設定されている名前のチャットをマイチャットとみなす\n * @return jQuery マイチャットを表すjQueryオブジェクト\n */\n getMyChat: function() {\n // チャットルーム名がMYCHAT_NAMEのチャットを返す\n var selector = 'li[aria-label=\"' + this.MYCHAT_NAME + '\"]'\n return $('#_roomListItems').find(selector)\n },\n\n // ...\n}マイチャットを取得出来ました。
\n何らかのフラグではなく、チャットルームの名前とMYCHAT_NAMEという変数の値に依存してしまっているので、治せる方法があれば治したいです。
マイチャットの要素を取得できたので、マイチャットへ切り替えるユーティリティも作成しておきます。
\n実装は簡単で、単にclickイベントを発行するだけです。
var util = {\n /**\n * 現在のチャットをマイチャットへ切り替える\n * @return void\n */\n changeMyChat: function() {\n this.getMyChat().trigger('click')\n },\n\n // ...\n}これだけです。
\n…なわけありません。
\nチャットルームの切替時に非同期で Ajax が走り、
\n切り替え先のチャットのメッセージ一覧を取得しメッセージ一覧画面をかきえます。
\nこのチャットルームの切り替え完了を検知するタイミングの制御が、なかなか難しいです。
制御に失敗すると、チャットへ投稿するときに、別のチャットへ投稿してしまうことが起こります。
\nですが、詳細までお話していると今回本筋から大きくそれるため触れません。
\nMutationObserverというオブジェクトを利用しています。詳しくはリポジトリを御覧ください。
前述のタイミング制御の問題さえなければごくシンプルです。
\nvar util = {\n /**\n * 現在のチャットへ発言する\n * @param string body 発言内容\n * @return void\n */\n send: function(body) {\n util.$chatText.val(body)\n util.$sendBtn.trigger('click')\n },\n}\n\n$(function() {\n // チャット内容入力フォーム、送信ボタンを変数にキャッシュ\n util.$chatText = $('#_chatText')\n util.$sendBtn = $('#_sendButton')\n})チャット内容入力フォームと送信ボタンの HTML は、
\n書き換えられることがないので、速度のため変数にキャッシュしています。
動作確認をしてみます。
\n$(function() {\n util.send('hogehoge')\n})OK です。
\nさて、マイチャットに切り替えられるようになり、発言もできるようになったので、
\n早速 AA を投稿してみたいと思います。
今回使用する AA はこちら。
\n _ _\n （_ _ ）―――――――――――\n ぴちゅーん\n _ _\n （_ _ ）―――――――――――\n _\n _ヽ ヽ.__________ \n≡] _三 ,. ヽ_ 丶-｀ﾞ__=- ―――――――――――\n ∥_,\"===￣￣\n ぴちゅーん\n _ _\n （_ _ ）―――――――――――\n ぴちゅーん\n _ _\n （_ _ ）――――――――はい。ビックバイパーです。グラディウスやったことないけど。
ナメてんのかって感じの良い AA ですね。
\nこちらのサイト様に掲載されていた AA を少し改変させていただきました。
あまり複雑な AA だと分かりにくいと思ったので、シンプルな AA で行きます。
\nユーティリティは揃えらので、
\nあとはもうコナミコマンドのコールバックを仕上げるだけです。
main.js の内容は以下の通りになります。
\n(function(global) {\n 'use strict';\n\n var AA = util.toInfomation(\" _ _\\n\\\n （_ _ ）―――――――――――\\n\\\n ぴちゅーん\\n\\\n _ _\\n\\\n （_ _ ）―――――――――――\\n\\\n _\\n\\\n _ヽ ヽ.__________ \\n\\\n≡] _三 ,. ヽ_ 丶-｀ﾞ__=- ―――――――――――\\n\\\n ∥_,\\\"===￣￣\\n\\\n ぴちゅーん\\n\\\n _ _\\n\\\n （_ _ ）―――――――――――\\n\\\n ぴちゅーん\\n\\\n _ _\\n\\\n （_ _ ）―――――――――――\", 'コナミコマンドが入力されました')\\;\\\n\n // 握りつぶされる前にkeydownイベントをwindowオブジェクトに伝播させる\n $(document).on('keydown', function(e) {\n var ev = new Event('keydown');\n ev.keyCode = e.keyCode;\n\n window.dispatchEvent(ev);\n });\n\n // コナミコマンドが入力されたらマイチャットへ切り替えて発言を行う\n cheet('U U D D L R L R b a', function() {\n util.changeMyChat(function() {\n // 切り替わったらAAを投稿\n util.send(AA);\n });\n });\n}(this));コナミコマンドを入力してみます。
\nOK です。
\nどのチャットに居てもマイチャットへ移動し、AA が投稿されます。
\n動作がとても重い環境だと投稿しそこねたり、マイチャット以外へ投稿してしまうこともあるのでご注意ください。
ということで拡張機能が完成しました。
\n拡張機能では CSS を読み込めるようなので、
\nもっと深めてみたら面白いことになりそうです。
完成したファイルはこちらからご覧になることができます。
\n\n\n— Leko/chrome-ext-gradius · GitHub
\n
\n\n\n\n
\n\n\n— コンテント・スクリプト | Chrome Extensions API リファレンス
\n
\n\n","timeToRead":14,"frontmatter":{"title":"Chrome拡張を作ってweb版ChatWorkを改造してみた","tags":["cheet.js","Chrome extension","JavaScript","jQuery","ChatWork"],"date":"August 05, 2014","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='135'%20viewBox='0%200%20400%20135'%20preserveAspectRatio='none'%3e%3cpath%20d='M275%2062l-1%208v7h4c7%200%2010-3%207-7v-3c1-2%201-3-1-4-2-2-8-3-9-1m18%200l-6%2015%204-1%204-2c2%200%203%201%203%202l3%201c2%200%202%200-1-8-3-7-6-10-7-7m-106%204l-4%203%204%204c3%203%204%204%205%203v-3c-2-2-2-2%204-2%209-1%209-3%201-3-7%200-8-1-6-3%202-1%202-3%200-3l-4%204m30-3l1%202c2%202%201%203-6%203-8%200-8%202%201%203%206%200%206%200%205%202-2%201-2%202-1%203s3%200%206-3l3-4-3-3c-3-4-5-5-6-3m15%203l-3%203%203%204c3%203%205%204%206%203s1-2-1-3c-1-2-1-2%205-2l6-1c0-2-1-2-7-2h-6l2-2c2-3%202-4%200-4l-5%204m30-3l2%203c1%202%201%202-5%202s-7%200-7%202l7%201c6%200%206%200%205%202-4%204-1%204%204%200l4-3-4-4c-3-4-6-5-6-3'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.9557522123893807,"src":"/static/e43911acb6b80e992575cfb4a43f6c7e/32d53/featured-image.png","srcSet":"/static/e43911acb6b80e992575cfb4a43f6c7e/1ec58/featured-image.png 334w,\n/static/e43911acb6b80e992575cfb4a43f6c7e/32d53/featured-image.png 614w","srcWebp":"/static/e43911acb6b80e992575cfb4a43f6c7e/9b99b/featured-image.webp","srcSetWebp":"/static/e43911acb6b80e992575cfb4a43f6c7e/cd98f/featured-image.webp 334w,\n/static/e43911acb6b80e992575cfb4a43f6c7e/9b99b/featured-image.webp 614w","sizes":"(max-width: 614px) 100vw, 614px"}}}}}},"pageContext":{"slug":"/how-to-extend-chatwork-in-google-chrome/","previous":{"fields":{"slug":"/benchmark-with-syntax-and-language-structure/"},"frontmatter":{"title":"php5.4から使える[]での配列初期化と、array()との速度比較","tags":["benchmark","PHP"]}},"next":{"fields":{"slug":"/examination-of-and-or-operator-in-php/"},"frontmatter":{"title":"PHPのand,or演算子の使い道を考えてみる","tags":["PHP"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}