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

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 の フォロー」 お願いします!!