🚀 LOGIN Chrome 擴充功能

智能環境切換與自動登入工具

📦 下載擴充功能

一鍵下載最新版本的 LOGIN Chrome 擴充功能

🔽 下載 ZIP 檔案

檔案大小:約 2MB | 版本:1.0.0

🎯 測試演示資源

下載測試頁面和配置檔案,快速體驗擴充功能

🌐 下載演示頁面
demo.html
⚙️ 下載配置檔案
demo.json

💡 使用方法:

  1. 安裝 LOGIN Chrome 擴充功能
  2. 在設定面板匯入 demo.json 配置檔案
  3. 開啟 demo.html 或訪問 chrome-login-plugin.pages.dev/demo.html
  4. 使用擴充功能測試自動登入功能

✨ 功能特色

🌐 環境快速切換

支援 SIT、UAT、STAGING、PROD 四種環境,一鍵切換不同測試環境,提升開發效率。

SIT UAT STAGING PROD

🔐 智能自動登入

預設帳號密碼,支援多個測試帳號管理,一鍵自動填入並登入,節省重複輸入時間。

🔧 網路模式切換

支援 TP 模式(標準路由)和 LK 模式(Header 注入),靈活應對不同網路環境需求。

TP 模式 LK 模式

🤖 OTP 自動識別

整合 Gemini AI,自動識別圖片驗證碼,支援各種 OTP 格式,提升自動化程度。

💾 資料匯入匯出

支援設定檔匯出與匯入,方便團隊共享設定,快速部署到不同環境。

🎯 多應用程式支援

支援 IB、MB 等多種應用程式,可自訂網站設定和登入流程。

🛠️ 安裝步驟

下載擴充功能

點擊上方的下載按鈕,將 login-extension.zip 檔案下載到您的電腦。

解壓縮檔案

將下載的 ZIP 檔案解壓縮到任意資料夾,記住解壓縮的位置。

開啟 Chrome 擴充功能頁面

在 Chrome 瀏覽器網址列輸入 chrome://extensions/ 並按 Enter。

啟用開發人員模式

在擴充功能頁面右上角,開啟「開發人員模式」開關。

載入擴充功能

點選「載入未封裝擴充功能」按鈕,選擇剛才解壓縮的資料夾。

確認安裝成功

安裝成功後,您會在瀏覽器工具列看到 LOGIN 擴充功能圖示。

請確保您有管理員權限來安裝 Chrome 擴充功能。企業環境可能需要 IT 部門協助。

🎬 安裝步驟實際畫面演示

以下是安裝過程的實際畫面展示,幫助您快速完成安裝:

步驟 3: 開啟 Chrome 擴充功能頁面
chrome://extensions/

擴充功能

開發人員模式
👆
請點擊右上角的「開發人員模式」開關

操作說明:在網址列輸入 chrome://extensions/,然後開啟「開發人員模式」開關。

步驟 5: 載入未封裝擴充功能
chrome://extensions/

擴充功能

開發人員模式
👆
點擊「載入未封裝擴充功能」按鈕,選擇解壓縮的資料夾

操作說明:開啟開發人員模式後,點擊「載入未封裝擴充功能」,選擇解壓縮後的資料夾。

🎮 功能操作實際畫面演示

以下是擴充功能的實際操作界面展示:

🎛️ 主控制面板

點擊瀏覽器工具列的 LOGIN 圖示後出現的主要控制界面

🖱️ 點擊下方各個功能區域了解操作方式
🚀 LOGIN Chrome 擴充功能
🎛️ 控制
📊 資料
⚙️ 設定
🛡️ Network Mode
TP ⇄ LK
✅ LK Mode: Header injection enabled
🌐 Environment Selection
SIT
UAT
STAGING
PROD
🎯 Applications
🏦
IB
📱
MB
🌐
WEB
👤 Test Accounts SIT IB

🔥 快速操作流程

  1. 切換網路模式:根據需要在 TP 和 LK 模式間切換
  2. 選擇環境:點擊 SIT、UAT、STAGING 或 PROD
  3. 選擇應用:點擊應用圖示(首次點擊選中,再次點擊開啟網站)
  4. 快速登入:點擊測試帳號按鈕即可自動登入

📊 資料管理面板

管理測試帳號、密碼及相關設定的界面

📊 資料管理面板
🎛️ 控制
📊 資料
⚙️ 設定
🌐 Environment Selection
SIT
UAT
STAGING
PROD
🏦 IB Application
test001 | ••••••••
✏️ 🚀 🗑️
admin | ••••••••
✏️ 🚀 🗑️

