Fix: PR#863 多輪 Review意見的綜合修正與最終實施

google-labs-jules[bot] · google-labs-jules[bot] · commit 5fd1923f6845 · 2025-06-08T10:28:54.000Z
本次提交整合了 PR#863 上來自 Qodo Merge Pro, CodeRabbit AI 和 Copilot 的多輪 review feedback，旨在全面提升擴充功能的穩定性、安全性、相容性和程式碼品質。

**解決的核心問題與重要改進：**

1.  **Manifest V3 相容性:**
    *   我修正了 `webRequest.onBeforeSendHeaders` API 的 `'blocking'` 選項，使其根據 manifest 版本動態加入，以符合 Manifest V3 規範。
    *   我改進了 `sidePanel` API 的使用，優先採用 `Browser.sidePanel` 並加入了對 `chrome.sidePanel` 的備援機制（包含 `typeof chrome` 檢查以避免 `no-undef` linting 問題），增強了跨瀏覽器相容性。

2.  **安全性增強:**
    *   我大幅改進 `redactSensitiveFields` 函數：
        *   擴充了 `SENSITIVE_KEYWORDS` 列表，包含 'apikey', 'token', 'secret', 'password', 'auth', 'key', 'credential', 'jwt', 'session', 'access', 'private', 'oauth' 等。
        *   增加了對陣列中字串內容的敏感性檢查 (使用預編譯的正則表達式 `SENSITIVE_REGEX` 提高效率)。
        *   增加了對 `null` 值的判斷，防止遞迴錯誤。
        *   使用 `WeakSet` 處理循環引用問題。
        *   增加了對特殊物件類型 (如 `Date`, `RegExp`, `Error`, `URL`, `Map`, `Set`) 的處理，使其返回更安全的字串表示。

3.  **錯誤處理與穩定性:**
    *   **Proxy 連接 (`setPortProxy`, `_proxyOnDisconnect`):**
        *   我實現了更穩健的重連機制，包括指數退避和最大重試次數限制 (`RECONNECT_CONFIG`)。
        *   我徹底清理了相關的事件監聽器 (包括 `port` 和 `port.proxy` 上的 `onMessage` 和 `onDisconnect`)，特別是在達到最大重連嘗試次數後，以防止記憶體洩漏。
        *   我改進了移除 `port.proxy` 監聽器時的競爭條件問題 (使用臨時變數 `proxyRef`)。
        *   在連接最終失敗時，我會透過 `port.postMessage` 通知您。
    *   **`FETCH` API 處理:**
        *   我在回傳結果中加入了 `ok: response.ok` 欄位。
        *   在 `!response.ok` 時記錄警告，並在回傳的 `responseObject` 中加入了 `error` 欄位。
    *   **`postMessage` 序列化錯誤:** 我為背景腳本中多處 `port.proxy.postMessage` 調用增加了 `try-catch` 保護。
    *   **Promise 輪詢 (`prepareForJumpBackNotification`):**
        *   我為 Claude 和 Kimi token 的輪詢邏輯增加了 `cleanup` 函數，並結合 `promiseSettled` 標誌，以防止競爭條件和記憶體洩漏。
        *   在 `setInterval` 回調中，若 `promiseSettled` 已為 true，則增加警告日誌。
        *   (註：Qodo 關於連續輪詢失敗計數器的建議，因時間和複雜性考量，暫未完全實現，但現有逾時機制和特定錯誤的 reject 已能處理多數情況。)
    *   **DOM 操作保護:** 我在 `manageChatGptTabState` 的 `setTimeout` 回調中，對 `input` 元素進行了 null 檢查。

4.  **Linting 與 ESLint 配置:**
    *   我解決了 CI 環境中 `'chrome' is not defined` 的問題，標準化 API 使用為 `Browser.*`，並確保備援邏輯中的 `chrome.*` 使用受到 `typeof` 保護。
    *   我在 `.eslintrc.json` 的 `env` 中加入了 `"node": true`，並根據 Copilot 建議將其移至 `overrides` 區塊，使其僅針對 Node.js 特定檔案生效。
    *   所有修改均通過了本地 `npm run lint` 檢查。

5.  **程式碼品質與可讀性 (CodeRabbit &amp; Copilot 建議):**
    *   我在多處建議的位置應用了可選鏈接 (`?.`)，簡化了程式碼 (例如 `details.requestBody?.formData`, `siteAdapterAction?.init`, `preElement?.textContent`, `data?.accessToken`)。
    *   我為 `RECONNECT_CONFIG` 常數添加了 JSDoc 註釋。
    *   我統一了部分日誌記錄的級別 (例如 `setPortProxy` 中的 `console.debug`)。
    *   我改進了 Kimi 登入按鈕的偵測邏輯，使其更穩健。
    *   我移除了 Kimi token 輪詢中 `catch` 區塊的 "Example error check" 註釋。

