とりあえず作ってみるてｓｔ

ChromeSizer

昨日書いたのextensionのアイディアから実際にWindowSizerを作ってみようと思う。


んで、まずはextensionどう作るかの下調べ。
続・先取り！ Google Chrome Extensions：連載｜gihyo.jp … 技術評論社
↑ココを参考にする。
というかこの記事を見て作ってみようかなぁと思ったんだけど、卒論やらなんやらで、忘れかけていた。


あとはAPIリファレンスの日本語訳ページ
Loading...


公式のドキュメント見てもいいんだけども、英語力がねぇ。。。


chrome extensionにはpageAction(アドレスバーにボタンでるやつ)とbrowserAction(ツールバーにボタン出るやつ)があって、extensionごとにどちらか一方だけ使えるみたい。(もちろんどっちも使わなくてもOK。)


pageActionは現在選択されているページに対する機能を提供する場合に使い、browserActionは、ページによらない機能の場合に使うようなので、今回はbrowserAction使う。


今回はまずサイズの設定とかは後回しで、ボタンクリックしたら決めてあるサイズに変更するだけのものを作る。

browserActionがクリックされた時にはbrowserAction.onClickedイベントが呼ばれるので、ファンクションをイベントリスナーに追加すればOK。


リファレンスをいろいろ見てるとwindows.updataというのを見つけた。
これをbrowserAction.onClickedイベントに追加すればウィンドウのサイズは変更出来そう。



大体の方針が決まったところでまずはmanifest.jsonという設定ファイルを準備する。

{
  "name":"WindowSizer",
  "version":"0.1",
  "description":"This extension change chrome wiondow size",
  "icons":{
    "48":"icon48.png",
    "128":"icon128.png"
  },
  "browser_action":{
    "default_icon":"icon19.png",
    "default_title":"disable select window size(test version)"
  },
  "background_page": "background.html",
  "permissions":["tabs"]
}

こんな感じ。


名前はWindowSizer。(ChromeSizer の方がいいだろうか？)
アイコンはリファレンスページを参考に48x48と128x128を準備。
browser_actionのアイコンと、ツールチップを設定。
スクリプトはbackground.htmlに記述
permissionsは"tabs"を指定。("windows"の関数を使う場合にも"tabs"が必要らしい。ややこしいなぁ。)


で、実際のbackground.htmlは

<script>
chrome.browserAction.onClicked.addListener(function(tab){
	chrome.windows.update(
		tab.windowId,
		{left:0,
		 top:0,
		 width:800,
		 height:600});
});
</script>


tab.windowIdで現在選択中のwindowを指定。位置左上で、サイズ800x600に変更。
今日はここまで。
画面のハーフサイズに指定しといて、window並べて使うみたいな使い方ならこのままでも数値変えたら使えそう。


次は、browserActionでpopup出して、サイズを選択を目指す！予定。。。