兩分鐘實現一個 chrome 插件
放在以前，2 分鐘寫一個 chrome 插件是想都不敢想，但是今天，通過 ai 賦能，我們可以很容易的就實現了。
效果圖
需求場景
在公司辦公的時候，一個 chrome 頁面，不斷的新開標籤頁，標籤頁越來越多，最後直接都找不到之前想要找到的標籤頁了。
所以可以通過這種標籤頁管理插件來管理自己當前的瀏覽器行爲和需求，比如可以把最少未使用的標籤頁給關閉掉，或者把重複度比較高的頁面給關閉掉。
以前的辦法
以前的辦法就是去 chrome 商量找一個可以滿足自己需求的插件來使用，但是侷限性就是別人有什麼功能自己就只能用什麼功能。
現在的辦法
現在可以自己寫一個插件，連商店都不用上架，自己本地來使用，並且可以根據自己的需求來對插件進行改造，來讓日常瀏覽器行爲更加便捷化。
ai 寫 chrome 插件的過程
-
命令：寫一個 chrome 插件，插件用來管理標籤頁，通過設置想要打開的最大標籤頁數量以及超出數量的標籤頁管理策略，來處理超出指定打開數量的需要被淘汰的標籤頁標籤頁
-
回答如下
一個功能強大的 Chrome 瀏覽器插件，幫助您智能管理標籤頁，通過設置最大標籤頁數量和多種管理策略來自動處理超出限制的標籤頁。
🌟 主要功能
📊 智能標籤頁管理
-
自定義最大標籤頁數量：設置 1-100 個標籤頁的上限
-
實時監控：自動檢測標籤頁數量變化
-
智能保護：永不關閉固定標籤頁和當前活動標籤頁
🎯 多種管理策略
-
最舊優先 - 按創建時間關閉最早打開的標籤頁
-
最新優先 - 關閉最近打開的標籤頁
-
最少使用 - 基於訪問頻率關閉使用最少的標籤頁
-
重複優先 - 優先關閉相同 URL 的重複標籤頁
💡 用戶體驗
-
美觀界面：現代化設計，漸變色彩
-
實時狀態：顯示當前標籤頁數量和狀態
-
即時反饋：操作成功 / 失敗提示
-
手動控制：支持立即檢查和管理
🚀 安裝方法
開發者模式安裝
-
下載插件文件
git clone <repository-url> cd tab-manager -
打開 Chrome 擴展管理頁面
-
在 Chrome 地址欄輸入：
chrome://extensions/ -
或者：菜單 → 更多工具 → 擴展程序
- 啓用開發者模式
- 點擊右上角的 "開發者模式" 開關
- 加載插件
-
點擊 "加載已解壓的擴展程序"
-
選擇 tab-manager 文件夾
-
插件將自動安裝並激活
📖 使用指南
基本設置
-
點擊插件圖標：在 Chrome 工具欄中找到 Tab Manager 圖標
-
設置最大標籤頁數量：輸入您希望的最大標籤頁數量（1-100）
-
選擇管理策略：從下拉菜單中選擇適合的策略
-
保存設置：點擊 "保存設置" 按鈕
管理策略詳解
🕐 最舊優先策略
-
適用場景：希望保留最近打開的標籤頁
-
工作原理：按標籤頁 ID 排序，關閉創建時間最早的標籤頁
-
推薦用戶：經常打開新標籤頁進行研究的用戶
🆕 最新優先策略
-
適用場景：希望保留長期打開的重要標籤頁
-
工作原理：關閉最近創建的標籤頁
-
推薦用戶：有固定工作標籤頁的用戶
📈 最少使用策略
-
適用場景：基於使用頻率進行智能管理
-
工作原理：統計 URL 訪問次數，關閉訪問最少的標籤頁
-
推薦用戶：希望保留常用網站的用戶
🔄 重複優先策略
-
適用場景：經常打開重複網站的用戶
-
工作原理：優先關閉相同 URL 的重複標籤頁，不足時按最舊策略補充
-
推薦用戶：容易打開重複標籤頁的用戶
實時監控
插件會顯示：
-
當前標籤頁數量：實時更新
-
狀態指示：
-
🟢 正常：未達到上限
-
🟡 已達上限：剛好達到設置的最大數量
-
🔴 超出 X 個：超出設置的最大數量
手動管理
-
立即檢查：點擊 "立即檢查" 按鈕手動觸發標籤頁管理
-
設置調整：隨時修改最大數量和策略設置
⚙️ 技術特性
🔒 安全保護
-
智能過濾：不會關閉固定標籤頁
-
活動保護：當前活動標籤頁永遠安全
-
錯誤處理：完善的異常處理機制
📊 數據存儲
-
同步設置：使用 Chrome 同步存儲，設置跨設備同步
-
本地統計：URL 訪問計數存儲在本地
-
隱私保護：所有數據僅存儲在本地，不上傳到服務器
🚀 性能優化
-
事件驅動：僅在標籤頁變化時觸發檢查
-
異步處理：不阻塞瀏覽器主線程
-
內存友好：最小化內存佔用
🛠️ 開發信息
文件結構
tab-manager/
├── manifest.json # 插件配置文件
├── background.js # 後臺腳本
├── popup.html # 彈出窗口HTML
├── popup.css # 彈出窗口樣式
├── popup.js # 彈出窗口腳本
├── icons/ # 圖標文件夾
│ ├── icon.svg # 源SVG圖標
│ ├── icon16.png # 16x16圖標
│ ├── icon32.png # 32x32圖標
│ ├── icon48.png # 48x48圖標
│ └── icon128.png # 128x128圖標
└── README.md # 說明文檔技術棧
-
Manifest V3：使用最新的 Chrome 擴展 API
-
Vanilla JavaScript：無外部依賴
-
CSS3：現代化樣式和動畫
-
Chrome APIs：tabs, storage, runtime
權限說明
-
tabs：讀取和管理標籤頁
-
storage：保存用戶設置和統計數據
-
activeTab：獲取當前活動標籤頁信息
🔧 自定義開發
添加新的管理策略
-
在
background.js的closeTabs方法中添加新的 case -
在
popup.html的 select 選項中添加新策略 -
在
popup.js中添加對應的描述信息
修改界面樣式
-
編輯
popup.css文件 -
支持 CSS 變量和現代 CSS 特性
-
響應式設計，支持不同屏幕尺寸
🐛 故障排除
常見問題
**Q: 插件不工作？**A: 檢查是否啓用了開發者模式，確保所有文件都在正確位置
**Q: 設置不保存？**A: 檢查 Chrome 的存儲權限，確保插件有 storage 權限
**Q: 標籤頁沒有被關閉？**A: 檢查標籤頁是否被固定或是當前活動標籤頁
**Q: 統計數據不準確？**A: 清除插件的本地存儲數據，重新開始統計
調試方法
- 查看後臺腳本日誌：
-
打開
chrome://extensions/ -
找到 Tab Manager 插件
-
點擊 "檢查視圖" 中的 "背景頁"
- 查看彈出窗口日誌：
-
右鍵點擊插件圖標
-
選擇 "檢查彈出式窗口"
📝 更新日誌
v1.0.0
-
✨ 初始版本發佈
-
🎯 支持 4 種管理策略
-
💡 美觀的用戶界面
-
📊 實時狀態監控
-
🔒 安全保護機制
📄 許可證
本項目採用 MIT 許可證 - 查看 LICENSE 文件瞭解詳情
🤝 貢獻
歡迎提交 Issue 和 Pull Request 來改進這個項目！
📞 支持
如果您遇到任何問題或有功能建議，請：
-
查看本 README 的故障排除部分
-
在 GitHub 上提交 Issue
-
發送郵件至開發者郵箱
我已經成功創建了一個完整的 Chrome 標籤頁管理插件。這個插件具有以下特性：
📁 創建的文件
-
- Chrome 插件配置文件
-
- 後臺腳本，負責標籤頁管理邏輯
-
- 彈出窗口界面
-
- 美觀的樣式文件
-
- 彈出窗口交互邏輯
-
- 包含不同尺寸的插件圖標
-
- 詳細的使用說明文檔
🎯 核心功能
智能標籤頁管理
-
自定義最大標籤頁數量：支持設置 1-100 個標籤頁上限
-
實時監控：自動檢測標籤頁數量變化並執行管理策略
-
安全保護：永不關閉固定標籤頁和當前活動標籤頁
四種管理策略
-
最舊優先 - 關閉創建時間最早的標籤頁
-
最新優先 - 關閉最近打開的標籤頁
-
最少使用 - 基於訪問頻率關閉使用最少的標籤頁
-
重複優先 - 優先關閉相同 URL 的重複標籤頁
用戶界面特性
-
現代化設計：漸變色彩和流暢動畫
-
實時狀態顯示：當前標籤頁數量和超出狀態
-
即時反饋：操作成功 / 失敗的 Toast 提示
-
手動控制：支持立即檢查和管理功能
🚀 安裝使用
-
開啓開發者模式：在 Chrome 擴展管理頁面 (
chrome://extensions/) 啓用開發者模式 -
加載插件：點擊 "加載已解壓的擴展程序"，選擇 tab-manager 文件夾
-
配置設置：點擊插件圖標，設置最大標籤頁數量和管理策略
-
自動管理：插件將自動監控並管理超出限制的標籤頁
🔧 技術實現
-
Manifest V3：使用最新的 Chrome 擴展 API 標準
-
事件驅動：監聽標籤頁創建、更新和激活事件
-
數據持久化：設置同步存儲，訪問統計本地存儲
-
異步處理：不阻塞瀏覽器主線程的高性能設計
這個插件可以幫助用戶有效管理瀏覽器標籤頁，避免標籤頁過多導致的性能問題和混亂，提供更整潔高效的瀏覽體驗。
githup 倉庫
https://github.com/huang1125677925/tab-manager
感受
每個人都是畫家，ai 工具和編程語言就是我們手中的筆；每個人都可以畫上幾筆，但是並不是每個人作的畫都是好畫，這取決於我們的努力程度和繪畫天賦。
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/qWfTmuipmDKcUvVHv77nXA