シーケンス図

sequenceDiagram
    actor User as ユーザー
    participant Popup as popup.js
    participant Tab as 新しいタブ
    participant CS as content.js
    participant DOM as Zenn DOM
    participant Storage as chrome.storage.local

    User->>Popup: 「同期」ボタンをクリック
    Popup->>Tab: chrome.tabs.create(/settings/mutes)
    Tab->>CS: content script注入(document_idle)
    CS->>CS: パス判定(/settings/mutes)
    CS->>CS: 1秒待機
    loop 最大20回リトライ(500ms間隔)
        CS->>DOM: querySelectorAll('a[href^="/"]')
        DOM-->>CS: リンク要素一覧
        CS->>CS: /username 形式をフィルタ
        CS->>CS: systemPathsを除外
    end
    CS->>Storage: set({ mutedUsers: [...] })
    Storage-->>CS: 保存完了
    CS->>DOM: 同期完了通知を表示
    Note over DOM: 「✓ ミュートユーザー N人 を同期しました」
      

sequenceDiagram
    actor User as ユーザー
    participant Browser as ブラウザ
    participant CS as content.js
    participant Storage as chrome.storage.local
    participant Modal as 警告モーダル

    User->>Browser: Zennの記事ページを開く
    Browser->>CS: content script注入
    CS->>CS: URLからユーザー名抽出
    CS->>Storage: get(['mutedUsers'])
    Storage-->>CS: ミュートリスト
    CS->>CS: ユーザー名がリストに含まれるか判定

    alt ミュート済み
        CS->>Modal: モーダル生成・表示
        Modal->>User: 「ミュート中のユーザーです」

        alt 「戻る」クリック
            User->>Modal: 戻るボタン
            Modal->>Browser: history.back()
        else 「トップページへ」クリック
            User->>Modal: トップページへボタン
            Modal->>Browser: location = zenn.dev
        else 「このまま閲覧する」クリック
            User->>Modal: 閲覧ボタン
            Modal->>Modal: モーダル削除
        else Escキー
            User->>Modal: Escape
            Modal->>Modal: モーダル削除
        end
    else ミュートしていない
        CS->>CS: 何もしない
    end
      

sequenceDiagram
    participant DOM as Zenn DOM
    participant Observer as MutationObserver
    participant CS as content.js

    CS->>Observer: observe(body, {childList, subtree})
    Note over Observer: URL監視開始

    loop DOM変更のたびに
        DOM->>Observer: mutation callback
        Observer->>Observer: location.href !== lastUrl ?
        alt URLが変わった
            Observer->>CS: 既存モーダル削除
            Observer->>CS: 500ms後にmain()実行
            CS->>CS: 新URLでミュートチェック
        else URLが同じ
            Observer->>Observer: スキップ
        end
    end