Google Chrome拡張に手をつけてみた

Chrome拡張とは
HTML/CSS/JavaScriptで作る、ブラウザをもっと便利にするモノ
とにかく作るのは簡単、でも実現が難しいことも多い
Loading...

本格的にFirefoxからChromeに移行するにあたって、Chrome拡張が気になってるこの頃。Chrome OSのアプリケーションになるだとかHTML5だとか、今後クライアント側で楽しいことができそうだなと思ってる。

Create Link - Chrome ウェブストア
 https://chrome.google.com/extensions/detail/hbnaclhngkhpmpgmfakaghgjbblokeeh?hl=ja
このあたりを見ていて、ワンクリックでタイトルだけ取得したいなーと思ったので、練習がてら自分でも作ってみた。ページタイトルを抜き出すだけなら提供されてるAPI使って簡単に終わる話。
ただ、会社のPCで社内ページのタイトルをコピーして別のページにペーストして云々、という作業が仕事柄よくあって、会社PCのChromeでも使えるようにしたかったのが発端。それもページタイトルに必要な情報が含まれていれば問題ないのだけど、社内の主要なページには残念ながら含まれてなかった。APIだけでは必要な情報が引っ張ってこれないので、直接DOMを読みに行く方法を確認してたところ、それが結果的にChrome拡張の基本的な動きについても知ることができた。

実現するにあたっては、

バックグラウンドページでアイコンのクリックを検知して、コンテントスクリプトを呼び出す
コンテントスクリプト側で対象ページのDOMを解析して、欲しい情報を得る
コンテントスクリプトから、sendRequestでバックグラウンドページに情報を送り返す
バックグラウンドページでクリップボードにコピーする

という感じ。なかなかめんどくさいけど、バックグラウンドページではDOM操作ができなかったり、コンテントスクリプト側ではexecCommand("copy")がfalseになり、クリップボードを扱えないためにこんな流れになってる。バックグラウンドとコンテントスクリプトは完全に独立したコンテキストで実行されるので、データの送受信は、両者の間でメッセージのやりとりをすることで実現してる。バックグラウンドページでexecCommandが動作するのはセキュリティホールとみなされて、今後見直されるのかもしれない。
という感じで作ってみたけど、けっこう楽しい。まとめはこれぐらいにして、他にも作ってみようと思う。

Chrome拡張については、太田さん（id:os0x）という方の
Loading...
Loading...
あたりがすごくまとまってる。ちなみにこの太田さんは、Googleグループの質問にも答えまくっていてどれもすごく参考になる。

なお、ソースは以下（コンテントスクリプトのDOM処理は一応省いてある）。
GitHub - daisukebe/CopyREF