IE の 右クリック メニュー 拡張

2013年5月11日 21:58 , , , 0 件のコメント

IE の 右クリック メニュー（コンテキストメニュー） に独自項目を追加、実装するチュートリアルです。

コンテキストメニュー項目はレジストリに登録し、選択時に実行される実装は HTML と JavaScript で行います。 以下では、登録するレジストリ と 実行される HTML & JavaScript について、順に見ていきます。

コンテキストメニュー項目の作成

レジストリに "キー" を追加することで コンテキストメニュー項目 が作成されます。 新規キー を作成する場所は以下の場所です。 

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt\[コンテキストメニュー項目名]

@="[コンテキストメニュー選択時に起動するHTMLへの絶対パス]"

"Contexts"=dword:[トリガ条件]

"Flags"=dword:[ウィンドウ起動]

キーの名称（必須）

コンテキストメニューの項目名として表示したい文字列をキーの名称にします。 コンテキストメニューの名称にアンパサンド(&)を利用すると、ショートカットキーが利用できるようになります。

@ キーの既定値（必須）

作成したキーの(既定)の値には、コンテキストメニュー項目が選択されたときに実行される HTML への絶対パスを記載します。 HTML の内容と実装は以下の コンテキストメニュー項目選択時の実装 をご参照ください。

Contexts DWORD値（オプション）

作成したコンテキストメニュー項目をどのような条件下（コンテキスト下）で表示するか指定します。 この値はビットマスクになっているので、以下の表から必要とする条件の OR を取った値を記載します。

例えば、デフォルト(0x01)、画像(0x02)上でコンテキストメニュー項目を表示させたい場合、 0x03 を指定します。

コンテキスト 値
デフォルト 0x01
画像 0x02
コントロール 0x04
テーブル 0x08
テキスト選択 0x10
アンカー 0x20
不明 0x40

Flags DWORD値（オプション）

0x1 を指定した場合、モーダルダイアログを起動します。
0x0 の場合、ダイアログ表示しません（既定）。

コンテキストメニュー項目選択時の実装

コンテキストメニューから呼び出される HTML では、以下のオブジェクトから呼び出し元の情報を探します。

  • window.external.menuArguments
    コンテキストメニューを開いた元の window オブジェクトが保存されています。

  • window.external.menuArguments.event
    コンテキストメニューを開いたときの イベントオブジェクト が保存されています。

上記 オブジェクト を利用することで、任意の処理を実行していきます。 以下に載せる HTML および JavaScript では、"コンテキストメニューが開かれたときの位置" と "選択文字列" を表示します。

sample.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="sample.js"></script>
</head>
<body>
</body>
</html>

sample.js

try {

    // コンテキストメニューを開いた元の Window オブジェクトを取得
    var ownerWindow = window.external.menuArguments;

    // コンテキストメニューを開いたときのイベントオブジェクトを取得
    var ownerEvent = ownerWindow.event;

    // 選択文字列を取得
    // NOTE: 選択されていないときは空文字列になる
    var selectedText = '';
    selectedText += '"';
    selectedText += ownerWindow.document.selection.createRange().text;
    selectedText += '"';

    // 出力するメッセージを作成
    var message = '';
    message += 'クリック位置： ';
    message += ownerEvent.screenX + ', ' + ownerEvent.screenY;
    message += '\r\n';
    message += '  選択文字列： ';
    message += selectedText;
    
    // メッセージを表示
    window.alert(message);

} catch ( exception ) {

    window.alert(exception);

}

既定では モーダルダイアログ 表示しないので、スクリプトを読み込むだけで HTML には特に何も記述しません。 JavaScript は普通に扱えるので、 jQuery 等を利用すると必要な情報の取得がラクになると思います。

今回参考にしたのは、以下のサイトです。

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！