読者です 読者をやめる 読者になる 読者になる

Chromeの拡張を作った

chrome extension

Google検索ツール(期間指定とかするやつ)をデフォルトで表示するChromeの拡張を作った。

Googleで検索を行った際に頻繁に検索ツールの期間指定を行っていて(TitaniumとかSwiftは鮮度が大事)、素早く期間指定したいので最初から検索ツールを表示しててほしいと思っていたのと、Chromeの拡張を作れるようになりたいと思っていたので、とりあえず作ってみた。

この手のやつは、作ろうと思ったら割りと直ぐ作れるんだけど、一歩を踏み出すのがダルいので、今回かなり簡単な拡張を作っただけだけど、一歩を踏み出せたので良かったと思う。

ソースコード

詳しくは starhoshi/ShowGoogleSearchTools にありますが、

$("#hdtb_tls").addClass("hdtb-tl-sel");
$("#hdtbMenus").attr("class","hdtb-td-o");
$("#hdtbMenus").attr("aria-expanded","true");
$("#hdtbMenus").css("width", "644px");
$("#resultStats").css("right","16px");
$("#appbar").removeClass("hdtb-ab-o");

こんなかんじで、検索結果ページのCSSを、検索ツールボタンを押したあとのCSSに書き換えているだけです。本当に簡単だった。
検索ツールを表示すると 約 xxx 件 (x.x秒) みたいに検索結果を表示する項目が隠れてしまって、右に無駄なスペースあるので検索結果数とかは right:16px にして右端に表示するように変えています。

参考にしたサイト

上記サイトの拡張を前から使っていて、今回やりたいこともこの拡張と似てるし、ソースも公開しているので参考にさせてもらった。

上記サイトのソース読んでたら、setInterval(function(){},700)ってやってて、おそらくDOMの構築を待ってるのかなと思ったんだけど、それならsetTimeoutでいいし、DOMの構築完了は manifest.js で "run_at": "document_end" ってしてあげればDOM構築完了後に拡張が動くようになるので、これで良さそうだと思ったし、実装した感じ document_end でいいと思う。
弊拡張は document_end で実装した。

ただ、DOMの構築を待ってからCSS書き換えするので多少のラグを感じてしまって、CSS書き換えとかじゃなくて最初からそのCSSで出てきてくれればいいのに、と思う。

Chrome デベロッパーに登録した

からポチポチやれば登録できます。
デベロッパー登録しないでも crx ファイル配布でもいいんだけど、デベロッパになっても初回登録時に$5だけ払えばいいので、迷ってる時間があったら払ったほうが楽。

拡張の登録やら公開やらも別に難しくなくて、かなり親切に補足説明が出てきてくれます。
ただ、アイコンやらスクリーンショット等用意する必要がありますが、他に特に迷うこと無く拡張公開までいけました。

アイコンは @kuitachi_ がくれた、感謝。