# 快速開始指南

## 🚀 5 分鐘安裝使用

### 第一步：安裝使用者腳本管理器

選擇適合您瀏覽器的擴充功能：

#### Chrome / Edge
1. 前往 [Chrome 線上應用程式商店](https://chrome.google.com/webstore)
2. 搜尋「Tampermonkey」並安裝
3. 點擊「加到 Chrome」→「新增擴充功能」

#### Firefox
1. 前往 [Firefox 附加元件商店](https://addons.mozilla.org)
2. 搜尋「Tampermonkey」並安裝
3. 點擊「加入至 Firefox」→「新增」

#### Safari
1. 前往 App Store 搜尋「Userscripts」
2. 安裝 Userscripts 應用程式
3. 在 Safari 偏好設定中啟用擴充功能

### 第二步：安裝腳本

#### 方法一：直接安裝（推薦）
1. 複製 `twpkinfo-ad-blocker-sniper.user.js` 檔案內容
2. 開啟 Tampermonkey 管理面板
3. 點擊「建立新腳本」
4. 貼上複製的程式碼
5. 按 `Ctrl+S`（或 `Cmd+S`）儲存

#### 方法二：本機安裝
1. 下載 `twpkinfo-ad-blocker-sniper.user.js` 到電腦
2. 拖曳檔案到瀏覽器視窗
3. Tampermonkey 會自動偵測並提示安裝
4. 點擊「安裝」確認

### 第三步：驗證安裝

1. 前往 [TWPKInfo 首頁](https://twpkinfo.com)
2. 檢查以下變化：
   - ✅ 頂部導覽列消失
   - ✅ 底部功能列消失
   - ✅ 地圖填滿整個視窗
   - ✅ 滑鼠懸停地圖按鈕顯示中文說明

## 🎯 基本使用

### 正常瀏覽
腳本會在頁面載入時自動執行，無需任何手動操作：

1. **開啟任一 TWPKInfo 頁面**
2. **等待 2-3 秒讓腳本完成清理**
3. **開始使用純淨的地圖介面**

### 檢查運作狀態

開啟瀏覽器開發者工具（`F12`）查看主控台：
```
TWPKInfo 廣告清除器啟動
清理 CSS 規則已應用
已清理 3 個元素
清理監控已啟動
清理任務完成
```

### 功能測試清單

逐一確認以下功能正常：
- [ ] 地圖可以縮放
- [ ] 定位按鈕有效
- [ ] 切換地圖類型（道館/寶可夢/任務）正常
- [ ] 工具按鈕顯示中文提示
- [ ] 無廣告干擾
- [ ] 頁面滾動已禁用（地圖全屏）

## ⚙️ 自訂設定

### 修改工具提示文字

編輯腳本第 259-306 行的對應表：

```javascript
const directTooltips = [
    ['#update', '重新整理地圖資料'],      // 修改這裡的中文
    ['#filter_btn', '開啟/關閉篩選面板'],
    // ... 繼續添加或修改
];
```

### 調整清理強度

**溫和模式**（保留更多元素）：
註解掉第 102-104 行：
```javascript
// body > div:last-child:not(#map):not([id*="map"]):not([class*="leaflet"]):not(.leaflet-control-attribution) {
//     display: none !important;
// }
```

**激進模式**（移除更多元素）：
在第 120 行後添加：
```javascript
body > div:not(#map):not([class*="leaflet"]) {
    display: none !important;
}
```

### 新增支援網站

修改腳本標頭的 `@match` 規則：
```javascript
// @match        https://twpkinfo.com/*
// @match        https://*.twpkinfo.com/*
// @match        https://你的網站.com/*        // 新增這行
```

## 🔧 故障排除

### 常見問題

#### 問題：腳本沒有執行
**症狀**：頁面沒有變化，廣告仍然存在

**解決方案**：
1. 確認 Tampermonkey 圖示為綠色（已啟用）
2. 檢查腳本是否在啟用狀態
3. 重新整理頁面
4. 清除瀏覽器快取

#### 問題：地圖功能異常
**症狀**：無法縮放、定位失效、地圖空白

**解決方案**：
1. 暫時停用腳本測試原網站功能
2. 檢查瀏覽器主控台錯誤訊息
3. 嘗試切換至溫和模式
4. 回報問題給開發者

#### 問題：新廣告出現
**症狀**：網站更新後出現新的廣告元素

**解決方案**：
1. 右鍵點擊廣告元素 →「檢查元素」
2. 記錄元素的 class 或 id
3. 在腳本 CSS 規則中添加對應選擇器
4. 儲存並重新整理頁面

### 手動除錯

#### 檢查腳本版本
```javascript
// 在瀏覽器主控台執行
console.log('腳本版本:', GM_info.script.version);
```

#### 檢查清理效果
```javascript
// 檢查剩餘底部元素
document.querySelectorAll('div').forEach(div => {
    const rect = div.getBoundingClientRect();
    if (rect.bottom >= window.innerHeight - 50 && rect.width > 200) {
        console.log('發現底部元素:', div);
    }
});
```

#### 強制重新清理
```javascript
// 在主控台執行強制清理
if (typeof cleanupBottomBar === 'function') {
    cleanupBottomBar();
    console.log('已執行手動清理');
}
```

## 🆘 取得協助

### 聯絡管道
- **GitHub Issues**：回報 bug 或功能請求
- **Email**：loyangchun@gmail.com
- **社群**：Taiwan Pokemon GO 相關論壇

### 回報 Bug 時請提供
1. 瀏覽器版本和作業系統
2. 使用者腳本管理器版本
3. 腳本版本號碼
4. 詳細的問題描述和截圖
5. 瀏覽器主控台錯誤訊息

### 功能建議
歡迎提出改進建議，特別是：
- 新的元素清理策略
- 更好的工具提示文案
- 效能優化方案
- 其他實用功能

---

**下一步**：了解腳本設計理念請閱讀 [SUMMARY.md](SUMMARY.md)  
**詳細功能**：查看完整功能說明請閱讀 [README.md](README.md)