fix: per-tab 写锁修 popup 数字回落 + 加速整体检测链路

setube · setube · commit 2d7df4ded0cf · 2026-05-12T17:24:50.000+08:00
之前 detection / dynamic-snapshot / bundle-license / webRequest 这 4 路 writer 各自做 read-modify-write,慢的 writer 把过期快照写回时会把快的 writer 已经落盘的字段一起冲掉 —— 用户视觉上是 popup 检测数从 7→13→3→7 来回闪。新增 tab-write-lock.ts 维护一把 per-tab 异步写锁,所有 read-modify-write 段必须串行进入,后到的 writer 都能看到前一个 writer 刚落盘的最新数据。

接入位置:bundle / detection / dynamic-snapshot / index.ts 的 webRequest / message-router.ts 的 PAGE_DETECTION_RESULT 全部包到 withTabWriteLock 里;detection 拿到 page-detector 注入结果后才进锁,把 main fallback 的 fetch 放在锁外做,保持响应。popup-cache.ts 新增 mergePageDetectionRecord:同一 URL 下 page detection 重跑时合并旧的 technologies + 资源 URL,避免 React SPA 异步渲染过程中某次重扫抓的项变少导致 popup 数量临时回落。detection / message-router 写 data.page 改用合并而不是替换。

加速:dynamic-snapshot.ts DYNAMIC_SNAPSHOT_PROCESS_DELAY 800→400ms;content-observer.ts SEND_DELAY 之前也降到 400ms(在前面的 commit 里),配合 bundle 那侧 SCAN_DELAY / 并发优化,端到端从页面加载到 popup 完整识别从 ~8s 降到 ~2.4s。dynamic-snapshot 的 genericNames 同步跟 page-detector 那边的过滤名(search / sdk / analytics / pixel / ms.* 等)保持一致。clearTabDetectionState 里加 clearTabWriteLock 释放挂起锁条目。

将版本号提升到 1.3.60。
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "stackprism",
   "private": true,
