ゼロからはじめる Microsoft Edge 用の拡張の作り方


8 月に公開される Windows 10 Anniversary Update に搭載されている Edge では拡張 (エクステンション) がサポートされています。

この機能はすでに Windows 10 Insider Preview の最新のビルドに搭載されている Edge でもお試しいただくことができます。

Windows 10 Anniversary Update 公開に先立ち、今回から 2 回に別けて、Windows 10 Insider Preview の Build 14379 を使用した Edge の拡張の作成方法について紹介します。

その前に Edge の拡張について簡単に紹介しておきましょう。

Microsoft Edge の拡張

Edge の拡張の目的は、機能名のとおり開発者によって 「Edge の機能を拡張」 = 「できないことをできるようにする」 ことです。

同様の目的を達成するための機能として、Internet Explorer 時代は ActiveX や Flash といったプラグインが使用されてきました。

これらネイティブコードによるプラグインは OS の API に直接アクセスできるため強力である反面、開発や安全性の担保が難しく、セキュリティリスクの温床となってしまいました。

Edge の拡張は、こういったリスクを回避するため、そして Web 開発者が慣れ親しんだ技術で開発できるよう HTML + JavaScript ベースで行うようになっています。

さらに、Edge の拡張は Windows ストアを介してのみユーザーに配布されます。

Windows ストアでは、開発者からポストされた拡張に対し安全性を含め多面的な審査を行い、合格したものだけをユーザーからダウンロード可能にします。

開発者は Windows ストアを介して拡張を配布することで、SEO、マネタイズなどのアプリストアのエコシステムを利用することができます。

拡張機能の相互運用性

Windows 10 がリリースされる際、Edge の拡張機能については 「Chrome や Firefox の拡張機能がそのまま使用できるようになる」と言われていました。

それでは実際にどうなっているかというと、「そのまま」というわけにはいませんが、Chrome 固有のよほど特殊な機能を使用していない限りはごく少量のコードの変更で Chrome 用の拡張を動作させることができます。

多くの場合それは、ネームスペース chrome を browser に変更するくらいです。

以下のビデオでは、Chrome 用の拡張を Edge に移植するデモ (0:11:45 付近) が紹介されており、その中で、Edge の中で存在しないネームスペース “chrome” に Edge 内で同様の機能をもつ “browser” をセットしているのが見られます。(00:25:44 付近)

Building Extensions for Microsoft Edge (Edge Web Summit)


また、Web ブラウザーの拡張における API も標準化の方向に進んでいます。

2016年5月2日(米国時間)、W3C の Browser Extension Community Group のメーリングリストにおいて、Microsoft、Mozilla、Operaの三社はブラウザの拡張における API やマニフェスト、パッケージを標準化することを以下のように共同で提案しています。

Edge の拡張は、標準化の提案に沿う方向で機能がサポートされます。

拡張むけに提供されている API

Edge 拡張用に提供される API は大まかに以下のものがあります。1 ~ 3 の API に関しては拡張の形態をある意味決定づけるものと言えるでしょう。

  1. browserAction
    ブラウザーのツールバーにクリック可能なボタンを追加します。ポップアップは、ボタンに関連付けすることができます
  2. contextMenus
    ブラウザーのコンテキストメニュー(右クリックメニュー) に項目を追加します。その形式上、選択されているなんらかのものに対し、なんらかの処理を行います。
  3. pageAction
    特定のページに関連したアクションに向いています。pageAction は Web ブラウザーのアドレスバーの中にクリック可能なアイコンとして表示され、アイコンのクリックやポップアップの表示をリスンできます。
  4. cookies
    cookie の取得や設定、cookie が変更された際に通知を行います。
  5. webRequest
    HTTP リクエスト作成のさまざまな段階のイベントリスナーを追加します。イベントリスナーはリクエストについての詳細な情報を受け取り、リクエストを修正するか、またはキャンセルすることができます。
  6. webNavigation
    ナビゲーションのためのさまざまな段階でのイベントリスナーを追加します。webRequest の API が HTTP 層より低いレベルをサポートするのに対し、webNavigation はブラウザー UI からビューまでの上位のレベルを扱います。
  7. i18n
    拡張を国際化します。拡張にパッケージされたロケール ファイルからローカライズされた文字列を取得、ブラウザーの現在の言語を検索し、Accept-language ヘッダーの値を見つけるには、これらの Api を使用できます。
  8. runtime
    拡張とその実行環境の情報を提供します。また他の拡張との通信なども提供します。
  9. storage
    データの保存や取得、保存されたアイテムの変更をリスンします。
  10. tabs
    ブラウザのタブシステムと対話します。表示されているタブのリストの取得や、タブの作成、変更、組み替えなどが行えます。
  11. windows
    ブラウザのウィンドウと会話します。この API を使用してウィンドウのオープン、変更、クローズが取得できます。

これら API の詳細については以下のドキュメントを参照してください。

 

はじめての Edge 拡張の作成

ここからは実際に Edge 用の簡単な拡張の作成方法を紹介します。

前述しましたが、Edge の拡張はブラウザーベンダー 3 社が標準化を進めている仕様をサポートしており、その仕様自体は Chrome の拡張と非常によく似ています。

以降、単純な Edge 拡張の作成方法をステップバイステップで紹介します。

今回作成するもの

今回は拡張のサンプルとして、以下の機能を実装します。

  • コンテキストメニューの追
  • ブラウザー上で選択されている文字列の取得

準備するもの

これから紹介する方法で Microsoft Edge の拡張を開発するのにあたって必要となるものは以下のものです。

  • Build 14379 以上の Windows 10 に搭載されている Microsoft Edge
  • なんらかのテキストエディタ (※)
    (※ Windows、Mac、Linux で使える Visual Studio Code が便利です)

