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
1 2 3 4 5 6 7 8 | <!DOCTYPE html> < html > < head > < script type = "text/javascript" src = "sample.js" ></ script > </ head > < body > </ body > </ html > |
sample.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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 等を利用すると必要な情報の取得がラクになると思います。
今回参考にしたのは、以下のサイトです。
- Adding Entries to the Standard Context Menu
- [InetSDK] ブラウザの標準コンテキスト メニューに項目を追加する
- external object
- menuArguments property
最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!