202
QUICKSTART.md
Normal file
202
QUICKSTART.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# 快速開始指南
|
||||
|
||||
## 🚀 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)
|
||||
Reference in New Issue
Block a user