アーキテクチャ設計書

システム概要

Zenn Mute User Alert は、Zennでミュートしたユーザーのページを開いた際に警告モーダルを表示するChrome拡張機能です。

コンポーネント構成

graph TB
    subgraph Chrome拡張機能
        M[manifest.json
拡張機能定義]
        CS[content.js
コンテンツスクリプト]
        CSS[modal.css
モーダルスタイル]
        PH[popup.html
ポップアップUI]
        PJ[popup.js
ポップアップロジック]
        ST[(chrome.storage.local
ミュートリスト)]
    end

    subgraph Zennサイト
        MP[ミュート設定ページ
/settings/mutes]
        AP[記事・ユーザーページ
/username/...]
    end

    M --> CS
    M --> CSS
    M --> PH
    PH --> PJ
    CS -->|スクレイピング| MP
    CS -->|ユーザー名抽出| AP
    CS -->|読み書き| ST
    PJ -->|読み書き| ST

データフロー

flowchart LR
    subgraph 同期フロー
        A[ユーザー操作] -->|同期ボタン押下| B[ミュート設定ページを開く]
        B --> C[DOM内のユーザーリンクを取得]
        C --> D[systemPathsを除外]
        D --> E[storage.localに保存]
    end

    subgraph 判定フロー
        F[Zennページ読み込み] --> G[URLからユーザー名抽出]
        G --> H[storage.localから
ミュートリスト取得]
        H --> I{ミュート済み?}
        I -->|Yes| J[警告モーダル表示]
        I -->|No| K[何もしない]
    end

ファイル依存関係

graph LR
    manifest.json -->|登録| content.js
    manifest.json -->|登録| modal.css
    manifest.json -->|登録| popup.html
    popup.html -->|読み込み| popup.js
    content.js -->|利用| modal.css