Quden Dev Doc

Appearance

Chrome Extension V3 対応方針 ​

TIP

chrome拡張のv3アップデートをするにあたっての対応方法と懸念事項のメモ

前提 ​

Manifest V2 Support Timeline や Overview of the Manifest v3 については、公式ドキュメントを参照のこと。

方針 ​

色々と変更はあるが、Qudenの拡張機能で大きく問題になるのは以下二点

  • backgroundがservice workerになったことにより、Web APIを利用できなくなった
    • navigator.mediaDevices.getUserMediaとかにアクセスできなくなり、致命的
  • backgroundがservice workerになったことにより、永続的に処理を実行できる環境がなくなった
    • service workerは一定時間経つと環境が落ちる
    • そのため、動画の撮影を長時間行うこと、またメモリ上に値を保持することが難しい

上記二つの課題に関してはGoogleも認識しており、上記"Know issues when migrating to Manifest V3"にて対応すると明記されている。

ユーザー体験や、Googleの動向を鑑みた時に、Qudenとしては、以下の方針で対応していくのが良さそう

  • offscreen documents apiを使って、ヘッドレスなdocumentを作成し、従来の録画関連の処理をそちらに移動させる
  • service workerのlifetime問題の解決を待つ

懸念 ​

2022年12月現在、どちらの機能とも、まだStableでのリリースができていない

  • offscreen documents api
    • betaで利用可能
      • Shipped in Chrome 109.
    • chrome.offscreen.createDocumentをする際に、reasonsに権限が一つしか指定できない
      • Qudenの場合、DisplayMediaとBlobsの二つを設定する必要があるが、現状はできない
        • 問題提起はされているが、返信がない
  • Relax the fixed maximum lifetime for extension service workers
    • Targeting Canary support in the first quarter of 2023.

また、問題は増えている一方で従来のリリーススケジュールの変更もまだ行われていない

  • 上記機能の実装状況
  • Googleのリリーススケジュール感

そのため機能実装状況とスケジュール感を考慮した上で適切に対応していく必要がある

Offscreen実装例 ​

ユースケースのシーケンス図(一部) ​

「録画開始」の部分にoffscreen documents apiを使った場合のシーケンス図を記載している。他の録画に関するアクションも同じように処理できる。

サインイン ​

mermaid
sequenceDiagram
    autonumber
    index.tsx->>Background: SIGN_IN
    Background->>index.tsx: SIGN_IN SUCCESS
    index.tsx->>index.tsx: execute useEffect dependent on isSignin
    index.tsx->>Background: OPEN_MENU
    Background->>ContentScript: OPEN MENU
    ContentScript->>menu.tsx: OPEN MENU
    menu.tsx->>menu.tsx: execute useEffect dependent on isMenuOpen

メニュー開く ⇒ ビデオ起動 ​

同時に別イベントでworkspaceの情報も取得しているが割愛

mermaid
sequenceDiagram
    autonumber
    menu->>ContentScript: SHOW_FF_CAMERA
    ContentScript->>ff-camera-window: Create iFrame and insert it to Dom
    ff-camera-window->>ff-camera-window: Setup devices for recording
    ff-camera-window->>menu: SET_FF_CAMERA_READY

録画開始 ​

v3で実現する場合の処理例、v2ではbackgroundで navigator.mediaDevices.getUserMedia でstreamを取得し、Menuに返却して、Countdownが始まる

mermaid
sequenceDiagram
    autonumber
    menu.tsx->>ContentScript: INIT_RECORDER
    ContentScript->>BackGround: INIT_RECORDER
    BackGround->>BackGround: chrome.offscreen.createDocument
    BackGround->>init-recorder: INIT_RECORDER
    init-recorder->>BackGround: START_COUNTDONN
    BackGround ->> menu.tsx: START_COUNTDONN
    menu.tsx->>menu.tsx: execute useEffect dependent on timeLeft
    menu.tsx->>init-recorder: ON_START_RECORDING
    init-recorder ->> init-recorder: recorder.start()