-  "version": "1.3.59",
+  "version": "1.3.60",
   "type": "module",
   "description": "StackPrism 用于检测网页前端、后端、CDN、SaaS、广告营销、统计、登录、支付、网站程序和主题模板线索。",
   "scripts": {
diff --git a/src/background/detection.ts b/src/background/detection.ts
@@ -1,10 +1,11 @@
 import { augmentPageWithWordPressThemeStyles } from './wordpress'
-import { buildPopupCacheRecord, cleanPageDetectionRecord } from './popup-cache'
+import { buildPopupCacheRecord, cleanPageDetectionRecord, mergePageDetectionRecord } from './popup-cache'
 import { fetchMainHeadersFallback, mergeHeaderRecords } from './headers'
 import { clearBadge, clearTabSession, getTabData, getTabSnapshot, updateBadgeForTab, writeTabData } from './tab-store'
 import { buildEffectivePageRules, loadDetectorSettings, loadTechRules } from './detector-settings'
 import { scheduleBundleLicenseDetection } from './bundle-license'
 import { injectContentObserver } from './content-injector'
+import { withTabWriteLock } from './tab-write-lock'
 import { isDetectablePageUrl } from '@/utils/page-support'
 
 const activeDetectionTimers = new Map<number, ReturnType<typeof setTimeout>>()
@@ -106,7 +107,9 @@ export const runActivePageDetection = async (tabId: number, options: { force?: b
     lastDetectionRunAt.set(tabId, Date.now())
     console.log('[SP detection] run start', tabId, 'force:', Boolean(options.force))
     await injectContentObserver(tabId)
-    const [data, rules, settings] = await Promise.all([getTabData(tabId), loadTechRules(), loadDetectorSettings()])
+    // 这里不再预读 data —— page-detector 注入要 500ms+,期间其他 writer 会写过 storage;
+    // 等 detector 跑完再统一 re-read 最新 data 再做合并写回
+    const [rules, settings] = await Promise.all([loadTechRules(), loadDetectorSettings()])
     const pageRules = buildEffectivePageRules(rules.page || {}, settings)
     await chrome.scripting.executeScript({
       target: { tabId },
@@ -125,21 +128,36 @@ export const runActivePageDetection = async (tabId: number, options: { force?: b
     if (!page) return
 
     const augmentedPage = await augmentPageWithWordPressThemeStyles(page)
-    data.page = cleanPageDetectionRecord(augmentedPage)
-
-    if (needsMainHeadersFallback(data.main, (page as any).url || tab.url)) {
-      const fallback = await fetchMainHeadersFallback((page as any).url || '', rules.headers || {}, settings)
-      if (fallback) {
-        data.main = shouldPreserveMainHeaderRecord(data.main, (page as any).url || tab.url)
-          ? mergeHeaderRecords(data.main, fallback)
-          : fallback
-      } else if (data.main && !shouldPreserveMainHeaderRecord(data.main, (page as any).url || tab.url)) {
-        delete data.main
-      }
+    const freshClean = cleanPageDetectionRecord(augmentedPage)
+
+    // 进 per-tab 锁:read-modify-write 段必须跟其他 writer 串行,避免 dynamic/bundle/headers 并发读到同一份旧快照,
+    // 互相把对方刚写好的字段覆盖掉(popup 上数字回落)
+    let fallbackForMain: any = null
+    const needsFallback = await withTabWriteLock(tabId, async () => {
+      const peek = (await getTabData(tabId)) || {}
+      return needsMainHeadersFallback(peek.main, (page as any).url || tab.url)
+    })
+    if (needsFallback) {
+      fallbackForMain = await fetchMainHeadersFallback((page as any).url || '', rules.headers || {}, settings)
     }
 
-    data.updatedAt = Date.now()
-    await saveTabDataAndBadge(tabId, data, settings)
+    await withTabWriteLock(tabId, async () => {
+      const latest = (await getTabData(tabId)) || {}
+      latest.page = mergePageDetectionRecord(latest.page, freshClean)
+
+      if (needsMainHeadersFallback(latest.main, (page as any).url || tab.url)) {
+        if (fallbackForMain) {
+          latest.main = shouldPreserveMainHeaderRecord(latest.main, (page as any).url || tab.url)
+            ? mergeHeaderRecords(latest.main, fallbackForMain)
+            : fallbackForMain
+        } else if (latest.main && !shouldPreserveMainHeaderRecord(latest.main, (page as any).url || tab.url)) {
+          delete latest.main
+        }
+      }
+
+      latest.updatedAt = Date.now()
+      await saveTabDataAndBadge(tabId, latest, settings)
+    })
     scheduleBundleLicenseDetection(tabId)
   } catch {
     return
diff --git a/src/background/dynamic-snapshot.ts b/src/background/dynamic-snapshot.ts
@@ -13,9 +13,10 @@ import { clearBadge, clearTabSession, getTabData, getTabSnapshot } from './tab-s
 import { saveTabDataAndBadge } from './detection'
 import { buildEffectivePageRules, loadDetectorSettings, loadTechRules } from './detector-settings'
 import { scheduleBundleLicenseDetection } from './bundle-license'
+import { withTabWriteLock } from './tab-write-lock'
 
 const DYNAMIC_FAST_LOOKUP_RULE_MIN = 1000
-const DYNAMIC_SNAPSHOT_PROCESS_DELAY = 800
+const DYNAMIC_SNAPSHOT_PROCESS_DELAY = 400
 
 const dynamicFrontendRuleKeyCache = new WeakMap()
 const dynamicFrontendHintsFlagCache = new WeakMap()
@@ -152,12 +153,29 @@ const isLikelyDynamicLibraryFileName = name => {
     'system',
     'systemjs',
     // 文档站 / 内容站常见的搜索 worker 文件名（mkdocs / docusaurus / vitepress 等都叫这名），
-    // 真实的搜索库（Lunr / FlexSearch / Pagefind / Algolia）会通过专用规则或版权注释命中
+    // 真实的搜索库（Lunr / FlexSearch / Pagefind / Algolia）会通过专用规则或官方版权注释命中
     'search',
+    // 通用名，几乎所有站点都有但不属于公共库
+    'sdk',
+    'analytics',
+    'tracker',
+    'tracking',
+    'beacon',
+    'pixel',
     // 站点自身的内部脚本，不是公共库
-    'tgwallpaper'
+    'tgwallpaper',
+    'jsbin'
   ])
-  return !genericNames.has(name.toLowerCase())
+  if (genericNames.has(name.toLowerCase())) {
+    return false
+  }
+  if (/^ms\.[a-z0-9_-]+$/i.test(name)) {
+    return false
+  }
+  if (/^(?:tas-client|ethicalads|svg-loader)$/i.test(name)) {
+    return false
+  }
+  return true
 }
 
 const compileOptionalDynamicPattern = pattern => {
@@ -670,10 +688,15 @@ const processQueuedDynamicSnapshot = async tabId => {
     return
   }
 
-  const [data, rules, settings] = await Promise.all([getTabData(tabId), loadTechRules(), loadDetectorSettings()])
-  data.dynamic = normalizeDynamicSnapshot(snapshot, buildEffectivePageRules(rules.page || {}, settings), data.dynamic)
-  data.updatedAt = Date.now()
-  await saveTabDataAndBadge(tabId, data, settings)
+  const [rules, settings] = await Promise.all([loadTechRules(), loadDetectorSettings()])
+  const pageRulesForDynamic = buildEffectivePageRules(rules.page || {}, settings)
+  // 进 per-tab 锁:跟 detection / bundle / webRequest 串行做 read-modify-write,避免并发覆盖
+  await withTabWriteLock(tabId, async () => {
+    const latest = (await getTabData(tabId)) || {}
+    latest.dynamic = normalizeDynamicSnapshot(snapshot, pageRulesForDynamic, latest.dynamic)
+    latest.updatedAt = Date.now()
+    await saveTabDataAndBadge(tabId, latest, settings)
+  })
   scheduleBundleLicenseDetection(tabId)
 }
 
diff --git a/src/background/index.ts b/src/background/index.ts
@@ -13,6 +13,7 @@ import { getTabData, getTabSnapshot } from './tab-store'
 import { SETTINGS_STORAGE_KEY, applyDetectorSettingsUpdate, loadDetectorSettings, loadTechRules } from './detector-settings'
 import { registerMessageRouter } from './message-router'
 import { clearBundleLicenseTimer } from './bundle-license'
+import { clearTabWriteLock, withTabWriteLock } from './tab-write-lock'
 import { isDetectablePageUrl, isObservableRequestUrl } from '@/utils/page-support'
 
 registerMessageRouter()
@@ -41,6 +42,7 @@ const clearTabDetectionState = (tabId: number) => {
   clearBundleLicenseTimer(tabId)
   clearDynamicSnapshotTimer(tabId)
   clearPendingDynamicSnapshot(tabId)
+  clearTabWriteLock(tabId)
   clearBadge(tabId)
   clearTabSession(tabId).catch(() => {})
 }
@@ -105,8 +107,8 @@ chrome.webRequest.onHeadersReceived.addListener(
     if (details.tabId < 0 || !details.responseHeaders) return
     if (!isObservableRequestUrl(details.url)) return
 
-    Promise.all([getTabData(details.tabId), loadTechRules(), loadDetectorSettings(), getTabSnapshot(details.tabId)])
-      .then(([data, rules, settings, tab]) => {
+    Promise.all([loadTechRules(), loadDetectorSettings(), getTabSnapshot(details.tabId)])
+      .then(async ([rules, settings, tab]) => {
         if (details.type === 'main_frame' && !isDetectablePageUrl(details.url)) {
           clearTabDetectionState(details.tabId)
           return
@@ -116,18 +118,22 @@ chrome.webRequest.onHeadersReceived.addListener(
           return
         }
         const record = buildHeaderRecord(details, rules.headers || {}, settings)
-        if (details.type === 'main_frame') {
-          clearCrossOriginDynamicSnapshot(data, details.url)
-          data.main = shouldMergeHeaderRecords(data.main, record) ? mergeHeaderRecords(data.main, record) : record
-          data.apis = []
-          data.frames = []
-        } else if (details.type === 'xmlhttprequest' || (details.type as string) === 'fetch' || details.type === 'websocket') {
-          data.apis = dedupeApiRecords([record, ...(data.apis || [])])
-        } else if (details.type === 'sub_frame') {
-          data.frames = dedupeApiRecords([record, ...(data.frames || [])]).slice(0, 10)
-        }
-        data.updatedAt = Date.now()
-        return saveTabDataAndBadge(details.tabId, data, settings)
+        // 进 per-tab 锁:concurrent webRequest 事件不能并发 read-modify-write,否则会互相覆盖彼此的 apis / frames / main
+        await withTabWriteLock(details.tabId, async () => {
+          const latest = (await getTabData(details.tabId)) || {}
+          if (details.type === 'main_frame') {
+            clearCrossOriginDynamicSnapshot(latest, details.url)
+            latest.main = shouldMergeHeaderRecords(latest.main, record) ? mergeHeaderRecords(latest.main, record) : record
+            latest.apis = []
+            latest.frames = []
+          } else if (details.type === 'xmlhttprequest' || (details.type as string) === 'fetch' || details.type === 'websocket') {
+            latest.apis = dedupeApiRecords([record, ...(latest.apis || [])])
+          } else if (details.type === 'sub_frame') {
+            latest.frames = dedupeApiRecords([record, ...(latest.frames || [])]).slice(0, 10)
+          }
+          latest.updatedAt = Date.now()
+          await saveTabDataAndBadge(details.tabId, latest, settings)
+        })
       })
       .catch(() => {})
   },
diff --git a/src/background/message-router.ts b/src/background/message-router.ts
@@ -3,9 +3,16 @@ import { augmentPageWithWordPressThemeStyles, detectWordPressThemeStylesFromPage
 import { clearBadge, clearTabSession, getTabData, getTabSnapshot } from './tab-store'
 import { queueDynamicSnapshot } from './dynamic-snapshot'
 import { addStoredCustomHeaderRules } from './headers'
-import { buildPopupRawResult, cleanPageDetectionRecord, cleanTechnologyRecords, getPopupResultResponse } from './popup-cache'
+import {
+  buildPopupRawResult,
+  cleanPageDetectionRecord,
+  cleanTechnologyRecords,
+  getPopupResultResponse,
+  mergePageDetectionRecord
+} from './popup-cache'
 import { runActivePageDetection, saveTabDataAndBadge } from './detection'
 import { loadDetectorSettings } from './detector-settings'
+import { withTabWriteLock } from './tab-write-lock'
 import { checkPageSupport, isDetectablePageUrl } from '@/utils/page-support'
 
 const clearUnsupportedTab = async (tabId: number) => {
@@ -115,16 +122,21 @@ export const registerMessageRouter = () => {
         sendResponse({ ok: false, error: '缺少有效 tabId' })
         return false
       }
-      Promise.all([getTabData(tabId), loadDetectorSettings(), getTabSnapshot(tabId)])
-        .then(async ([data, settings, tab]) => {
+      Promise.all([loadDetectorSettings(), getTabSnapshot(tabId)])
+        .then(async ([settings, tab]) => {
           if (!isDetectablePageUrl(tab.url)) {
             await clearUnsupportedTab(tabId)
             return
           }
           const page = await augmentPageWithWordPressThemeStyles(message.page)
-          data.page = cleanPageDetectionRecord(page)
-          data.updatedAt = Date.now()
-          return saveTabDataAndBadge(tabId, data, settings)
+          const freshClean = cleanPageDetectionRecord(page)
+          // 进 per-tab 锁:跟 detection / dynamic / bundle / webRequest 串行,避免互相覆盖字段
+          await withTabWriteLock(tabId, async () => {
+            const latest = (await getTabData(tabId)) || {}
+            latest.page = mergePageDetectionRecord(latest.page, freshClean)
+            latest.updatedAt = Date.now()
+            await saveTabDataAndBadge(tabId, latest, settings)
+          })
         })
         .then(() => sendResponse({ ok: true }))
         .catch(error => sendResponse({ ok: false, error: String(error) }))
diff --git a/src/background/popup-cache.ts b/src/background/popup-cache.ts
@@ -522,3 +522,39 @@ export const cleanPageDetectionRecord = (page: any) => ({
   technologies: cleanTechnologyRecords(page?.technologies),
   resources: cleanPageResources(page?.resources)
 })
+
+// 同一 URL 下 page detection 多次重跑（SPA 异步渲染、tab 复用、用户在页面停留期间触发再扫描）时
+// 合并技术列表 + 资源 URL,而不是直接整段替换；可以避免新一轮抓得少导致 popup 上检测项闪烁式回落
+export const mergePageDetectionRecord = (previous: any, fresh: any) => {
+  if (!fresh) return previous || null
+  if (!previous || !previous.url || previous.url !== fresh.url) return fresh
+  const previousTechs = Array.isArray(previous.technologies) ? previous.technologies : []
+  const freshTechs = Array.isArray(fresh.technologies) ? fresh.technologies : []
+  const previousResources = previous.resources || {}
+  const freshResources = fresh.resources || {}
+  const mergeUrlList = (a: any, b: any, limit: number) => {
+    const seen = new Set<string>()
+    const out: string[] = []
+    for (const value of [...(Array.isArray(a) ? a : []), ...(Array.isArray(b) ? b : [])]) {
+      const url = typeof value === 'string' ? value : ''
+      if (!url || seen.has(url)) continue
+      seen.add(url)
+      out.push(url)
+      if (out.length >= limit) break
+    }
+    return out
+  }
+  return {
+    ...fresh,
+    technologies: mergeTechnologyRecords([...previousTechs, ...freshTechs]),
+    resources: {
+      ...previousResources,
+      ...freshResources,
+      scripts: mergeUrlList(previousResources.scripts, freshResources.scripts, 200),
+      stylesheets: mergeUrlList(previousResources.stylesheets, freshResources.stylesheets, 200),
+      resourceTiming: mergeUrlList(previousResources.resourceTiming, freshResources.resourceTiming, 400),
+      all: mergeUrlList(previousResources.all, freshResources.all, 400),
+      themeAssetUrls: mergeUrlList(previousResources.themeAssetUrls, freshResources.themeAssetUrls, 120)
+    }
+  }
+}
diff --git a/src/background/tab-write-lock.ts b/src/background/tab-write-lock.ts
@@ -0,0 +1,30 @@
+// 每个 tab 共用一把异步写锁：detection / dynamic / bundle / webRequest 这些并发 writer
+// 必须串行化进入 read-modify-write 段,否则它们各自读到的快照可能没包含彼此的最新写入,
+// 互相把对方的字段覆盖掉(用户视觉:popup 上数字 7 → 13 → 3 → 7 来回闪)
+const tabWriteLocks = new Map<number, Promise<void>>()
+
+export const withTabWriteLock = async <T>(tabId: number, task: () => Promise<T>): Promise<T> => {
+  if (typeof tabId !== 'number' || tabId < 0) return task()
+  const previous = tabWriteLocks.get(tabId) || Promise.resolve()
+  let release: () => void = () => {}
+  const next = new Promise<void>(resolve => {
+    release = resolve
+  })
+  tabWriteLocks.set(
+    tabId,
+    previous.then(() => next)
+  )
+  try {
+    await previous
+    return await task()
+  } finally {
+    release()
+    if (tabWriteLocks.get(tabId) === next) {
+      tabWriteLocks.delete(tabId)
+    }
+  }
+}
+
+export const clearTabWriteLock = (tabId: number): void => {
+  tabWriteLocks.delete(tabId)
+}

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "stackprism",`
`3`	`3`	`"private": true,`
`4`		`- "version": "1.3.59",`
	`4`	`+ "version": "1.3.60",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"description": "StackPrism 用于检测网页前端、后端、CDN、SaaS、广告营销、统计、登录、支付、网站程序和主题模板线索。",`
`7`	`7`	`"scripts": {`