拡張を作成するのに必要なファイル

Microsoft Edge の拡張を作成するには、最低限以下のファイルが必要です。

  • manifest.json
  • background.js

ファイルの中身は空でかまわないので、あらかじめ作成しておきましょう。なお、ファイルの文字コードはかならず UTF-8 を指定してください。

各ファイルへの記述

ここからは Edge の拡張を開発するための必要最低限の構成について紹介していきます。

manifest.json

拡張がどういったものであるか、設定を記述しておくためのファイルです。

内容は Chrome の拡張に使用されるものとほぼ一緒ですが、若干の違いがあるので注意が必要です。

以下に Edge 拡張の manifest.json ファイルに設定可能なキーの一覧が記載されています。

上記ページには、Required keys (必須のキー) というところがあり、一見するとこれだけ設定しておけば動作するような気がしますが、当然のことながら目的に沿ったキーを設定しないと拡張を Edge にロードさせることはできません。

今回の拡張が提供する機能で設定が必要な manifest.json のキーと値は以下のようになります。

キー 内容
name 拡張の名前
author 作成者の名前
version 拡張のバージョン
description 拡張の説明
background 拡張の機能を実装した html ファイル、もしくは js ファイルを指定します。

ページは以下のように
"background": {
  "page": "background.html"
}

js は以下のように記述します。
"background": {
    "scripts": ["background.js"]
}

また Edge では persistent の設定が必要になるので、以下の設定を追加します。
"persistent": false

permissions 許可する機能を指定します。
今回はコンテキストメニューを追加するので “contextMenus” を指定します。


今回のサンプルの manifest.json ファイルの具体的な設定は以下になります。

background.js

manifest.json ファイルの background キーで指定した background.js を記述します。

このファイルは拡張の機能を記述するためのファイルで、ファイル名は任意のものでかまいませんが、今回は便宜的に background.js としました。

今回の background.js では、コンテキストメニューの作成とメニューをクリックされた際のアクションを記述します。

新しいコンテキストメニューを追加するには、既存のコンテキストメニューのインスタンスをあらわす browser.contextMenus クラスの create メソッドを使用します。

新しく作成するメニューの情報は、イベントハンドラの内容も含め、オブジェクトとして create メソッドの第一引数に渡します。

具体的な記述は以下のようになります。

ここまでの作業で Edge 用のシンプルな拡張が完成しました。

Edge にテストインストールして実際に動作するか確認してみましょう。

Edge 拡張のテストインストール

前述のとおり、正式な Edge の拡張は Windows ストアを介して入手する必要があり、既定の状態では自作の拡張をインストールすることはできません。

作成した Edge の拡張をテストインストールするには Edge の [開発者向け設定] の既定の設定を変更する必要があります。

具体的には、ナビゲーションバーに about:flags と入力して [開発者向け設定] 画面を表示し、[拡張機能の開発者向け機能を有効にする(これによりデバイスが危険にさらされる可能性があります)]チェックボックスにチエックをつけ Edge を再起動します。

image

 

作成した拡張をインストールします。

再起動した Edge のツールバー左端の […] (設定)メニューをクリックし、[拡張機能] をクリックします。

[拡張機能] パネルが表示されるので、同パネル内の [拡張機能の読み込み] ボタンをクリックし、フォルダ選択ダイアログボックスで、作成した拡張が格納されているフォルダを選択します。

image


拡張が正しくロードされると、[拡張機能] パネルに拡張の情報が表示されます。

loaded_ext

 

これで Edge への拡張のテストインストールは完了です。

作成した拡張の使用

Edge でページの文字列を選択し、マウスの右ボタンをクリックしてコンテキストメニューに新しいメニューが表示されていることを確認してください。

image

 

コンテキストメニューに追加されたメニューアイテムをクリックし、選択された文字列が alert ボックスで表示されるのを確認してください。

Edge での拡張のデバッグ

テストインストールした拡張をデバックするには、Edge のツールバー左端の […] (設定)メニューから [拡張機能] パネルを表示し、デバック対象となる拡張をクリックします。

image


拡張の詳細画面が表示されるので、[検査] のところの 「バックグラウンドページ」 というリンクをクリックします。

debug_ext2


Edge の F12 開発者ツールが起動し、拡張のデバッグを行うことができます。

まとめ

今回は Microsoft Edge 拡張の開発概要と、実際の開発方法について紹介しました。

次回は、今回作成した拡張にオプションページとアイコンを追加します。

 

その他

個人的なプロジェクトとして Edge 用のテキスト読み上げ拡張を GitHub 上で開発していますので、ご興味のある方はご覧ください。

osamum/textSpeech_exteneion_for_MSEdge

image

 

Real Time Analytics

Clicky

Comments (2)

  1. Edge拡張の作り方について続編を公開させていただきました。
    コピペで作れるサンプルがありますので、ぜひお試しくださいませ。
    Microsoft Edge 拡張の作り方:browserAction 編
    https://blogs.msdn.microsoft.com/osamum/2016/11/01/how-to-make-msedge-extensionbrowseraction/

    Microsoft Edge 拡張の作り方:pageAction 編
    https://blogs.msdn.microsoft.com/osamum/2016/11/01/how-to-make-msedge-extensionpageaction/

    Microsoft Edge 拡張の作り方:contentScripts 編
    https://blogs.msdn.microsoft.com/osamum/2016/11/01/how-to-make-msedge-extensioncontentscripts/

  2. Chrome でも動作する Edge 拡張のつくり方について記事を公開しました。

    Microsoft Edge 拡張の相互運用性
    https://blogs.msdn.microsoft.com/osamum/2016/11/02/msedge_extensions_interoperability/

Skip to main content