Firefox のアドオンのサンプルを使って『作成方法』を知る為の準備

1) MKEditor のインストール
( 使いなれたエディタで個別にファイルを開いても良いです )
2) about:config で、extensions.alwaysUnpack を true に設定
3) Twitter用埋め込みコードを取得する Firefox アドオン をインストール
( http://webcraft.seesaa.net/article/249055084.html )
4) Firefox のプロファイルを開くスクリプトをダウンロード

スクリプトの実行

1) フォルダが一つあるフォルダが開くのでその中に入ります
2) extensions フォルダの中に移動します
3) [e-mail] フォルダの中に移動します
4) [e-mail] を MKEditor で開きます



install.rdf の内容

em:id	extensions.alwaysUnpack が true なので展開されています ( アドオンそのものが登録されているフォルダです )
em:name	アプリケーション( アドオン )の名前です この名前で、ソース上のいろいろな部分を(便宜的なものを含めて) 管理しています
em:version	このアプリケーション( アドオン )のバージョンです ※ 新しいバージョンにして、上書きインストールします
em:creator	英語ロケールでの作者名です 日本語作者名は、em:localized 内の em:creator で指定します

chrome.manifest

これに関する詳細は、Mozilla の Chrome Registration のページにありますが、
だいたいにおいて変更する場所を熟考する必要はありません。最も重要な事実は、
chrome://browser/content/browser.xul が示すものが、ブラウザの定義そのもので
あるという事で、これをアドレスバーに入力して表示させた上で、Firebug でブラ
ウザのコンテンツの id を知る事ができます

例えば、overlay.xul にある contentAreaContextMenu という id は、既にブラウ
ザに定義されている右クリックで表示されるメニューの id です。ユーザーは自分
のアドオンで、そこに対してオーバレイして追加の機能を実装します

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://sk1/skin/overlay.css" type="text/css"?>

<!DOCTYPE overlay SYSTEM "chrome://sk1/locale/overlay.dtd">

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<script type="application/x-javascript" src="chrome://sk1/content/overlay.js" />
	<stringbundleset id="stringbundleset">
		<stringbundle id="sk1-bundle" src="chrome://sk1/locale/overlay.properties" />
	</stringbundleset>
	<popup id="contentAreaContextMenu">
		<menuitem id="sk1-menu"
		          class="sk1-class"
		          label="&sk1_Text.label;"
		          oncommand="sk1_obj.onMenuItemCommand(event);" />
	</popup>
</overlay>

JSON オブジェクトの stringify メソッドの第３引数の使い方

JSON.stringify Function (JavaScript)

上記リンク先は Microsoft の英文ドキュメントです。IE に関しては、IE8 と IE9 の
標準モードで動作します。
Supported in the following document modes: Internet Explorer 8 standards,
Internet Explorer 9 standards. Not supported in the following document 
modes: Quirks, Internet Explorer 6 standards, Internet Explorer 7 standards.

Firefox、Google Chrome、Opera、Safari のいずれでも動作します。

<script type="text/javascript">
alert(JSON.stringify( {"type": 1, "name": "test", "obj":{"level": 2,"value": 1},"arr": [1,2,3]},null,4));
</script>

コードのテスト

■ 第３引数は省略されると、スペース無しで文字列が作成されます
■ 第３引数が数字の場合は、その数のスペースでインデントされて整形されます
■ 第３引数に何か文字列が入っている場合は、その文字列でインデントされます
(その際、"\t" 等が適当です)
■ 第３引数が文字列の場合、最初の10文字が使用されます

Google Chrome の 『実用クイック検索』

1) CTRL+E または CTRL+K
2) ? の後に検索文字列を入力
3) ALTキーを押しながら ENTER

で、新しいタブを開いて既定の検索エンジンを使用して検索を行います。


その他のショートカット

