WebExtensionのMV3移行実際やってみてどうだったか
by pastak.icon Kyoto.js #18 こんにちは
Pasta-Kです
株式会社 Helpfeel と 株式会社はてなでフロントエンドとかをやってます
今回からKyoto.jsのオーガナイザー
今日の話
GyazoのWebExtensionのMV3対応の作業に取り組んでいたので、その辺で得た知見とかを共有します
Safari向けは出していないので、今回は主にChromeとFirefoxをターゲットにした話
結論
言われるがままやると、85％くらいの確率でシュッと移行できる（気がする）
おさらい
WebExtensionのmanifest_versionが2から3になる
一部のAPIが廃止になったり、新しいAPIが生えたり
background_scriptが今まではbackground_page(_generated_background_page.html)というHTML上のJSだったものがServiceWorkerに（この行の正しさについては後述します）
2023年6月に出るChrome StableのバージョンからMV2廃止するぞというスケジュールが告知されていたが、2022年末に延期が発表された
https://gyazo.com/cdd98bd1f5567d1d7082fca632bb50b5
現状
ChromeはMV2の完全廃止のスケジュールは練り直し中
EdgeはイニシアティブはChromiumにあるので、それに追随しますという構え（そりゃそうか）
Firefoxは先日出たv109からMV3がデフォルトで有効に Safariはv15.4からMV3をサポートしている
一方でWebExtensionのMV3自体の仕様がバチッとハマっていなくて、各ブラウザの対応状況もマチマチ
言われるがままやりましょう
GoogleとMozillaがそれぞれ移行ガイド出しているので、それぞれ眺めると何が変わるのかとか何をすべきか分かります
動きましたか？
お疲れさまでした
やってみた感じだとまぁ突飛なことしてない素朴なExtensionはそのまま動くと思う
ServiceWorkerになったので、DOMのAPIなどを使っていたものは使えなくなる
Gyazoの場合はdocument.createElement('canvas')を多用していたが、もちろん現代ではOffscreenCanvasがあるので便利
まぁでもServiceWorkerになくて、DOMにあるAPIで叩きたいものって今はそんなにない？
Async Clipboard APIがWeb Workerにはない問題
https://gyazo.com/79f24012edc2a6a6ff07af4b4f391a98
意外と他にもある
WebAudio
DOMParser
WebRTC
etc
どうすんねん
先日StableになったChrome v109からchrome.offscreenという、OffscreenCanvasのDOM版が爆誕した
使い方
code: background.js
chrome.offscreen.createDocument({
url: chrome.runtime.getURL('off_screen.html'),
justification: 'reason for needing the document',
});
await chrome.runtime.sendMessage({ text })
chrome.offscreen.closeDocument()
code: off_screen.html
<script src='./osd.js'>
code: osd.js
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
// 現在のChromeではnavigator.clipboard.writeTextを使おうとするとユーザージェスチャーなどを求められて実行できない
const textArea = document.createElement("textarea");
textArea.style.cssText = "position:absolute;left:-100%";
document.body.appendChild(textArea);
textArea.value = msg.text;
textArea.select();
document.execCommand("copy");
document.body.removeChild(textArea);
sendResponse()
});
課題
セキュアになっているのは分かるけど、大変すぎないか？？
今は1つのExtensionに1つのページしか使えないので、複数のことに対応できない
将来的にはそうしたいらしいが……
In future versions, we may relax this to support multiple pages
あれ？なんかChrome関係のドキュメントしか出てこなくない？
そう、絶賛分裂中……
W3CのWebExtensionに関する2022年9月15日のミーティングの議事録
ChromeはこのOffscreenDocumentを提案しているし、実装してしまっている
FirefoxはLimited Event Pagesという提案をしている
これまでの_generated_background_page.htmlに制約を課した状態で呼び出せるようにするのが良いんじゃないかという提案
And as a result, by the time we’re ready for MV4, the whole ecosystem will probably be in a better position to transition fully to service workers.
一旦APIなどの整理をMV3でやって、ServiceWorkerにするのはMV4でもう少し落ち着いてからやろうやという主張
ブログでもそういうことを書いている
https://gyazo.com/b6ad1afaf521cdcc3c8b3e5c2d74ed2a
Safariもこれに乗っかっていて、Safari Technology Preview 136以降ではこれをサポートしている
現状を整理する
Chromeはbackgroudを完全にServiceWorkerにしてしまったので、DOM APIを叩くためにchrome.offscreenでDOMを提供している
FirefoxとSafariはServiceWorkerにしないことにしたので、そのままDOM APIが引き続き使える
実際、Firefoxはnavigator.clipboardなどがそのまま使える・・・
移行ガイドもよく見ると…
Chrome側のガイドでは service_worker のキーを追加するなどの変更を案内している
Firefox側のガイドでは persistentを消すか、falseを与えるように案内している
実際どうするか
manifestはchromeのものをベースにしつつ、offscreenのPermissionを消したり、background周りを上書きしたものを使うように一旦はしている
せっかく今回はFirefox向けのidなどを browser_specific_settings とかに押し込められるようになって一安心と思っていたが……
chrome.offscreenの有無をFeature Detectionすれば一応全てのブラウザには対応できる
MV3この先どうなる？
そもそも、この感じでやってて実際にMV2完全撤廃いつ出来るの？
WebExtensionで大統一みたいなのは結局夢だったのか…？
頑張れ！WebExtensions Community Group (WECG)！！