chrome拡張触ってみたログ

プログラミング chrome-extension

入門

chrome-extensionが全くわからないのではじめの一歩から。
Loading...でとりあえずFlickrの写真を表示させる。
でも拡張機能の画面では「マニフェストv2にしないとダメ」と警告されるのでmanifest.jsonに

	"manifest_version" : 2,

と書いてリロード。 何も出なくなった。
まりぽさんによると

browser_action.popupは廃止され、default_popupになった。

らしいのでmanifest.jsonを

  	"browser_action": {
    	"default_icon": "icon.png",
    	"default_popup": "popup.html"
  	},

としてみる。ポップアップは出てるようだが写真が出ない。
Loading...によりとchrome-extension:///<ファイル名>で拡張内のファイルが開けるらしいので試しにpopup.htmlを開いて⌥⌘I(C-S-I)あたりでデベロッパーツール出してみると、<script>の下に「実行しませーん」みたいなエラーが出てた。便利ですねありがたいですね。再びまりぽさんのページによると

バージョン2からは、セキュリティ強化のため、インラインJavaScriptは実行されなくなった。拡張内のHTMLにJavaScriptがベタ書きされていたら、外部ファイルに切り出すなどの処置が必要になる。

とのこと。なのでscript要素の中身削除して別ファイルにそのまま貼り付けてload_image.jsとか適当なファイルに保存。script要素は

<script type="text/javascript" src="load_image.js"></script>

としてリロード。動いた。

本題へ

本題「twitterのTLのアイコンを全部入れ替える」

僕はよくわかんないんだけどuserscriptとかでもできるのかな。twitterで「js初心者だけどjsしたい」的なことを言ったらわかめせんせーtwitter:@vvakameに「chrome拡張でもやれば」「アイコン総理大臣にするとか」みたいなことを言ってもらったからという理由です。

ページを書き換えるには…

twitterTLのhtmlのアイコンを全部書き換えるだけっぽいのだけど、先の入門の例ではページの内容とか全く関係ないので、htmlが取得できるのかもよくわからない。せっかくなのでAPIを眺めながらのんびり探すことに。サンプルも結構あるぽい。
なにやらLoading...これを使えばいけそうな雰囲気がする。というわけでこれを真似てcontent_scriptsを書き足す。matchesをtwitterにして、アイコンを書き換える(予定)のjsファイルを作る。アラート出すだけ。ていうかjsのお作法的にこれでいいのかよくわからないけどとりあえずアラートが出るようになった。
ここまでの状態GitHub - ytRino/chrome-ext-biginner at 78afa1bd859f37faf8d71ca474cc0ded161b563f

DOM監視

で、肝心の書き換えに入っていくわけだけど。twitterのTLって新しいツイートがくると「新しいツイート4件」みたいな感じで通知が来て、クリックすると読み込まれるってことは最初にページ読み込んだ時だけ書き換えてもダメだなという(jsぬーぶ的には)めんどくさそうなことに気づいてしまった。最初の書き換えもまだできないうちにそんな心配をして調べていたせいで、alertから次までにだいぶ時間がかかってしまった。あとから振り返ってみてもこれが良かったのか、後回しにしたほうが良かったのかはよくわからない。結局その変化、要はDOMの変化というやつはDOM MutationObserver - reacting to DOM changes without killing browser performance. - Mozilla Hacks - the Web developer blogでそういうものが元から用意されてるみたいな情報があったのでこれを使うことに。最新ブラウザさまさまですね。これなかったらtimerで回すみたいなことを考えてた。
これでもう終わったなと思ったんだけど、実際ちゃんと出るまでにはもう少しつづくんじゃよ。

タイポ

とにかくしょうもないミスが多い。eclipseでandroid(java)という環境でC-Spaceを連打しながら開発してる自分には優秀なSublime Text2と言えどもよく知らない言語+補完も即時文法チェックもないのはわりと辛いものがあった。ゆとりっていうな。
それでもChromeのデベロッパーツールのお陰でとりあえずTLのアイコンを仮で用意した自分のアイコンに書き換えるところまで出来た。ノードの指定も視覚的にわかりやすいお陰ですぐに分かったしjsのエラーもちゃんと出るしマニフェスト足りてないのも指摘してくれたしデベロッパーツールさまさまですね。

こんどこそ書き換える

デベロッパーツールが親切に教えてくれた通り、仮で用意したアイコン、エクステンション内部で持ってるのを読みこませるにはmanifest.jsonに宣言。

	"web_accessible_resources": ["icon.png"]

これをjsで本来のアイコンURLの代わりのアイコンとして設定する。拡張内のファイルを取得するにはLoading...ということで

var icon = chrome.extension.getURL('icon.png');

DOMは上の通り監視してるから良きタイミングで

	// avatarなclass属性がついたimg要素のsrc属性をiconに差し替える
	$('img.avatar').attr('src', icon);

…なぜここだけjQueryを使ってるんだというツッコミはなしでお願いします。使ってみたかったんです。
これで無事新着ツイートも含めアイコンを書き換えられた。やったね
現在の状態:GitHub - ytRino/chrome-ext-biginner at 15129c4743537a8398ce53f9b1f7eeb759c289aa