📝 資料管理功能

  • ✏️ 編輯:修改帳號名稱、密碼等資訊
  • 🚀 測試登入:快速測試帳號是否可正常登入
  • 🗑️ 刪除:移除不需要的測試帳號
  • ➕ 新增:為特定應用程式新增測試帳號

⚙️ 設定面板

進階設定、API配置及資料匯入匯出功能

⚙️ 進階設定面板
🎛️ 控制
📊 資料
⚙️ 設定
🤖 Gemini AI Settings
API Key:
Model:
💾 Data Management

🔧 進階設定功能

  • 🤖 AI設定:配置Gemini API用於驗證碼識別
  • 📤 匯出設定:備份所有配置到檔案
  • 📥 匯入設定:從檔案還原配置
  • 🗑️ 清除資料:重置所有設定(謹慎使用)

📖 使用指南

🎛️ 控制面板功能

網路模式切換

TP 模式:標準路由模式,適用於一般網路環境。

LK 模式:Header 注入模式,適用於特殊網路環境,會在 HTTP 請求中注入特定標頭。

環境選擇

點選 SIT、UAT、STAGING、PROD 按鈕切換不同的測試環境。每個環境都有對應的網站 URL 設定。

應用程式快速啟動

  1. 選擇目標環境(如 SIT)
  2. 點選應用程式圖示(如 IB、MB)
  3. 首次點選:選中應用程式
  4. 再次點選:開啟對應環境的網站

🔐 自動登入功能

快速登入

選擇環境和應用程式後,會顯示可用的測試帳號。點選帳號按鈕即可執行自動登入。

📊 資料管理面板

帳號管理

  • 檢視帳號:查看所有環境的測試帳號
  • 編輯帳號:修改帳號名稱、密碼等資訊
  • 新增帳號:為特定應用程式新增測試帳號
  • 刪除帳號:移除不需要的測試帳號

⚙️ 設定面板

進階設定

  • Gemini AI 設定:配置 API 金鑰用於 OTP 識別
  • 網站設定:自訂各應用程式的 URL 和登入流程
  • 匯出設定:備份所有設定資料
  • 匯入設定:還原或分享設定檔
  • 清除資料:重置所有擴充功能資料

🎯 完整操作流程演示

以下是從開始使用到完成自動登入的完整流程演示:

🔄 點擊下方按鈕體驗完整操作流程

🚀 步驟1: 點擊瀏覽器工具列的擴充功能圖示

🚀

瀏覽器工具列

👆

點擊 LOGIN 圖示

💡 操作重點提醒

  • 網路模式:根據網路環境切換 TP/LK 模式
  • 環境選擇:確保選擇正確的測試環境
  • 應用選擇:首次點擊選中,再次點擊開啟網站
  • 自動登入:網站載入完成後點擊測試帳號

🚀 準備好實際測試了嗎?

體驗真實的自動登入功能!

🌐 開啟演示頁面 📥 下載配置檔案

🎯 完整測試流程:
1. 下載並安裝 LOGIN 擴充功能
2. 匯入 demo.json 配置檔案
3. 開啟演示頁面進行測試

🔬 進階功能

🤖 AI 驗證碼識別

整合 Google Gemini AI 模型,自動識別和填入圖片驗證碼:

  1. 在設定面板輸入 Gemini API 金鑰
  2. 選擇適合的模型(預設:gemini-2.5-flash-preview-05-20)
  3. 自動登入時會自動處理 OTP 圖片

🌐 自訂網站設定

可以為每個應用程式自訂:

  • 各環境的 URL 位址
  • 登入表單的 CSS 選擇器
  • 自動登入的執行順序
  • OTP 圖片的識別設定

🚨 疑難排解

常見問題

❓ 擴充功能無法載入

  • 確認已開啟「開發人員模式」
  • 檢查解壓縮的資料夾是否完整
  • 嘗試重新載入擴充功能

❓ 自動登入失敗

  • 確認網站已完全載入
  • 檢查帳號密碼是否正確
  • 確認網站結構是否有變更
  • 嘗試手動重新整理頁面

❓ LK 模式無效

  • 確認已取得正確的 IP 位址
  • 檢查網路環境是否支援 Header 注入
  • 嘗試切換回 TP 模式測試

🔒 安全性說明

重要提醒:
  • 此擴充功能僅供測試環境使用,請勿在正式環境使用
  • 帳號密碼資料儲存在本機瀏覽器中,建議定期備份
  • Gemini API 金鑰請妥善保管,避免外洩
  • 使用前請確認符合您的資安政策

📝 LOGIN Chrome Extension v1.0.0

🛠️ 使用 React + Tailwind CSS 開發

如有問題或建議,請聯繫開發團隊