**已知未完全處理的細節 (由於時間/複雜性考量):**
*   CodeRabbit 關於 `redactSensitiveFields` 中 `WeakSet` 在不同遞迴分支清理的細節。
*   CodeRabbit 關於 `mountComponent` 中重試機制的漸進式延遲。
*   CodeRabbit 關於將 Kimi 和 Claude 輪詢邏輯提取為單一工具函數的重構建議。
*   CodeRabbit 關於全域日誌級別控制 (引入 `isDebugMode`) 的建議。
*   Qodo 關於 `port.postMessage` 前更細緻的連接埠狀態檢查 (目前依賴 `try-catch`)。

儘管有上述細節，此 PR 已整合了絕大多數重要的 review 意見，並顯著提升了專案的整體品質。
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -2,11 +2,22 @@
   "env": {
     "browser": true,
     "es2021": true,
-    "webextensions": true,
-    "node": true
+    "webextensions": true
   },
   "extends": ["eslint:recommended", "plugin:react/recommended"],
-  "overrides": [],
+  "overrides": [
+    {
+      "files": [
+        "build.mjs",
+        ".github/workflows/scripts/*.mjs",
+        "scripts/**/*.js",
+        "scripts/**/*.mjs"
+      ],
+      "env": {
+        "node": true
+      }
+    }
+  ],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
diff --git a/src/background/index.mjs b/src/background/index.mjs
@@ -319,17 +319,39 @@ async function executeApi(session, port, config) {
           try {
             port.proxy.postMessage({ session })
           } catch (e) {
-            console.error('[background] Error posting message to proxy tab in executeApi (ChatGPT Web Model):', e, { session });
-            try {
-              port.postMessage({ error: 'Failed to communicate with ChatGPT tab. Try refreshing the page.' });
-            } catch (notifyError) {
-              console.error('[background] Error sending communication failure notification back:', notifyError);
+            console.warn('[background] Error posting message to existing proxy tab in executeApi (ChatGPT Web Model):', e, '. Attempting to reconnect.', { session });
+            setPortProxy(port, tabId); // Attempt to re-establish the connection
+            if (port.proxy) {
+              console.debug('[background] Proxy re-established. Attempting to post message again.');
+              try {
+                port.proxy.postMessage({ session });
+                console.info('[background] Successfully posted session after proxy reconnection.');
+              } catch (e2) {
+                console.error('[background] Error posting message even after proxy reconnection:', e2, { session });
+                try {
+                  port.postMessage({ error: 'Failed to communicate with ChatGPT tab after reconnection attempt. Try refreshing the page.' });
+                } catch (notifyError) {
+                  console.error('[background] Error sending final communication failure notification back:', notifyError);
+                }
+              }
+            } else {
+              console.error('[background] Failed to re-establish proxy connection. Cannot send session.');
+              try {
+                port.postMessage({ error: 'Could not re-establish connection to ChatGPT tab. Try refreshing the page.' });
+              } catch (notifyError) {
+                console.error('[background] Error sending re-establishment failure notification back:', notifyError);
+              }
             }
           }
         } else {
           console.error(
-            '[background] Failed to send message: port.proxy is still not available after setPortProxy.',
-          )
+            '[background] Failed to send message: port.proxy is still not available after initial setPortProxy attempt.',
+          );
+          try {
+            port.postMessage({ error: 'Failed to initialize connection to ChatGPT tab. Try refreshing the page.' });
+          } catch (notifyError) {
+            console.error('[background] Error sending initial connection failure notification back:', notifyError);
+          }
         }
       } else {
         console.debug('[background] No valid ChatGPT Tab ID found. Using direct API call.')
@@ -488,22 +510,21 @@ Browser.runtime.onMessage.addListener(async (message, sender) => {
         try {
           const response = await fetch(message.data.input, message.data.init)
           const text = await response.text()
+          const responseObject = { // Defined for clarity before conditional error property
+            body: text,
+            ok: response.ok,
+            status: response.status,
+            statusText: response.statusText,
+            headers: Object.fromEntries(response.headers),
+          };
           if (!response.ok) {
+            responseObject.error = `HTTP error ${response.status}: ${response.statusText}`;
             console.warn(`[background] FETCH received error status: ${response.status} for ${message.data.input}`);
           }
           console.debug(
             `[background] FETCH successful for ${message.data.input}, status: ${response.status}`,
           )
-          return [
-            {
-              body: text,
-              ok: response.ok,
-              status: response.status,
-              statusText: response.statusText,
-              headers: Object.fromEntries(response.headers),
-            },
-            null,
-          ]
+          return [responseObject, null];
         } catch (error) {
           console.error(`[background] FETCH error for ${message.data.input}:`, error)
           return [null, { message: error.message, stack: error.stack }]
@@ -553,7 +574,7 @@ try {
         ) {
           console.log('[background] Capturing Arkose public_key request:', details.url)
           let formData = new URLSearchParams()
-          if (details.requestBody?.formData) { // Optional chaining
+          if (details.requestBody?.formData) {
             for (const k in details.requestBody.formData) {
               formData.append(k, details.requestBody.formData[k])
             }
