0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

EdgeHTML の browser API 不具合集 (2020年4月)

Last updated at Posted at 2020-04-01

#概要
EdgeHTM エンジン版 Edge の browser/chrome API の不具合の覚え書き。
Chrome (V8 8.0.426 / Blink 80) で普通に動作するかどうかを基準に判断。
Chromium エンジン版 Edge は未検証。
どうせ Chromium に移行するつもりだったからなのか EdgeHTML は色々ガバガバ。
※ browser/chrome API のほぼ全ての非同期関数は、最終引数に関数を渡せばコールバック型で利用できる。また、Chrome でも「Promise を return する事になっているが実はコールバック型でしか使えない関数」が幾つか存在する (具体例要追記)。MDN (英語版しか読んでいないが) ではそれらに関する記述がほぼ皆無なので要注意。

##検証環境

  • 2020年4月時点
  • Windows 10 Pro x64
  • Microsoft Edge 44.18362.449.0 (EdgeHTML 18.18363 / ChakraCore 1.11.15)
  • 下記のモンキーパッチ(?)を適用.
  • chromebrowser と同義
background.js/content.js
if(/edge/i.test(window.navigator.userAgent)){
    window.chrome = window.browser;
    console.log('EdgeHTML SUCKS!!!');
}

##Microsoft Edge の長所
ブラウザ拡張機能開発において Edge を使う利点は content script の変更が即時反映される点。ただこの一点に尽きる。
Chrome では拡張機能自体を「更新」しなければ content script の変更が反映されない上、「更新」しても content script や各種リソースの変更が反映されないバグがある為、変更を加える度にブラウザを再起動する必要がある。
これに対して Edge は、content script を変更してから対象URLのページをリロードすれば即座に新しい content script が適用されるのでデバッグが非常に楽。

#非同期関数は Promise ではなく undefined を返す
見出しの通り。なので、Chrome では then でチェーン出来る関数(メソッド)でも、Edge では 絶対に 直接チェーン出来ない。
本来 Promise を返すことになっているメソッドは、最後の引数にコールバック関数を入れて使う。
(失敗判定は try...catchchrome.runtime.lastError または chrome.extension.lastError などで行う。)

background.js
// [エラーになる例]
chrome.tabs.query({'url':'https://qiita.com/*'})
    .then(tabs=>console.log(tabs.length));
//"Error: Invocation of form tabs.query(object) doesn't match definition tabs.query(object queryInfo, function callback)."

// [上手くいく例]
chrome.tabs.query(
    {'url':'https://qiita.com/*'},
    tabs=>console.log(tabs.length)
);
 //1

#background script が cross origin 非対応
例えば background script で WebSocket を開こうとすると「Access-Control-Allow-Headersがないです~:stuck_out_tongue_winking_eye: べろべろば~:stuck_out_tongue:」などのエラーを吐く。
Fetch や XHR は未検証だが同じだろう。
Chrome では問題なく接続できる。
_generated_background_page.html のヘッダーを生成しているのは Edge の拡張機能管理機能なので、恐らく回避は不可能。

#比較的重要なメソッドが初めから存在しない

  • chrome.tabs.connect がない為、background script → content script の port 接続ができない.

他にもあったけど忘れたので後日追記.

#native messaging が異常に難しい
普通の (Edge 以外の) ブラウザでは比較的容易に 拡張機能 <―> ネイティブアプリ間通信 (native messaging) を実装できる。
いくつかの設定ファイルを用意して少しレジストリを弄るだけなので、テキストエディタさえあればいい。
これに対して Edge で native messaging を実装するには、絶対に最新の Visual Studio を使わなければならない
Edge では、拡張機能とネイティブアプリの通信は特別なプロトコル (AppService) を用いる。そのプロトコルに対応するアプリケーション (UWP application) は Visual Studio でしか作成できない (Visual Studio でセキュリティートークンを発行しないと AppService を起動できない)。
ネイティブアプリの代わりにローカルサーバーを立てて WebSocket や Fetch で通信しようとしても、前述のように「cross origin access forbidden :hugging:」とか言われる。
EdgeHTML 版 Edge での native messaging は潔く諦めた方がいい
どうしてもやりたいなら Chromium 版 Edge に切り替えよう。
最終決定!「でも」とか「やっぱり」は許さん!二度と試すな!EdgeHTML SUCKS!!!!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?