前回の記事で Microsoft Edge の拡張の作り方を紹介してからずいぶん間があいてしまいましたが今回から数回に別けて続きをお送りします。
前回の記事では、サンプルとして Web コンテンツ上でマウスの右ボタンをクリックした際に表示されるコンテキストメニューに独自のメニューを追加する機能の作成方法について紹介しました。
今回からは、残りのその他のアクションで動作する拡張について、特徴と具体的な作り方を紹介していきます。
取り上げるアクションは以下のとおりです。
- ブラウザーアクション
- ページアクション
- コンテントスクリプツ
(※Edge 拡張の概要と、コンテキストメニューの実装サンプルについてはこちらの記事をご覧ください。)
なお、今回から紹介するサンプルコードはすべて Google Chrome(2016年10月時点の最新のもの) でも動作します。
Edge 拡張を構成するファイル
その前に、前回の記事で紹介したつもりになっていて実際にはぜんぜん書いていなかった Edge 拡張を構成するファイルについて紹介します。
Microsoft Edge の拡張を構成するファイルは manifest (json)、background page (html)、Content scripts (js)、UI pages (html) の 4 種類のファイルです。
| ファイル | 説明 |
|
Manifest (json) |
定義ファイル(※必須) 拡張の名前や説明、アクセス権や拡張が使用するファイルなどを指定 |
|
Background page (html) |
拡張の機能をバックグラウンドで動作させるためのページ |
|
Content scripts (js) |
拡張の機能を実装するための JS ファイル |
|
UI pages (html) |
ポップアップや設定画面などのUI ページ |
これらのファイルで必須なのは manifest.json だけで、そのほかのファイルは用途に合わせて取捨選択して使用します。
ただし、manifest.json ファイルは単なる定義ファイルなので、これだけでは拡張として何らかの機能を提供することはできません。
よって、Microsoft Edge の拡張は、必ずその他の 1 つ以上のファイルと組み合わせて作られています。
ブラウザー拡張のアクション
ブラウザー拡張の API はさまざまな機能を提供しますが、ユーザーにそれらの機能を呼び出させるための実装(アクション)は以下の 4 つになります。
今回はブラウザーアクションの拡張について紹介します。
ブラウザーアクション
ブラウザーアクションの拡張は、Web ブラウザーのツールバーに表示されるアイコン、もしくは [詳細] メニュー (Edge のみ) に表示されるアイコンから拡張の機能を実行します。
ブラウザーアクションには HTML で記述したポップアップを関連付けることができるので、メニューを介して複数の機能を提供したり、テキストボックスのような入力 UI を配置して SNS への共有機能などを実装することもできます。
たとえば、以下のサンプルは Edge のツールバーをクリックするとポップアップ画面に Microsoft Edge 関連の Web サイト のリンクを表示するものです。
以降、ソースを使用して説明を行いますが、お手元で実際に動作させるには e-19.png という名前の 19 x 19 ピクセルのアイコン用の画像ファイルが必要です。
作成するのが面倒な方は以下の画像を保存して使用してください。
ブラウザーアクションの manifest.json
ブラウザーアクションの manifest.json は以下のようになります。
manifest.json のキー “browser_action” の内容に注目してください。
“default_icon” キーで、ツールバーに表示されるサイズのアイコンを、”default_title” でアイコン上に表示されるタイトルを指定しています。
“default_popup” キーでは、アイコンをクリックした際にポップアップとして表示される html ファイルを指定しています。
ブラウザーアクションのポップアップ用の html
ブラウザーアクションの拡張で使用する基本的なポップアップ用の html ファイルは以下のとおりです。
ご覧のとおりなんの変哲もない通常の html ファイルです。
ブラウザーアクションのサンプルの実行
前述のサンプルコードを実際に Microsoft Edge で動作させるには、以下の手順を実行します。
- 拡張用の各ファイルを配置するための空の作業フォルダを作成します。
- フォルダ内に icon という名前でフォルダを作成し、e-19.png という名前で 19 x 19 ピクセルの画像を保存します。
- テキストエディタに ブラウザアクションの manifest.json のサンプルコードの内容を貼り付け、manifest.json という名前で作業フォルダに保存します。
- テキストエディタで新しいテキストを作成し、ブラウザーアクションのポップアップ用の html のサンプルコードの内容を貼り付け popup.html という名前で作業フォルダに保存します。
- 前回の記事の Edge 拡張のテストインストール の内容を参考に Edge に拡張をインストールします。
- Edge のメニュー[…] ([詳細]) をクリックすると指定した拡張用のアイコンが表示されているので、マウスの右ボタンをクリックして [アドレスバーの横に表示]をクリックします。
![image]( "image")
- アイコンがツールバー上に表示され、クリックするとポップアップ画面が表示されるのを確認してください。
なお、ポップアップ画面内には Microsoft Edge 関連 Web サイトへのリンクがありますが、現状、クリックしてもなにも動作しません。
これは拡張の仕様でも HTML の記述が間違っているとかいうのでもなく、たんに Microsoft EdgeHTML 14.14393 の不具合です。(次回のアップデートで修正されるそうです)
今回作成した拡張を Google Chrome にインストールして使用するとポップアップ内のリンクが正常に動作するのが確認できます。
アイコンへの情報の表示
ブラウザーアクションの拡張では browserAction.setBadgeText メソッドを使用してアイコンの上に簡単な情報を表示できます。
browserAction.setBadgeText メソッドの書式は以下のとおりです。
browserAction.setBadgeText({text: ‘表示したい情報’ });
このメソッドを使用して、リンクをクリックした数をカウントして表示するように、ここで作成した拡張を改造してみましょう。
手順は以下のとおりです。
- popup.html のソースでコメントアウトされていた以下のタグを有効にします。
<script src=”clickCounter.js”></script>
- テキストエディタで新しいテキストを作成し、以下のコードを貼り付けて clickCounter.js という名前で作業フォルダに保存します。
以上で拡張の改造は完了です。
現在インストールされている拡張を再読み込みして実行します。
Edge 拡張の再読み込みの手順に再読み込みを行ったあと、拡張のポップアップ画面内のリンクをクリックしてください。
アイコンの上に数字が表示され、ポップアップ画面内のリンクをクリックするたびにカウントアップされていくのが確認できます。
まとめ
今回はブラウザーアクションの拡張の作成方法について紹介しました。
ポップアップで Web サイトへのリンクを表示するくらいであれば、JavaScript の記述も必要ないということがご理解いただけたかと思います。
次回はページアクション拡張について紹介します。
<付録>Edge 拡張の再読み込み
Microsoft Edge でテストインストールされている拡張の関連ファイルを再読み込みさせるには以下の手順を実行します。
- メニューバーから […] (詳細) メニューをクリックし、[拡張機能] をクリックします。
- インストールされている拡張の一覧が表示されるので、目的の拡張をクリックします。
- 選択した拡張の設定画面が表示されるので、 [拡張機能の再読み込み] をクリックします。
以上の手順でインストールされている拡張のファイルは新しいものに置き換えられます。
