Chrome拡張機能で、ブラウザ最小化ボタンの挙動をカスタマイズする

2015年12月17日

先日以下のようなご相談がありました。

「Chrome拡張機能を使って、Chrome を最小化するときに、ある特定の処理を行いたい」

Chrome拡張機能というのは、Chrome ウェブストア からインストールできる Chrome 専用のアプリケーションのことです。

弊社では以前「Chrome拡張機能「クーポンチェッカー」」でご紹介した内容で開発を行ったことがあり、おそらくこの記事をご覧になってのご相談だったようです。

 

ご相談の内容


ご相談の内容は、主に2点ありました。

1.Chrome 最小化時に、本来の最小化を行わず、ウィンドウを特定のサイズ・位置に移動したい
2.Chrome 起動時に、Chrome のウィンドウを特定のサイズ・位置に表示したい

本記事では、これらの実現プログラム(JavaScript、Chrome API)について記載いたしますが、
Chrome 拡張機能に必要な実行環境(manifestファイルなど)、デバッグ方法、ウェブストアへの申請方法、などについては記載しません。

 

Chrome 最小化処理を横取りする


Chrome 拡張機能のバックグラウンド用 JavaScript ファイルに処理を記述します。

もし可能であれば、Chrome の各ウィンドウごと(というのは複数 Chrome が起動するケースもあるので)の「最小化した」というイベントをキャッチできればよいのですが、そこまで直接的なイベントは Chrome API には用意されていないようでした。

そこで、Chromeウィンドウの状態が変わったら(chrome.windows.onFocusChanged イベント)
すべての Chromeウィンドウのウィンドウの状態が最小化状態かどうかをチェックする、というように実現します。

var MIN_CHROME_TOP = 0;
var MIN_CHROME_LEFT = 0;
var MIN_CHROME_WIDTH = 400;
var MIN_CHROME_HEIGHT = 130;

chrome.windows.onFocusChanged.addListener(function(fwid){
	//console.log('onFocusChanged='+fwid);
	chrome.windows.getAll(function(windows){ ※1
		for(var w = 0; w<windows.length; w++){
			var window = windows[w];
			//console.log(window.state+" "+window.type+" "+window.focused+" "+window.top);
			if(window.state == "minimized"){
				chrome.windows.update(window.id, {
					top: MIN_CHROME_TOP, 
					left: MIN_CHROME_LEFT, 
					width: MIN_CHROME_WIDTH, 
					height: MIN_CHROME_HEIGHT, 
					state:"normal", 
					focused: true
				});
			}
		}
	});
});

※1 chrome.windows.onFocusChanged イベントでは、該当のウィンドウID(この例では fwid)が取得できるので
本来ならばそのウィンドウが最小化しているかどうかだけを調べればよいはずなのですが、ここではすべての Chrome ウィンドウの状態を調べるようにしています。

 

Chrome ウィンドウ起動時にウィンドウ位置、サイズを固定する


Chrome ウィンドウが起動するタイミングで発生するイベント(chrome.windows.onCreated イベント)で、ウィンドウの位置・サイズを変更するようにすれば容易に実現可能です。(※1)

ただ、デバッグ環境特有の問題なのか、なぜか Chrome ウィンドウを起動しても、chrome.windows.onCreated イベントが発生しないケースがありました。

このため、※2のように、chrome.windows.getCurrent で現在のウィンドウを取得する処理も追加しました。

var NEW_CHROME_TOP = 100;
var NEW_CHROME_LEFT = 100;
var NEW_CHROME_WIDTH = 800;
var NEW_CHROME_HEIGHT = 600;

chrome.windows.onCreated.addListener(function(win){ ※1
	show_initial_window(win.id);
});

setTimeout(function main(){
	chrome.windows.getCurrent(function(win){ ※2
		if ( win ){
			show_initial_window(win.id);
		} else {
			setTimeout(main, 10);
		}
	});
	
}, 10);

