feat: 更新欢迎提示文本和显示时长 - 修改popup.html中的安装完成通知文字，确保欢迎toast持续显示5秒

Author: kany2000

background.js

@@ -6,9 +6,39 @@ class ScreenshotTranslator {
     console.log('ScreenshotTranslator constructor called');
     this.isProcessing = false;
     this.setupMessageListeners();
+    this.setupInstallListener();
     console.log('ScreenshotTranslator initialized');
   }
 
+  setupInstallListener() {
+    chrome.runtime.onInstalled.addListener((details) => {
+      console.log('Extension installed or updated:', details);
+      if (details.reason === 'install') {
+        // 使用 storage 存储安装标记，popup 打开时会检查
+        chrome.storage.local.set({ shouldShowWelcome: true });
+
+        // 安装完成后立即显示欢迎通知，持续5秒
+        chrome.notifications.create({
+          type: 'basic',
+          iconUrl: 'icons/icon16.png',
+          title: 'QuickTranslate 安装完成',
+          message: 'QuickTranslate已安装！请点击插件图标开始使用。温馨提示：请把插件固定在快捷工具栏方便使用。',
+          requireInteraction: false,
+          silent: false
+        });
+
+        // 5秒后自动关闭通知
+        setTimeout(() => {
+          chrome.notifications.getAll((notifications) => {
+            Object.keys(notifications).forEach(id => {
+              chrome.notifications.clear(id);
+            });
+          });
+        }, 5000);
+      }
+    });
+  }
+
   setupMessageListeners() {
     console.log('Setting up message listeners...');
     chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {

popup.css

@@ -151,6 +151,55 @@ body {
   position: relative;
 }
 
+/* 欢迎提示框 */
+.welcome-toast {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  z-index: 1000001;
+  animation: toastEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.welcome-toast .toast-icon {
+  font-size: 24px;
+  color: #667eea;
+}
+
+.welcome-toast .toast-message {
+  font-size: 13px;
+  color: #4a4a4a;
+  line-height: 1.4;
+}
+
+.welcome-toast .toast-close {
+  font-size: 20px;
+  color: #999;
+  cursor: pointer;
+  margin-left: auto;
+  transition: color 0.2s;
+}
+
+.welcome-toast .toast-close:hover {
+  color: #333;
+}
+
+.welcome-toast.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+@keyframes toastEnter {
+  0% { opacity: 0; transform: translateY(20px) scale(0.9); }
+  100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
 .main-section::before {
   content: '';
   position: absolute;

popup.html

@@ -176,6 +176,12 @@ <h3>高級設置</h3>
     </div>
   </div>
 
+  <div id="welcome-toast" class="welcome-toast hidden">
+    <div class="toast-icon">✨</div>
+<div class="toast-message" id="install-message">插件已安装，请点击扩展图标将其固定到工具栏</div>
+    <div class="toast-close">×</div>
+  </div>
+
   <script src="popup.js"></script>
 </body>
 </html>

popup.js

@@ -1,15 +1,36 @@
 // Popup 界面控制器
 class PopupController {
-  constructor() {
-    this.elements = {};
-    this.settings = {};
-    this.init();
-  }
+   constructor() {
+     this.elements = {};
+     this.settings = {};
+     this.init();
+   }
 
   init() {
     this.bindElements();
     this.bindEvents();
     this.loadSettings();
+    // 显示欢迎 toast 5 秒
+    this.showWelcomeToast();
+  }
+
+  showWelcomeToast() {
+    const welcomeToast = document.getElementById('welcome-toast');
+    if (welcomeToast) {
+      welcomeToast.classList.remove('hidden');
+      // 5 秒后隐藏
+      setTimeout(() => {
+        welcomeToast.classList.add('hidden');
+      }, 5000);
+      
+      // 点击关闭按钮手动关闭
+      const closeBtn = welcomeToast.querySelector('.toast-close');
+      if (closeBtn) {
+        closeBtn.onclick = () => {
+          welcomeToast.classList.add('hidden');
+        };
+      }
+    }
   }
 
   bindElements() {
@@ -133,7 +154,7 @@ class PopupController {
 
     // 自定義模型輸入框變更時標記未保存
     this.elements.llmModelCustom.addEventListener('input', () => this.showUnsavedChanges());
-    
+
     // 自定義模型輸入框失去焦點時，如果為空則顯示下拉框
     this.elements.llmModelCustom.addEventListener('blur', () => {
       const customValue = this.elements.llmModelCustom.value.trim();
@@ -394,7 +415,7 @@ class PopupController {
     this.elements.apiProvider.value = this.settings.apiProvider || 'google';
     this.elements.autoCopy.checked = this.settings.autoCopy || false;
     this.elements.showConfidence.checked = this.settings.showConfidence !== false;
-    
+
     // 更新快捷面板設置
     this.elements.quickPanelEnabled.checked = this.settings.quickPanelEnabled !== false;
     this.elements.minSelectionLength.value = this.settings.minSelectionLength || 2;
@@ -409,12 +430,12 @@ class PopupController {
     if (this.settings.llmConfig) {
       this.elements.llmBaseUrl.value = this.settings.llmConfig.baseUrl || '';
       const savedModel = this.settings.llmConfig.model || '';
-      
+
       if (savedModel) {
         // 檢查模型是否已在下拉列表中
         const options = this.elements.llmModel.options;
         let found = false;
-        
+
         for (let i = 0; i < options.length; i++) {
           if (options[i].value === savedModel) {
             this.elements.llmModel.value = savedModel;
@@ -425,7 +446,7 @@ class PopupController {
             break;
           }
         }
-        
+
         if (!found) {
           // 模型不在列表中，使用自定義輸入框顯示
           this.elements.llmModel.classList.add('hidden');
@@ -553,7 +574,7 @@ class PopupController {
         const modelFromDropdown = this.elements.llmModel.value;
         const modelFromCustomInput = this.elements.llmModelCustom.value.trim();
         const finalModel = isCustomInputVisible ? modelFromCustomInput : modelFromDropdown;
-        
+
         if (!baseUrl) {
           this.showStatus('請填寫 Base URL', 'error');
           return;
@@ -588,23 +609,23 @@ class PopupController {
             const isCustomInputVisible = !this.elements.llmModelCustom.classList.contains('hidden');
             const dropdownValue = this.elements.llmModel.value;
             const customValue = this.elements.llmModelCustom.value.trim();
-            
+
             // 如果自定義輸入框可見，使用自定義輸入的值
             // 否則使用下拉框的值（但排除 __custom__ 選項）
             let finalModel = isCustomInputVisible ? customValue : dropdownValue;
-            
+
             // 確保不會保存 __custom__ 這個佔位符
             if (finalModel === '__custom__') {
               finalModel = customValue || '';
             }
-            
+
             console.log('Popup: Saving LLM model config:', {
               isCustomInputVisible,
               dropdownValue,
               customValue,
               finalModel
             });
-            
+
             return finalModel;
           })()
         } : this.settings.llmConfig
@@ -797,4 +818,4 @@ class PopupController {
 // 初始化 Popup 控制器
 document.addEventListener('DOMContentLoaded', () => {
   new PopupController();
-});
+});