Quden Dev Doc

Appearance

Chrome extension 開発の概念図 ​

主要ユースケースのシーケンス図 ​

サインイン ​

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()

議事録 ​

  • 拡張機能の実行時には dist 内で読み込まれている index.html が読み込まれている
  • iframe でカメラやマイクにアクセスしている背景
  • chrome extension storage API の挙動