使用DOM API替代字符串拼接生成HTML内容; 添加主题初始化脚本修复闪烁问题 (#52)

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
全面改用原生 DOM API 构建 UI，替代字符串拼接，提升安全性与渲染性能。新增主题初始化脚本，按系统/本地偏好设置主题并修复主题闪烁。

- **Refactors**
- 在 debug-ui.js、detect.js、popup.js 使用 createElement + DocumentFragment
生成内容，替代字符串模板/innerHTML。
  - 批量插入减少重排与抖动，并提升可维护性与安全性（避免潜在 XSS）。

- **Bug Fixes**
  - 新增 shared/theme-init.js，页面加载前设置 data-bs-theme，修复主题闪烁。
  - 在 popup.html、debug.html、detect.html 引入该脚本。

<sup>Written for commit 0e821d6.
Summary will update on new commits.</sup>

<!-- End of auto-generated description by cubic. -->





<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Automatic theme initialization on load honoring system dark mode.

* **Bug Fixes**
  * Improved language detection to prefer the browser locale.

* **Refactor**
* Reworked UI rendering to use safer DOM construction and consistent
fragment-based updates; standardized error/success messaging and
footers.

* **Style**
  * Added a visual rule separator with dark-mode styling.

* **Chores**
  * Version bumped to 1.9.9.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: ChuwuYo

debug-ui.js

@@ -10,6 +10,7 @@
   <link href="bootstrap.min.css" rel="stylesheet">
   <link href="fonts/MapleMonoNL-Regular.woff2" rel="stylesheet">
   <link href="toggle.css" rel="stylesheet">
+  <script src="shared/theme-init.js"></script>
   <style>
     body {
       padding: 20px;

debug.html

@@ -10,6 +10,7 @@
   <link href="bootstrap.min.css" rel="stylesheet">
   <link href="fonts/MapleMonoNL-Regular.woff2" rel="stylesheet">
   <link href="toggle.css" rel="stylesheet">
+  <script src="shared/theme-init.js"></script>
   <style>
     body {
       padding: 20px;

detect.html

@@ -2,100 +2,6 @@
 
 #### 性能优化
 
-##### DocumentFragment 批量 DOM 更新优化
-**目标**: 减少页面 reflow 次数，提升 DOM 操作性能
-
-###### Phase 1: 关键优化 (高优先级 🔴)
-- [x] **popup.js - showUpdateError()** (行495-526)
-  - 最多5次 appendChild，改用 DocumentFragment
-  - 影响: 更新错误显示和重试功能
-  
-- [x] **popup.js - performHeaderCheck()** 成功分支 (行214-219)
-  - 3次 appendChild (Accept-Language 显示)
-  - 影响: 请求头快速检查成功时的显示
-  
-- [x] **popup.js - performHeaderCheck()** 失败分支 (行228-235)
-  - 3次 appendChild (错误 + 外部链接)
-  - 影响: 所有检测点失败时的显示
-  
-- [x] **popup.js - performHeaderCheck()** 异常分支 (行240-247)
-  - 3次 appendChild (错误 + 外部链接)
-  - 影响: 检测异常时的显示
-
-###### Phase 2: 中等优化 (建议修复 🟡)
-- [x] **detect.js - fetchAndDisplayHeaders()** 失败分支 (行363-376)
-  - 3次 appendChild (警告 + 外部链接)
-  - 影响: 检测页面未找到 Accept-Language 时
-  
-- [x] **detect.js - fetchAndDisplayHeaders()** 错误分支 (行391-410)
-  - 4次 appendChild (错误信息 + 详情 + 外部链接)
-  - 影响: 检测页面所有尝试失败时
-  
-- [x] **debug-ui.js - testHeaderBtn** 失败分支 (行286-325)
-  - 最多6次 appendChild
-  - 影响: 调试页面请求头测试失败时
-  
-- [x] **debug-ui.js - testHeaderBtn** 异常分支 (行368-387)
-  - 4次 appendChild
-  - 影响: 调试页面请求头测试异常时
-
-- [x] **debug-ui.js - testDomainCache()** (行970-1013)
-  - 最多7次 appendChild
-  - 影响: 调试页面域名缓存测试结果显示
-
-###### Phase 3: innerHTML 模板优化 (可选 🟢)
-- [ ] **popup.js** - 更新通知相关 (4处)
-  - 行554-561: showUpdateLoadingState()
-  - 行584-601: showUpdateNotification() 回退模式
-  - 行639: showUpdateNotification() 更新可用
-  - 行644-654: showUpdateNotification() 无更新
-  
-- [ ] **detect.js** - 检测结果显示 (17处)
-  - Canvas/WebGL/Audio/Intl/WebRTC/Fingerprint 检测
-  - 虽然安全(仅 i18n 文本)，但用 DocumentFragment 更现代
-  
-- [ ] **debug-ui.js** - 调试信息显示 (9处)
-  - 规则显示、诊断信息等
-  - 使用 DocumentFragment 替代 innerHTML 模板
-
-###### 示例
-popup.js
-Comment on lines +495 to +526  为了进一步提升性能，建议使用 DocumentFragment 来批量更新DOM。这样可以将多次 appendChild 操作合并为一次，从而减少DOM操作次数，避免不必要的页面重排（reflow），使代码更高效。
-
-    updateErrorMessage.innerHTML = '';
-    const fragment = document.createDocumentFragment();
-    
-    // 添加主要错误消息
-    fragment.appendChild(document.createTextNode(message));
-    
-    // 如果提供了回退建议，则添加
-    if (fallbackMessage) {
-      fragment.appendChild(document.createElement('br'));
-      const small = document.createElement('small');
-      small.className = 'text-muted mt-1';
-      small.textContent = fallbackMessage;
-      fragment.appendChild(small);
-    }
-    
-    // 如果适用，添加重试选项
-    if (showRetryOption) {
-      fragment.appendChild(document.createElement('br'));
-      const smallContainer = document.createElement('small');
-      smallContainer.className = 'mt-2';
-      
-      const retryLink = document.createElement('a');
-      retryLink.href = '#';
-      retryLink.className = 'text-primary';
-      retryLink.textContent = popupI18n.t('retry_update_check');
-      retryLink.addEventListener('click', (e) => {
-        e.preventDefault();
-        debouncedUpdateCheck();
-      });
-      
-      smallContainer.appendChild(retryLink);
-      fragment.appendChild(smallContainer);
-    }
-    updateErrorMessage.appendChild(fragment);
 
 
 #### 代码结构

detect.js

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "MultiLangSwitcher",
-  "version": "1.9.8",
+  "version": "1.9.9",
   "minimum_chrome_version": "88.0",
   "description": "__MSG_extension_description__",
   "default_locale": "zh",

docs/TODO.md

@@ -11,6 +11,7 @@
   <!-- 样式表引入 -->
   <link href="bootstrap.min.css" rel="stylesheet">
   <link href="toggle.css" rel="stylesheet">
+  <script src="shared/theme-init.js"></script>
   <style>
     /* 主体布局样式 */
     body {
@@ -413,19 +414,20 @@
       max-width: 100%;
       overflow-wrap: break-word;
     }
-     /* 自动切换标签样式 */
-     .auto-switch-label {
-       font-size: 0.8em;
-       display: block;
-       margin-bottom: 5px;
-     }
-
-     /* 自动切换外层容器 */
-     .toggle-wrapper-inline {
-       font-size: 1em;
-       margin: 0 auto;
-       width: fit-content;
-     }
+
+    /* 自动切换标签样式 */
+    .auto-switch-label {
+      font-size: 0.8em;
+      display: block;
+      margin-bottom: 5px;
+    }
+
+    /* 自动切换外层容器 */
+    .toggle-wrapper-inline {
+      font-size: 1em;
+      margin: 0 auto;
+      width: fit-content;
+    }
   </style>
 </head>