fix: 保护隐私并改进 AI 诊断的可访问性

Author: ChuwuYo

README.md

@@ -138,9 +138,10 @@ The `detect.html` page now includes an AI diagnosis panel. It sends the current
 
 Current implementation notes:
 
+* Querying an external AI provider sends a structured detection snapshot to that provider. This can include fingerprint-related signals such as language settings, locale and timezone data, partial browser fingerprint fields, and redacted WebRTC or header-derived context. Treat AI diagnosis as third-party data sharing and only use providers you trust.
 * AI configuration is stored locally in `chrome.storage.local`, grouped by provider
 * Replies follow the current detect page language by default
-* Exported Markdown only contains visible conversation, excluding hidden system prompt and initial detection snapshot injection messages
+* Exported Markdown only contains visible conversation, excluding the hidden system prompt and hidden initial detection snapshot injection messages
 
 ***
 

detect-ai.js

@@ -65,6 +65,47 @@
 	const getVisibleChatMessages = () =>
 		aiSessionState.messages.filter((message) => message.visible !== false);
 
+	const sanitizeSnapshotForAI = (snapshot) => {
+		if (!snapshot) {
+			return snapshot;
+		}
+
+		const sanitized = JSON.parse(JSON.stringify(snapshot));
+
+		if (sanitized.http) {
+			sanitized.http.headers = {
+				redacted: true,
+				headerNames: Object.keys(snapshot.http?.headers || {}),
+			};
+		}
+
+		if (sanitized.webrtc) {
+			sanitized.webrtc.ips = Array.isArray(snapshot.webrtc?.ips)
+				? snapshot.webrtc.ips.map(() => "[redacted]")
+				: [];
+		}
+
+		if (sanitized.browserFingerprint) {
+			sanitized.browserFingerprint.userAgent = "[redacted]";
+		}
+
+		if (sanitized.hardwareFingerprint?.canvas) {
+			sanitized.hardwareFingerprint.canvas.hash = "[redacted]";
+		}
+
+		if (sanitized.hardwareFingerprint?.webgl) {
+			sanitized.hardwareFingerprint.webgl.hash = "[redacted]";
+			sanitized.hardwareFingerprint.webgl.vendor = "[redacted]";
+			sanitized.hardwareFingerprint.webgl.renderer = "[redacted]";
+		}
+
+		if (sanitized.hardwareFingerprint?.audio) {
+			sanitized.hardwareFingerprint.audio.hash = "[redacted]";
+		}
+
+		return sanitized;
+	};
+
 	const setStatusToneClass = (element, tone) => {
 		if (!element) {
 			return;
@@ -602,6 +643,8 @@
 	};
 
 	const buildInitialPrompt = (snapshot) => {
+		const sanitizedSnapshot = sanitizeSnapshotForAI(snapshot);
+
 		if (getUiLanguage() === "zh") {
 			return [
 				"请基于下面这份浏览器环境检测快照做一次中性的结果解读。",
@@ -610,7 +653,7 @@
 				"如果某些信号在检测页里属于常见现象，请明确写出“这是常见现象，不代表真实网站一定存在问题”。",
 				"不要重复整段 JSON，只提炼真正重要的点。",
 				"",
-				JSON.stringify(snapshot, null, 2),
+				JSON.stringify(sanitizedSnapshot, null, 2),
 			].join("\n");
 		}
 
@@ -621,7 +664,7 @@
 			"If a signal is common on a detect page, explicitly say it is common and does not automatically mean a real website problem.",
 			"Do not repeat the full JSON; extract only the important points.",
 			"",
-			JSON.stringify(snapshot, null, 2),
+			JSON.stringify(sanitizedSnapshot, null, 2),
 		].join("\n");
 	};
 

detect.html

@@ -146,8 +146,12 @@
       flex-wrap: wrap;
     }
 
