Firefox Archive

Firefox Developers Conference 2009 - アドオンで Web の未来を切り開く！（#fxdevcon2009）
に行ってきました。

セミナーの内容は資料とかどっかにあがるだろうし、誰かが書いてくれると思うので、
そちらを参考にしてもらうとして、ここでは仕入れた情報を生かしてプログラミングしてみます。

というわけでJetpackingです。

パラレルでやってたはてなの方を聞いてたんで、「3分Jetpacking」は聞けませんでしたが、
せっかくきっかけをもらったのでやります。

作るのはMake Linkの簡易版みたいなやつ。
bornneet.comやtnantoka.netかどうかを判断して、
内部/外部リンク用のaタグをクリップボートにコピペするだけです。

はい、僕専用です。

それでは、はじまりはじまり。

準備する

参考サイトの通りです。

・・・じゃあんまりなので、軽く説明を。

Mozilla Labs Jetpack | Exploring new ways to extend and personalize the Web
から、アドオンをインストールすれば終了です。
以降、再起動不要のアドオン開発が始まります。

※ Firebug最新版だとなんかうまく動きません。
　上記サイトに従ってfirebug-1.4X.0a27を入れたら大丈夫でした。
　b3でもいけました。（2009/11/10）

作る

さて、作っていきます。

といっても「about:jetpack」にアクセスして、
Developのところにあるテキストエディタで試しながら作ればいいだけです。

んで、できたのがこれ↓
（Firefoxでクリップボードが簡単に操れて便利！！bookmarkletだとFlash使わないとできないもんなぁ。）

// これやらんとmenu/clipboardが使えない
jetpack.future.import('menu'); 
jetpack.future.import('clipboard'); 

jetpack.menu.context.page.add({
	label: 'External Link',
	command: function() {
	
		var url = jetpack.tabs.focused.contentDocument.location.href;
		var external = '" class="external" target="_blank" title="新しいウィンドウで開きます"';
		
		if(url.search('bornneet.com') != -1 
			|| url.search('tnantoka.net') != -1
			|| url.search('tagget.org') != -1 
			|| url.search('bornneet.blog.shinobi.jp') != -1) {
		
			external = '"';	
			
		}
	
		jetpack.clipboard.set('>a href="' + url + external + '<' + 	
			jetpack.tabs.focused.contentDocument.title + '>/a<');
	}
});

たったこれだけで、コンテキストメニューからリンクコピペ機能が使えます。
（menuやclipboardの機能はimportを書かないと動かないので注意です。）

僕以外には全く役に立ちませんが、
External Link
からインストールできます。

以上です。
いやぁ、噂通りお手軽にいろいろできそうですねぇ。
これからもちょっとした困り事があったら作ってみようと思います。
（bookmarkletでできないことでも諦めなくてよくなる！）

参考サイト

Jetpackチュートリアル | Screw-Axis
about:jetpackのtutorialの日本語訳＋α。わかりやすいです。

Image Editor Jetpack
コードを見ればJetpack 0.6の使い方が一目で分かるAza Raskinさんの作品。
今日の講演でもこれを使ったデモ（live coding）をしてくれました。
ちなみに、男前です。

Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記
公開用htmlとかのわかりやすい説明。

追記 2009/11/08 23:30

こんな感じになります。