Micorosoft Edge(プレビュー)の拡張を作ってみるでは未公開の情報を元にノリと勢いでChrome拡張をEdge拡張にしてみましたが、さっくりとできたわけではなくAPIに関しては当然少し調査してから試しました。
その調査方法兼デバッグ方法についてせっかくなのでメモっておきます。もちろん将来のビルドでは手順が変わる可能性がかなり高いです。
まずはChromeが持っているpermissionをすべて列挙したマニフェストを持つ空の拡張を作ります。JavaScript不要です。
{
"manifest_version": 2,
"name": "Dummy Extension",
"version": "1.0",
"background": {
"page": "background.html"
},
"permissions": [
"activeTab",
"alarms",
/* 長いので省略 (https://gist.github.com/mayuki/5ae554c8e825f32921c7) */
"webRequest",
"webRequestBlocking"
]
}
バックグラウンドページはこんな感じでtitle要素だけ。
<!DOCTYPE html>
<title>Dummy Extension - BackgroundPage</title>
そしてACLを付けて、
icacls . /grant "*S-1-15-2-3624051433-2125758914-1423191267-1740899205-1073925389-3782572162-737981194":"(OI)(CI)(WDAC,WO,GE)"
Edgeに読み込ませます。
デバッグコンソールを開く
これで拡張は読み込まれましたがEdgeのデバッグする口がありません。Chromeなどでは拡張画面からいろいろ開けるのですがそういうインタフェースは見当たりません。
そこでF12開発者ツールをスタンドアローンで立ち上げます。実は結構前からF12開発者ツールは単体で起動できるようになっています。
単体で起動するにはC:\Windows\SysWOW64\F12
にあるF12Chooser.exe
を実行します。するとF12開発者ツールをどのインスタンスのEdgeにアタッチするか、という画面が表示されます。
この画面でさっき作った”Dummy Extension - BackgroundPage”を選択します。すると指定したページ、つまり拡張のバックグラウンドページにアタッチされたF12開発者ツールが起動します。
そうしたらあとはコンソールでいろいろ試してみます。
chromeオブジェクトにはほとんど機能がないこと、pageActionの実装が中途半端なこと、webRequest/webNavigationがある(使えたとは言っていない)といったことが分かります。コンテキストメニューを足してみるのもここからできます。
ちなみにこのアタッチする手段を使うことで拡張をデバッグできます。…が、読み込み時のエラーのキャッチはできないのでなかなか厳しいです。そのあたりは将来正式に解放されるときに手段が整うのではないかと思います。
Microsoft Edgeのブラウザーに対する拡張がついにWindows 10 Insider Preview build 14291からサポートされました。
サポートされたのですが現状は拡張機能のプレビューということで開発者には特に情報は開示されていません。
この辺りはBuild 2016で発表されるのではないかと思います。
せっかくサポートされたので開発情報はないものの試行錯誤で作ってみます。
作り方も「Google Chrome向け拡張を少しの変更で動かせるようになる」という話は出ていて、
公開されているプレビューの拡張機能も適当なところにぶちまけられたパッケージ化されていないものを読み込む感じなので作れそうです。
というわけで以前から「選択した文字列をGoogleで検索する」機能が欲しいと思っていたのでそれを作ることにします。Google Chromeには標準であるアレです。
そもそもGoogle Chrome拡張のAPIのどこまでがサポートされているのかわかりませんが、そのぐらい簡単なものなら動くだろうみたいな勢いです。
出来上がりはこんな感じです。
便利なのです。#Chromeでは前からできる #IEもアクセラレーターで出来た
Google Chrome向けに作る
いきなりEdgeで作り始めると色々とハマるのでとりあえず最初はまずGoogle Chromeで動くように作ります。
用意するファイルは次の3つです。
- manifest.json
- background.html
- background.js
まずはマニフェストですが、最低限のことを書いてバックグラウンドページとパーミッションを指定します。
{
"manifest_version": 2,
"name": "Google Search for Context Menu",
"version": "1.0",
"background": {
"page": "background.html"
},
"permissions": [
"contextMenus"
]
}
background.htmlもbackground.jsを読むだけの人に。
<!DOCTYPE html>
<html>
<head>
<title>Background</title>
<script src="background.js"></script>
</head>
<body>
</body>
</html>
メインの処理であるところのbackground.jsではコンテキストメニューを作成します。ちなみにUTF-8とかで保存しておかないと事故が起きるかもしれません。
chrome.contextMenus.create({
id: 'searchGoogleForSelection',
title: 'Search Google for "%s"',
contexts: ['selection'],
onclick: (info, tab) => {
chrome.tabs.create({
url: 'https://www.google.com/search?q=' + info.selectionText
});
}
});
コンテキストメニューのAPIはchrome.contextMenus - Google Chromeにある通りで、項目がクリックされたらタブを開く処理を書いておきます。
で、この一式をChromeに読み込ませます。Chromeの拡張の画面から”Developer Mode”を有効にして”Load unpacked extension…”で読み込ませることができます。
特にエラーがなければ適当なページで文字列を選択してコンテキストメニューを開くと項目が増えているはずです(まあ同じものをChromeが提供しているので被ってますが)。
Microsoft Edgeで動かす
というわけでChromeで無事動作したらEdgeで動かせるように対応します。
まずはbackground.jsを修正する必要があります。修正点は2点で
このコマンドはEdgeがフォルダーとその配下のファイルにアクセスできるようにするための権限付与です。EdgeはAppContainerに閉じこまれててファイルアクセスに制限がかかっているので必要なのでしょう。そのあたりはNyaRuRuさんのエントリーが詳しいです。
変更はこれだけで、あとは拡張から読み込ませて、コンテキストメニューに出てくれば成功です。簡単ですね。
というわけで本当にChrome拡張を移植できるらしいことを確認できました。早くいろいろなAPIがそろって、情報が公開されるのが楽しみです。
既知の問題
どうもEdgeを再起動すると起動時にバックグラウンドページを自動では読み込んでくれないらしく、再読み込みが必要になります。Chromeではそういうこともないので多分プレビューだからなのでしょう。たぶん…。
ついでに
そういえばGitHubのドキュメントにも拡張周りが少し追加されていたので訳しておきました。
さらについでにMicorosoft Edge(プレビュー)の拡張について調べる、デバッグする方法についても書いておきました。