function show_initial_window(window_id){
	chrome.windows.update(window_id, { 
		top: NEW_CHROME_TOP, 
		left: NEW_CHROME_LEFT, 
		width: NEW_CHROME_WIDTH, 
		height: NEW_CHROME_HEIGHT, 
		focused: true,
		state: "normal" 
	}, function(){
		chrome.windows.update(window_id, { ※3
			focused: false,
			state: "normal"
		}, function(){
			chrome.windows.update(window_id, { 
				focused: true,
				state: "normal"
			});
		});
	});
}

※3 この部分では、一度ウィンドウの位置・サイズを指定のものに変更したあとに、Chromeウィンドウが取得したフォーカスを強制的に失わせて再取得しています。
なぜこんなことをしているか、といいますと、このように再取得させないと、初めての chrome.windows.onFocusChanged イベントが起動しないためです。

どうやら、Chrome ウィンドウの初回起動直後、Chrome API 内部的にはそのウィンドウには「フォーカスがない」状態になっているようです。フォーカスがない=別ウィンドウにフォーカスが移動しても、フォーカスが変更された(onFocusChanged)と認識されない、ということです。

そのため、わざわざフォーカスを失って再取得することで、内部的にも、そのウィンドウに「フォーカスがある」状態になるようにしています。

 

この記事の著者

イルカシステム(株) イルカシステム株式会社

イルカシステム(株)は、以下のような業務用ウェブシステムのご提案、受託開発、運用を行っております。

1.中小企業さま向けの社内向け業務ウェブシステム(営業支援、顧客管理、受注管理、請求入金管理、在庫管理、経営数値管理など)

2.医療業界向けの業務改善システム

※業務ウェブシステムの開発を効率化するための自社サービス「イルカベーカリー」をご提供しております。
※医療業界向けに、臨床研究の無作為割付自動化のための自社サービス「ムジンワリ」をご提供しております。

お問合せはお気軽に、こちらからどうぞ! → イルカシステム株式会社へ問合せ

著者:イルカシステム株式会社

お問い合わせ




会社概要

<p>イルカシステム(株)</p>
<img src="http://www.iruka-system.co.jp/wp-content/uploads/2017/01/WS000000.png" alt="会社概要 住所" width="243" height="84" class="alignnone size-full wp-image-49" />
<div class="alert alert-warning">
2017/1/1より、住所変更いたしました。
</div>
<p><span class="label label-success">TEL</span> 03-5843-9168</p>

  • 中小企業 41個の記事

    中小企業様にご提案・開発してきた実績をもとに、システム構築について記載した様々な記事一覧です。

  • 社内システム 39個の記事

    様々な社内システムをご提案・開発してきた実績をもとに、システム構築について記載した様々な記事一覧です。

  • わかりやすさ 30個の記事

    情報システムをわかりやすく使いやすいものにするためのノウハウ、気をつけていることの記事一覧です。

  • UI設計 27個の記事

    UI(ユーザーインターフェース)は、システムの使い勝手を左右します。どんな点に気をつけているか、どんな考えでシステム開発しているかの記事一覧です。

  • 顧客管理 26個の記事

    これまで構築した様々なシステムのうち、顧客管理機能をどのような観点でご提案、開発しているかをまとめた記事一覧です。

  • 受注管理 18個の記事

    これまで構築した様々なシステムのうち、受注情報を管理する機能をどのような観点でご提案、開発しているかをまとめた記事一覧です。

  • ビジネス 18個の記事

  • 業務 16個の記事

  • 要件定義 14個の記事

    要件定義とはどのようなシステムを構築するのかを決める作業です。要件定義において注意し、考えていることをまとめた記事一覧です。

  • クラウド 13個の記事

  • 登録画面 13個の記事

  • 編集画面 12個の記事

  • システム会社 12個の記事

  • 情報共有 11個の記事

  • みえる化 11個の記事

    手作業をシステム化して効率化するだけでなく、それらの情報を集約して簡単に見えるようにし、社員が自律的に動ける組織を作ることが「みえる化」です。

  • 一覧画面 11個の記事

  • 業務用ウェブシステム 10個の記事

  • エクセル 9個の記事

  • コミュニケーション 9個の記事

  • セキュリティ 8個の記事