Hierarchy Viewer (網頁階層編號與導覽面板)

在閱讀長網頁時，如果沒有結構化的標題導覽，很容易迷失方向。Hierarchy Viewer 可以自動幫 H1 - H5 標題補上階層編號（例如 1.、1.1.、1.1.1.），並在網頁右側產生浮動的目錄面板，方便你點擊快速跳轉。

---

核心功能

• 自動標題編號：掃描網頁中的 <h1> 到 <h5> 標籤，並自動依據層級計算並插入階層數字前綴。
• 側邊懸浮面板：右側會自動產生目錄清單，點擊任一項目即可平滑滾動到該標題位置。
• 閱讀進度同步：頁面滾動時，目錄面板會跟著自動高亮當前閱讀範圍對應的項目（Scroll Spy）。
• 自訂掃描區塊：你可以指定「目標元素選擇器」（例如 main、article 或 #content），避免掃描到側邊欄、頁首或頁尾的無關標題。
• 輕鬆管理啟用網站：透過 Popup 彈出選單一鍵開關，或在後台管理面板統一配置，設定完立即套用，免手動重新整理網頁。
• 深淺色主題：面板與後台皆支援主題切換，包括系統預設、淺色 (Light) 或深色 (Dark) 風格。

---

專案目錄結構

HierarchyViewer/
├── manifest.json         # 擴充功能設定檔 (Manifest V3)
├── content.js            # 網頁注入腳本 (負責解析標題、注入編號與導覽面板)
├── styles.css            # 注入導覽面板的樣式表
├── popup.html            # 點擊擴充功能圖示時的彈出選單
├── popup.js              # 彈出選單邏輯
├── popup.css             # 彈出選單樣式
├── options.html          # 管理面板 (設定頁面)
├── options.js            # 管理面板邏輯
├── options.css           # 管理面板樣式
└── icons/                # 擴充功能圖示目錄
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

---

本機開發與安裝

要在本地端測試或修改這個擴充功能，步驟非常簡單：

1. 將本專案下載到你的電腦上。
2. 打開 Chrome 瀏覽器，在網址列輸入 chrome://extensions/ 開啟擴充功能頁面（或在右上角選單的「延伸功能」中選擇「管理延伸功能」）。
3. 切換開啟右上角的 「開發者模式」。
4. 點擊左上角的 「載入未封裝項目」，並選擇此專案的根目錄（也就是包含 manifest.json 的資料夾）。
5. 安裝完成後，每次修改程式碼，只需在該頁面上點擊重新整理即可。

---

使用與操作指南

1. 快速開關與設定 (Popup 選單)

在瀏覽網頁時，點擊瀏覽器工具列中的 Hierarchy Viewer 圖示：

• 啟用開關：直接點擊開關即可在該網站啟用或停用功能。
• 目標元素選擇器：如果預設的 main 找不到標題，或你想更精確地指定某個區塊，可以在輸入欄填入 CSS 選擇器（如 article 或 div.post-content）並按 「套用」。

2. 後台管理面板 (Options)

點擊 Popup 選單下方的 「進入管理面板」，或者在擴充功能頁點擊 Hierarchy Viewer 的「選項」：

• 預先配置：手動新增網域並設定其目標選擇器。
• 列表管理：可以直接雙擊修改表格中的選擇器，或是切換啟用狀態、刪除設定。
• 調整主題：在右上方切換你偏好的主題。

---

關於隱私

不收集任何個人或網頁瀏覽資料。所有的設定值與選擇器都只會儲存在你本機瀏覽器的 chrome.storage.local，不與任何外部伺服器連線。