● Alt+F または Alt+E で、レンチアイコンのメニューを開きます
● CTRL+0 で拡大・縮小を元に戻します
● SHIFT キーを押しながらマウスホイールを動かすと水平スクロールします
● CTRL+SHIFT+B でブックマークバーの表示・非表示
● F12 でデベロッパーツールを開く(または閉じる)
● ALT を押しながらリンクをクリックするとダウンロード


★ 拡張機能のページは、ALT+E でいったんキーから指を離して L E ENTER とタイプします

ブラウザ別『ソース』の表示

IE

IE では、右クリックからソースの表示をするのが通常ですが、それはカーソルのある部分がフレームの場合、フレームのソースを表示してくれるからです。トップウインドウのソースが必要な場合は、CTRL+U をタイプするといいと思います。

IE9 以降では、ソースを表示するビュアーを F12 で表示する『開発者ツール』のファイルメニューから設定する事ができます。それより前でも、レジストリに登録されるので、レジストリを直接変更する事で使いなれたエディタで見る事ができまます

※ IE11 から、開発者ツールでソース表示のビュアーを変更できません

IE11のソースエディタの変更

IE ソースエディタのレジストリを開くスクリプト
( 対象エントリが無い場合は開きません )


CTRL + U で表示されるブラウザ

IE11 と Google Chrome と Firefox と Opera がこのショートカットキーを使っています。Safariは何故か、CTRL+ALT+U です。IE は直接でき無く、いったんメニューのショートカットキーを使ってからメニューの中のショートカットキーを使います


外部ビュアーを利用できるブラウザ

IE と、Firefox と、Opera が利用できますが、通常の設定で可能なのは Opera のみです。IE は、IE8 以降で開発者ツールから設定できますが、それより前はレジストリを直接設定する必要がありました(IE11 以降で再度レジストリを変更するようになりました)。Firefox は、about:config から、view_source.editor.externalとview_source.editor.path を設定します。( アドオン等で設定する事も可能です )

※ Opera の設定場所


Configuration Mania :: Add-ons for Firefox



Chrome のビュアーは拡張仕様?

F12のデベロッパーツールでビュアーそのものを見る事ができますが、普通に TABLE 要素で作られていました。

Google Chrome の alert だけが CTRL+C で内容を取り出せます( 良くできてる )

Firefox と Opera と Safari は何も起きないですが、Chrome は表示された文字列だけをクリップボードへコピーします。Firefox と Opera は 文字部分を選択すれば、コピーできます。IE は、余計なものも一杯コピーします。

▼ IE のコピー結果( 点線もコピー結果 )
---------------------------
Web ページからのメッセージ
---------------------------
日本語表示
---------------------------
OK   
---------------------------

通常、テキストエリアを使ってクリックして選択状態にしてコピーさせる事が多いと思いますが、一連のオペレーションの一部として使う場合に alert を使う効果が大きい場合があると思います

IE は Windows API の仕様ですから、alert 以外の場合( 特にエラー詳細 )を取り出す場合に昔から用いられています。

jQuery のイベント名によるイベント登録の中身

以下のように、each メソッドで登録されています。引数が無い場合は trigger 処理となり、イベント登録は、on メソッドで行われているので return arguments.length > 0 の部分でその判断をしています。

※ bind でも on メソッドで登録されています。

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
	"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
	"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {

	// Handle event binding
	jQuery.fn[ name ] = function( data, fn ) {
		if ( fn == null ) {
			fn = data;
			data = null;
		}

		return arguments.length > 0 ?
			this.on( name, null, data, fn ) :
			this.trigger( name );
	};

	if ( jQuery.attrFn ) {
		jQuery.attrFn[ name ] = true;
	}

	if ( rkeyEvent.test( name ) ) {
		jQuery.event.fixHooks[ name ] = jQuery.event.keyHooks;
	}

	if ( rmouseEvent.test( name ) ) {
		jQuery.event.fixHooks[ name ] = jQuery.event.mouseHooks;
	}
});

※ jquery-1.7.1.js