スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[Firefox] Firefox4のアドオンバーに要素を追加する

アドオンバー

Firefox 4はウィンドウの下部に新しいツールバーを付けたいがためにブラウザウィンドウの下部からステータスバーを削除します。この新しいツールバーは ID "addon-bar"を持った、標準の XUL toolbar です。アドオンはこのバーにコンテンツを挿入することができますし、ユーザーはツールバーのカスタマイズにおいてボタンをアドオンバーにドラッグすることができます。このことはアドオンバーと旧ステータスバーの間の主要な相違点です。通常のツールバーですから、どんな XUL 要素でもアドオンバーに配置することができます。

注: 当分の間、ステータスバーの「くさび」 を置いておき、ステータスバーが存在することを期待するアドオンがうまく動作するようにします。これはすぐになくなりますので、あなたのアドオンをアップデートしてください!

上の記述のとおり、Firefox4になってステータスバーが削除され、アイテムのカスタマイズ可能なアドオンバー(ツールバー)になったのでちょっと遅いですが、以前のステータスバーのようにアドオンバーにアイコンをデフォルトで表示させる方法を書いておきます。

Firefox 3.6と Firefox 4に対応する

Firefox 3.6, Firefox 4に対応するために、statusbar.xulとaddonbar.xulの2つのファイルを用意します。
Firefox 3.6は、statusbar.xul。Firefox 4はaddonbar.xulになります。

statusbar.xul(Firefox 3.6用)

statusbar.xulに以下のコードを書いて、contentフォルダ内に置く。
Firefox 3.6はstatusbarにオーバーレイさせる。
<?xml version="1.0"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<statusbar id="status-bar">
		<statusbarpanel id="my-test-button"
			class="statusbarpanel-iconic" 
			oncommand="alert('Firefox 3.6');"
		/>
	</statusbar>
</overlay>

addonbar.xul(Firefox 4用)

statusbar.xulに以下のコードを書いて、contentフォルダ内に置く。
Firefox 4はツールバーパレットにオーバーレイさせる。
<?xml version="1.0"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<toolbarpalette id="BrowserToolbarPalette">
		<toolbarbutton id="my-test-button"
			class="toolbarbutton-1 chromeclass-toolbar-additional"
			label="test button" 
			oncommand="alert('Firefox 4');"
		/>
	</toolbarpalette>	
</overlay>

スタイルシートの追加

toolbarbutton.cssを作成し、以下の内容を記述。
#my-test-button {
	list-style-image: url("http://blog-imgs-47.fc2.com/j/s/f/jsfirefox/statusbar.png");
}

クロームマニフェストにオーバーレイを記述する

ブラウザとツールバーのカスタマイズウィンドウ(Firefox4用)にtoolbarbutton.cssをオーバーレイする。 バージョンがFirefox 4より低い場合、statusbar.xulをオーバーレイ。
バージョンがFirefox 4以上の場合、addonbar.xulをオーバーレイ。
chrome.manifestに以下の内容を追加する。
style  	 chrome://browser/content/browser.xul	        chrome://test/skin/toolbarbutton.css
style  	 chrome://global/content/customizeToolbar.xul   chrome://test/skin/toolbarbutton.css
overlay  chrome://browser/content/browser.xul  	chrome://test/content/statusbar.xul appversion<4.0
overlay  chrome://browser/content/browser.xul  	chrome://test/content/addonbar.xul  appversion>=4.0
chrome.manifestについてはMDNに詳しく載っています。

アドオンバーに初回起動時アイコンを表示させる

最後に、このままでは起動時にアドオンバーにアイコンが表示されないので、アドオンインストール時の初回にアイコンを表示するよう以下のコードを書く。
	var MyTest = {
		setAddonbarItem: function(){
			var addonbar = document.getElementById('addon-bar');//アドオンバー取得
			if(!addonbar)//アドオンバーが無い場合終了(Firefox3.6以下)
				return;
			var checkedPrefName = 'extensions.mytest.addonbarchecked';//アドオンバーのアイコンをチェックしたかどうかのpreference名
			var isChecked = false;
			var prefService = this.prefService.getBranch(null);	
			if(prefService.getPrefType(checkedPrefName) === prefService.PREF_BOOL){
				isChecked = prefService.getBoolPref(checkedPrefName);//preference取得
			}
			if(!isChecked){//初回起動時
				var itemName = 'my-test-button';//アドオンバーに表示するアイテムのid名
				var currentSet = addonbar.currentSet;
				var names = currentSet.split(/(\s+)?,(\s+)?/g);
				if(names.indexOf(itemName) < 0){
					addonbar.currentSet += ',' + itemName;
					addonbar.setAttribute('currentset', addonbar.currentSet);//アドオンバーに表示
					document.persist('addon-bar', 'currentset');//アドオンバーのアイテムの設定保存
				}
				prefService.setBoolPref(checkedPrefName, true);//アドオンバーのアイコンをチェックしたことをprefに保存
			}
		},
		get prefService(){
			delete this.prefService;
			return this.prefService = Cc['@mozilla.org/preferences-service;1'].getService(Ci.nsIPrefService);
		}
	};
	
	window.addEventListener('load',function(evt){
		MyTest.setAddonbarItem();
	},false);

完成品

FC2ブログだとxpiファイルをアップロードできないので、MEGAUPLOADにtest.xpiとしてアップしておきます。上の説明で分からない人は解凍してソースでも見てください。

参照


FC2ノウハウ
関連記事

Tag : Firefox javascript

コメントの投稿

非公開コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Re: 少しアドバイスです

わざわざ日本語でコメントくれてありがとう。
こんな拡張があったんですね。
便利そうなので機能の追加を考えてみます。
プロフィール

Yamapikarya

Yamapikarya

Firefox アドオンとかを開発してます。

最新記事
最新コメント
カテゴリ
月別アーカイブ
検索フォーム
RSSリンクの表示
QRコード
QR
その他
  • あわせて読みたい
アフィリエイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。