MicroSoft Edge で拡張機能開発
MicroSoft Edgeがリリースされた直後は拡張機能もなく使いづらいブラウザだなと思って遠ざかっていましたが、いつのまに拡張機能が追加され、さらに自作できるまでに変化していました。
今回、ざっくり作ってみたので紹介します。
[ad#top-1]
まずは拡張機能開発できるように設定
Edgeの開発者向け設定画面を開きます。アドレスバーにabout:flagsと打ち込むと開くことができます。
下の画面が現れるので、その中から「拡張機能の開発者向け機能を有効にする(…)」にチェックを入れます。チェック後、必ずEdgeを起動しなおしてください。
そうすると、拡張機能メニューに自作のプログラムを読み込むことができるようになります。メニューから「拡張機能」を選びます。
すると、下の図のように「拡張機能の読み込み」ボタンが現れていることを確認してください。
ソースコード
まずは、manifest.jsonです。メイン画面はpopup.htmlというファイル名で設定されています。アドレスバーに表示されるアイコンはicon.pngです。いずれも同じフォルダ内に設置しています。
次にpopup.hemlです。あくまでTestという文字を表示するだけの簡単なコードとなります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body style="min-width:250px;min-height:250px;margin:0px;"> Test </body> </html>
読込み
次に作成したプログラムを読み込みます。
拡張機能画面から、「拡張機能の読み込み」ボタンをクリックします。
フォルダーの選択ダイアログが現れるので、自作したプログラムのフォルダを指定します。
すると、以下のように拡張機能が組み込まれます。もしここでエラーメッセージが現れたら、manifest.jsonの構文エラーを疑いましょう。僕の場合はカンマの入れ忘れが多かったです。
このままでは、まだアドレスバーに組み込まれていません。メニューの上部に位置しているので、右クリックメニューの「アドレスバーの横に表示」をクリックします。
これでアドレスバーに組み込まれました。
アイコンをクリックすると、以下のようにポップアップウィンドウが現れ、popup.htmlの内容が現れます。
今回は簡単な例を使って、Edgeに自作の拡張機能を組み込む方法を紹介しましたが、オンラインブックマークを作り、Chromeと共有できるものを作りたいなと思っています。
[ad#ad-1]
スポンサーリンク