-    .ai-chat-composer textarea {
+    .ai-chat-composer-main {
       flex: 1 1 420px;
+    }
+
+    .ai-chat-composer textarea {
+      width: 100%;
       min-height: 96px;
       resize: vertical;
     }
@@ -227,11 +231,14 @@ <h4 class="mb-1" id="aiDiagnosisTitle"></h4>
               <button class="btn btn-outline-secondary" type="button" id="aiClearButton"></button>
             </div>
 
-            <div class="ai-chat-messages mb-3" id="aiChatMessages" aria-live="polite"></div>
-            <div class="small text-muted mb-3" id="aiChatStatus"></div>
+            <div class="ai-chat-messages mb-3" id="aiChatMessages"></div>
+            <div class="small text-muted mb-3" id="aiChatStatus" aria-live="polite" role="status"></div>
 
             <div class="ai-chat-composer">
-              <textarea class="form-control" id="aiUserInput"></textarea>
+              <div class="ai-chat-composer-main">
+                <label class="visually-hidden" for="aiUserInput" id="aiUserInputLabel"></label>
+                <textarea class="form-control" id="aiUserInput"></textarea>
+              </div>
               <div class="ai-chat-composer-actions">
                 <button class="btn btn-success" type="button" id="aiSendButton"></button>
                 <button class="btn btn-outline-secondary" type="button" id="aiExportButton"></button>

detect.js

@@ -310,7 +310,7 @@ const renderJsLanguageInfo = (jsLanguageInfo) => {
 	const langTitleP = document.createElement("p");
 	langTitleP.className = "mb-1";
 	const strongLang = document.createElement("strong");
-	strongLang.textContent = "navigator.language:";
+	strongLang.textContent = translateDetect("navigator_language_label");
 	langTitleP.appendChild(strongLang);
 	fragment.appendChild(langTitleP);
 
@@ -322,7 +322,7 @@ const renderJsLanguageInfo = (jsLanguageInfo) => {
 	const langsTitleP = document.createElement("p");
 	langsTitleP.className = "mb-1 mt-2";
 	const strongLangs = document.createElement("strong");
-	strongLangs.textContent = "navigator.languages:";
+	strongLangs.textContent = translateDetect("navigator_languages_label");
 	langsTitleP.appendChild(strongLangs);
 	fragment.appendChild(langsTitleP);
 
@@ -393,7 +393,7 @@ const renderCanvasFingerprintInfo = (canvasFingerprintInfo) => {
 	const hashTitleP = document.createElement("p");
 	hashTitleP.className = "mb-1";
 	const strongHash = document.createElement("strong");
-	strongHash.textContent = "Canvas hash:";
+	strongHash.textContent = translateDetect("canvas_hash_label");
 	hashTitleP.appendChild(strongHash);
 	fragment.appendChild(hashTitleP);
 
@@ -501,12 +501,18 @@ const renderWebglFingerprintInfo = (webglFingerprintInfo) => {
 		fragment.appendChild(valP);
 	};
 
-	addDetail("WebGL hash:", webglFingerprintInfo.hash, true, "");
-	addDetail("WebGL unmasked vendor:", webglFingerprintInfo.vendor);
-	addDetail("WebGL unmasked renderer:", webglFingerprintInfo.renderer);
-	addDetail("WebGL version:", webglFingerprintInfo.version);
+	addDetail(translateDetect("webgl_hash_label"), webglFingerprintInfo.hash, true, "");
 	addDetail(
-		"Shading Language Version:",
+		translateDetect("webgl_unmasked_vendor_label"),
+		webglFingerprintInfo.vendor,
+	);
+	addDetail(
+		translateDetect("webgl_unmasked_renderer_label"),
+		webglFingerprintInfo.renderer,
+	);
+	addDetail(translateDetect("webgl_version_label"), webglFingerprintInfo.version);
+	addDetail(
+		translateDetect("webgl_shading_language_version_label"),
 		webglFingerprintInfo.shadingLanguageVersion,
 	);
 
@@ -599,7 +605,7 @@ const renderAudioFingerprintInfo = (audioFingerprintInfo) => {
 	const hashTitleP = document.createElement("p");
 	hashTitleP.className = "mb-1";
 	const strongHash = document.createElement("strong");
-	strongHash.textContent = "AudioContext hash:";
+	strongHash.textContent = translateDetect("audio_context_hash_label");
 	hashTitleP.appendChild(strongHash);
 	fragment.appendChild(hashTitleP);
 
@@ -656,7 +662,7 @@ const renderIntlInfo = (intlInfo) => {
 	const dtTitleP = document.createElement("p");
 	dtTitleP.className = "mb-1";
 	const strongDt = document.createElement("strong");
-	strongDt.textContent = "DateTimeFormat Locale:";
+	strongDt.textContent = translateDetect("datetime_format_locale_label");
 	dtTitleP.appendChild(strongDt);
 	fragment.appendChild(dtTitleP);
 
@@ -668,7 +674,7 @@ const renderIntlInfo = (intlInfo) => {
 	const nfTitleP = document.createElement("p");
 	nfTitleP.className = "mb-1 mt-2";
 	const strongNf = document.createElement("strong");
-	strongNf.textContent = "NumberFormat Locale:";
+	strongNf.textContent = translateDetect("number_format_locale_label");
 	nfTitleP.appendChild(strongNf);
 	fragment.appendChild(nfTitleP);
 
@@ -693,7 +699,23 @@ const collectWebRtcIps = async () =>
 		const ips = [];
 
 		try {
+			if (typeof ResourceManager.createRTCPeerConnection !== "function") {
+				resolve({
+					unsupported: true,
+					error: translateDetect("webrtc_not_supported"),
+				});
+				return;
+			}
+
 			const pc = ResourceManager.createRTCPeerConnection({ iceServers: [] });
+			if (!pc) {
+				resolve({
+					unsupported: true,
+					error: translateDetect("webrtc_not_supported"),
+				});
+				return;
+			}
+
 			pc.createDataChannel("");
 
 			pc.onicecandidate = (event) => {
@@ -719,17 +741,30 @@ const collectWebRtcIps = async () =>
 
 			ResourceManager.setTimeout(() => {
 				ResourceManager.closeRTCPeerConnection(pc);
-				resolve(ips);
+				resolve({ ips, unsupported: false, error: "" });
 			}, 1000);
 		} catch (error) {
 			console.error("WebRTC collection error:", error);
-			resolve([]);
+			resolve({
+				unsupported: true,
+				error: error?.message || String(error),
+			});
 		}
 	});
 
 const collectWebRtcInfo = async () => {
 	try {
-		const ips = await collectWebRtcIps();
+		const result = await collectWebRtcIps();
+		if (result?.unsupported) {
+			return {
+				status: "unsupported",
+				ips: [],
+				ipLeakDetected: false,
+				error: result.error || translateDetect("webrtc_not_supported"),
+			};
+		}
+
+		const ips = result?.ips || [];
 		return {
 			status: ips.length > 0 ? "ok" : "none",
 			ips,
@@ -754,7 +789,7 @@ const renderWebRtcInfo = (webRtcInfo) => {
 	webRtcInfoElement.innerHTML = "";
 	const fragment = document.createDocumentFragment();
 
-	if (webRtcInfo.status === "error") {
+	if (webRtcInfo.status === "error" || webRtcInfo.status === "unsupported") {
 		const errorP = document.createElement("p");
 		errorP.className = "text-danger";
 		errorP.textContent = `${translateDetect("webrtc_not_supported")}: ${webRtcInfo.error}`;
@@ -865,15 +900,15 @@ const renderFingerprintInfo = (fingerprintInfo) => {
 		fragment.appendChild(valP);
 	};
 
-	addDetail("User Agent:", fingerprintInfo.userAgent, false, "", true);
+	addDetail(translateDetect("user_agent_label"), fingerprintInfo.userAgent, false, "", true);
 	addDetail(
-		"Screen information:",
+		translateDetect("screen_information_label"),
 		`${fingerprintInfo.screen.width}x${fingerprintInfo.screen.height}x${fingerprintInfo.screen.colorDepth}`,
 		true,
 	);
 	addDetail(
-		"Timezone:",
-		`${fingerprintInfo.timezone} (Offset: ${fingerprintInfo.timezoneOffset})`,
+		translateDetect("timezone_label"),
+		`${fingerprintInfo.timezone} (${translateDetect("offset_label")} ${fingerprintInfo.timezoneOffset})`,
 		true,
 	);
 
@@ -896,7 +931,7 @@ const renderCompatibilityInfo = (compatibilityInfo) => {
 	const apiListEl = document.getElementById("apiCompatibilityList");
 	if (!browserInfoEl || !apiListEl) return;
 
-	browserInfoEl.textContent = `${compatibilityInfo.browser.name} ${compatibilityInfo.browser.fullVersion} on ${compatibilityInfo.browser.os}`;
+	browserInfoEl.textContent = `${compatibilityInfo.browser.name} ${compatibilityInfo.browser.fullVersion} ${translateDetect("on_connector")} ${compatibilityInfo.browser.os}`;
 	apiListEl.innerHTML = "";
 
 	compatibilityInfo.apiSupport.forEach((api) => {

docs/Project_Structure.md

@@ -21,7 +21,7 @@ MultiLangSwitcher/
 │   ├── shared-language-options.js   - 共享语言选项列表
 │   ├── header-check-utils.js        - 请求头检查工具函数
 │   ├── shared-resource-manager.js   - 共享资源管理器
-│   ├── md5.js                       - MD5加密算法
+│   ├── md5.js                       - MD5 哈希函数
 │   ├── theme-init.js                - 主题初始化脚本
 │   └── vendor/                      - 第三方前端库
 │       ├── marked.umd.min.js        - Markdown 渲染库

docs/README/README.zh-CN.md

@@ -141,9 +141,10 @@ MultiLangSwitcher 是一个 Chromium 内核浏览器扩展，帮助用户快速
 
 当前实现要点：
 
+* 调用外部 AI 服务商时，会把结构化检测快照发送给该服务商。这可能包含与指纹相关的信号，例如语言设置、Locale 与时区信息、部分浏览器指纹字段，以及已脱敏的 WebRTC 或请求头上下文。请将 AI 诊断视为一次第三方数据共享，只在信任该服务商时使用。
 * AI 配置保存在 `chrome.storage.local`，并按 provider 分桶保存
 * 回复默认跟随 detect 页面当前语言
-* 导出的 Markdown 只包含可见对话，不包含隐藏的 system prompt 和初始检测快照注入消息
+* 导出的 Markdown 只包含可见对话，不包含隐藏的 system prompt 和隐藏的初始检测快照注入消息
 
 ***
 

i18n/detect-en.js

@@ -29,6 +29,22 @@ if (typeof detectEn === "undefined") {
 		partial_fingerprint: "Partial Browser Fingerprint Information",
 		supported: "Supported",
 		not_supported: "Not Supported",
+		navigator_language_label: "navigator.language:",
+		navigator_languages_label: "navigator.languages:",
+		canvas_hash_label: "Canvas hash:",
+		webgl_hash_label: "WebGL hash:",
+		webgl_unmasked_vendor_label: "WebGL unmasked vendor:",
+		webgl_unmasked_renderer_label: "WebGL unmasked renderer:",
+		webgl_version_label: "WebGL version:",
+		webgl_shading_language_version_label: "Shading Language Version:",
+		audio_context_hash_label: "AudioContext hash:",
+		datetime_format_locale_label: "DateTimeFormat Locale:",
+		number_format_locale_label: "NumberFormat Locale:",
+		user_agent_label: "User Agent:",
+		screen_information_label: "Screen information:",
+		timezone_label: "Timezone:",
+		offset_label: "Offset:",
+		on_connector: "on",
 		"Refresh detection": "Refresh Detection Info",
 		request_header_method: "Request Header",
 		javascript_method: "JavaScript",
@@ -132,6 +148,7 @@ if (typeof detectEn === "undefined") {
 		ai_clear: "Clear Session",
 		ai_send: "Send",
 		ai_export: "Export Markdown",
+		ai_user_input_label: "Follow-up question",
 		ai_export_empty: "There is no visible chat content to export yet.",
 		ai_export_success: "Chat exported as Markdown.",
 		ai_copy_failed: "Copy failed. Please try again.",

i18n/detect-i18n.js

@@ -170,9 +170,10 @@ class DetectI18n extends BaseI18n {
 		);
 		if (aiProviderDescription && !aiProviderDescription.dataset.initialized) {
 			const providerKey = aiProviderSelect?.value || "openrouter";
-			aiProviderDescription.textContent = this.t(
-				`ai_provider_${providerKey}_desc`,
-			);
+			const preset = window.AIProviderPresets?.[providerKey];
+			aiProviderDescription.textContent = preset?.descriptionKey
+				? this.t(preset.descriptionKey)
+				: "";
 		}
 
 		const aiBaseUrlLabel = document.querySelector("#aiBaseUrlLabel");
@@ -226,8 +227,13 @@ class DetectI18n extends BaseI18n {
 		}
 
 		const aiUserInput = document.querySelector("#aiUserInput");
+		const aiUserInputLabel = document.querySelector("#aiUserInputLabel");
+		if (aiUserInputLabel) {
+			aiUserInputLabel.textContent = this.t("ai_user_input_label");
+		}
 		if (aiUserInput) {
 			aiUserInput.placeholder = this.t("ai_user_input_placeholder");
+			aiUserInput.setAttribute("aria-label", this.t("ai_user_input_label"));
 		}
 
 		// 处理所有检测中文本
@@ -269,12 +275,12 @@ class DetectI18n extends BaseI18n {
 
 		const aiChatStatus = document.querySelector("#aiChatStatus");
 		if (aiChatStatus && !aiChatStatus.dataset.initialized) {
-			aiChatStatus.textContent = this.t("ai_config_incomplete");
+			aiChatStatus.textContent = "";
 		}
 
 		const aiConfigHint = document.querySelector("#aiConfigHint");
 		if (aiConfigHint && !aiConfigHint.dataset.initialized) {
-			aiConfigHint.textContent = this.t("ai_config_incomplete");
+			aiConfigHint.textContent = "";
 		}
 	}
 }