MS Edgeでブラウザ拡張を動かす実演
こんにちは
https://gyazo.com/422954eb4591d345c7d507cae73748ae
Notaでアルバイトしてます
会場提供です。
いつでも貸すんで言ってください！！！！！！
https://gyazo.com/8e8fd8f0a1fdd36510bd2526d1d7e509 https://gyazo.com
https://gyazo.com/cf376abb14e86c00da65dc50d9688e0c https://scrapbox.io
YAPC::Kansai 2016 Osaka
コアスタッフやってる
来てくれ！！！！！
https://gyazo.com/1a685ddcf0e0d1c9e60f17a20da8a16c http://yapcjapan.org/2017kansai/
Nintendo Switch予約したぞ
https://gyazo.com/7f95655cec1f8cc33c982e85f2cd83ce
今日のテーマ
Extension for MS Edge
例によって browser.tabs.captureVisibleTabが未実装なので、キャプチャするデモはないです
コンテキストメニューからアップロードできるとこまで
Extension for MS Edge
MS Edge向けのブラウザ拡張
WebExtension互換API
去年の8月のAnniversary Updateで利用可能になった
Chrome ExtensionをMS Edge向けに変換する
（ということを資料を作っていて気付いたので試してないです 🙇）
主に必要なこと
chrome キーワードは使えない
browser キーワードのみ
manifest.json の author キーが必須になっている
AppXパッケージにする場合はdescriptionキーも必須
準備
MS Edgeを立ち上げる
about:flags で拡張機能を有効化
拡張機能の読み込み
設定→拡張機能
「拡張機能の読み込み」でインストールできる
というわけでやってみましょう
http://4.bp.blogspot.com/-gX99oMun4bM/U9y_wYoE0EI/AAAAAAAAjiU/DHdcIfImCwQ/s400/pose_ganbarou_man.png http://www.irasutoya.com/2014/08/blog-post_874.html
chrome/browser 対策
状況
Chromeにはchromeのみ
MSEdgeにはbrowserのみ
Firefoxには両方ある
babelプラグインで (browser||chrome) みたいにしてくれるのを書いてみても良いかもしれないという気もしている
が、ブラウザ拡張だと大体の環境でES 2015以降のAPIが利用可能なので、Babelが不要という説もある
その他やること
browser.runtime.getURLで返ってくるms-edge-extension:をfetchしたり、embedするとCSPに引っかかる
browser.runtime.sendMessageやbrowser.tabs.sendMessageのoptionalな引数をサポートしていない
cookieを利用する場合はmanifest.jsonでpermissions: ["cookies"]を指定する
完成した様子がこちら
ManifoldJSでAppXパッケージを作る
発表までに準備が間に合っていたらデモ
まとめ
MS EdgeでもChrome互換のブラウザ拡張が動くようになったぞ！！！！！！！！
参考