feat: 技术 chip 拉 simpleicons CDN 图标,2s 超时回落首字母色块

新建 TechChip 组件,从 cdn.simpleicons.org/<slug> 异步加载技术品牌 SVG(slug 走 lowercase + `.` → dot / `+` → plus / `&` → and / 其他特殊字符删除规则);开 popup 后 2s 内 onload 拿到就直接换上图标,onerror / 超时则保留本地哈希色块 + 首字母,不阻塞展示。隐私政策补一条说明这类请求只带公开技术名 slug、不含用户浏览数据。

将版本号提升到 1.3.65。

Author: setube

PRIVACY.md

@@ -40,7 +40,9 @@ StackPrism / 栈棱镜(以下简称「本扩展」)是一款基于 Chrome / Edge
 
 - 本扩展**不会**向任何远程服务器上传您的浏览数据、识别结果、个人信息或任何其他数据
 - 没有遥测、没有广告 SDK、没有第三方分析、没有错误上报到云端
-- 扩展唯一发起的网络请求是异步抓取**您当前访问页面自身已经加载的**少量 JS 文件首段(走浏览器缓存,不增加额外网络流量),用于在本地扫描该 JS 中的版权注释和 OAuth 入口 URL —— 这是浏览器原本就已下载的内容,扩展只是再读一遍,**不**向第三方域名传输任何信息
+- 扩展只发起两类网络请求,**均不**携带您的任何身份信息或浏览数据:
+  1. 异步抓取**您当前访问页面自身已经加载的**少量 JS 文件首段(走浏览器缓存,不增加额外网络流量),用于在本地扫描该 JS 中的版权注释和 OAuth 入口 URL
+  2. 从 `cdn.simpleicons.org` 拉取技术品牌图标(请求体只包含一个公开技术名 slug,例如 react / vuedotjs / docker,不含您正在访问的页面 URL、识别结果或任何个人信息);图标如果 2 秒内未加载成功,扩展会自动回落到本地生成的首字母色块,绝不阻塞识别流程
 
 ## 第三方共享
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stackprism",
   "private": true,
-  "version": "1.3.64",
+  "version": "1.3.65",
   "type": "module",
   "description": "StackPrism 用于检测网页前端、后端、CDN、SaaS、广告营销、统计、登录、支付、网站程序和主题模板线索。",
   "scripts": {

src/ui/components/TechChip.vue

@@ -0,0 +1,158 @@
+<template>
+  <span :class="['tech-chip', chipClass]" aria-hidden="true">
+    <img v-show="iconState === 'loaded'" class="tech-chip-img" :src="iconUrl" alt="" @load="onLoad" @error="onError" />
+    <span v-show="iconState !== 'loaded'" class="tech-chip-initial">{{ initial }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+  import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+  const props = defineProps<{
+    name: string
+    large?: boolean
+  }>()
+
+  const TIMEOUT_MS = 2000
+
+  const PALETTE = [
+    'tech-chip-blue',
+    'tech-chip-emerald',
+    'tech-chip-amber',
+    'tech-chip-rose',
+    'tech-chip-violet',
+    'tech-chip-cyan',
+    'tech-chip-slate'
+  ] as const
+
+  const hashName = (name: string): number => {
+    let hash = 0
+    for (let i = 0; i < name.length; i++) {
+      hash = (hash * 31 + name.charCodeAt(i)) | 0
+    }
+    return Math.abs(hash)
+  }
+
+  const chipClass = computed(() => {
+    const cls = PALETTE[hashName(props.name) % PALETTE.length]
+    return props.large ? `${cls} tech-chip-large` : cls
+  })
+
+  const initial = computed(() => {
+    const raw = String(props.name || '').trim()
+    if (!raw) return '?'
+    if (/^[぀-ヿ㐀-鿿]/.test(raw)) return raw.charAt(0)
+    const letter = raw.replace(/^[^a-zA-Z0-9]+/, '').charAt(0)
+    return (letter || raw.charAt(0)).toUpperCase()
+  })
+
+  // 走 cdn.simpleicons.org/<slug> 拉 SVG 图标。
+  // SimpleIcons slug 规则:小写、空格/特殊字符删掉、`.` → `dot`、`+` → `plus`、`&` → `and`。
+  // 没收录的(中文名 / 站点自家脚本 / 兜底「疑似前端库」)slug 为空或 404,2s 超时回落文字色块
+  const toSlug = (raw: string): string => {
+    const baseName = raw.split('/')[0].trim()
+    return baseName
+      .toLowerCase()
+      .replace(/\./g, 'dot')
+      .replace(/\+/g, 'plus')
+      .replace(/&/g, 'and')
+      .replace(/[^a-z0-9]/g, '')
+  }
+
+  const iconUrl = computed(() => {
+    const slug = toSlug(String(props.name || ''))
+    if (!slug) return ''
+    return `https://cdn.simpleicons.org/${slug}`
+  })
+
+  const iconState = ref<'pending' | 'loaded' | 'failed'>(iconUrl.value ? 'pending' : 'failed')
+
+  let timeoutHandle: ReturnType<typeof setTimeout> | null = null
+
+  const clearTimer = () => {
+    if (timeoutHandle != null) {
+      clearTimeout(timeoutHandle)
+      timeoutHandle = null
+    }
+  }
+
+  const onLoad = () => {
+    clearTimer()
+    iconState.value = 'loaded'
+  }
+
+  const onError = () => {
+    clearTimer()
+    iconState.value = 'failed'
+  }
+
+  onMounted(() => {
+    if (iconState.value !== 'pending') return
+    timeoutHandle = setTimeout(() => {
+      timeoutHandle = null
+      if (iconState.value === 'pending') iconState.value = 'failed'
+    }, TIMEOUT_MS)
+  })
+
+  onBeforeUnmount(clearTimer)
+</script>
+
+<style lang="scss" scoped>
+  .tech-chip {
+    align-items: center;
+    background: var(--tech-chip-bg, var(--accent));
+    border-radius: 4px;
+    color: #fff;
+    display: inline-flex;
+    flex-shrink: 0;
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    font-size: 10px;
+    font-weight: 600;
+    height: 18px;
+    justify-content: center;
+    line-height: 1;
+    overflow: hidden;
+    position: relative;
+    width: 18px;
+
+    &.tech-chip-blue {
+      --tech-chip-bg: #4f7ab8;
+    }
+    &.tech-chip-emerald {
+      --tech-chip-bg: #3f8f6b;
+    }
+    &.tech-chip-amber {
+      --tech-chip-bg: #b58435;
+    }
+    &.tech-chip-rose {
+      --tech-chip-bg: #b95a6a;
+    }
+    &.tech-chip-violet {
+      --tech-chip-bg: #7a6cb5;
+    }
+    &.tech-chip-cyan {
+      --tech-chip-bg: #4a8a9b;
+    }
+    &.tech-chip-slate {
+      --tech-chip-bg: #6b7280;
+    }
+  }
+
+  .tech-chip-large {
+    border-radius: 8px;
+    font-size: 16px;
+    height: 36px;
+    width: 36px;
+  }
+
+  // favicon 拉到后,img 充满 chip 容器覆盖文字
+  .tech-chip-img {
+    height: 100%;
+    object-fit: contain;
+    width: 100%;
+  }
+
+  .tech-chip-initial {
+    position: relative;
+  }
+</style>

src/ui/popup/Popup.vue

@@ -128,7 +128,7 @@
                     :title="`查看 ${tech.name} 详情`"
                     @click="openTechDetail(tech)"
                   >
-                    <span :class="['tech-chip', techChipClass(tech)]" aria-hidden="true">{{ techInitial(tech) }}</span>
+                    <TechChip :name="tech.name" />
                     <span class="tech-row-name">{{ tech.name }}</span>
                   </button>
                 </div>
@@ -214,9 +214,7 @@
         </div>
         <div v-else-if="footerPanel === 'tech' && selectedTech" class="footer-panel-body tech-detail-body">
           <div class="tech-detail-head">
-            <span :class="['tech-chip', 'tech-chip-large', techChipClass(selectedTech)]" aria-hidden="true">
-              {{ techInitial(selectedTech) }}
-            </span>
+            <TechChip :name="selectedTech.name" large />
             <div class="tech-detail-meta">
               <span class="tech-detail-category">{{ selectedTech.category }}</span>
               <span class="tech-detail-name">{{ selectedTech.name }}</span>
@@ -316,6 +314,7 @@
   import Checkbox from '@/ui/components/Checkbox.vue'
   import Input from '@/ui/components/Input.vue'
   import RippleButton from '@/ui/components/RippleButton.vue'
+  import TechChip from '@/ui/components/TechChip.vue'
   import { categoryIndex, confidenceClass, confidenceRank } from '@/utils/category-order'
   import { applyCustomCss } from '@/utils/apply-custom-css'
   import { normalizeSettings } from '@/utils/normalize-settings'
@@ -386,41 +385,6 @@
     return ''
   })
 
-  // 技术列表条目的颜色块:基于名字哈希到一组克制的中性色,避免外部 favicon 请求泄露用户行为
-  const TECH_CHIP_PALETTE = [
-    'tech-chip-blue',
-    'tech-chip-emerald',
-    'tech-chip-amber',
-    'tech-chip-rose',
-    'tech-chip-violet',
-    'tech-chip-cyan',
-    'tech-chip-slate'
-  ] as const
-
-  const hashTechName = (name: string): number => {
-    let hash = 0
-    for (let i = 0; i < name.length; i++) {
-      hash = (hash * 31 + name.charCodeAt(i)) | 0
-    }
-    return Math.abs(hash)
-  }
-
-  const techChipClass = (tech: any) => {
-    const name = String(tech?.name || '')
-    if (!name) return TECH_CHIP_PALETTE[0]
-    return TECH_CHIP_PALETTE[hashTechName(name) % TECH_CHIP_PALETTE.length]
-  }
-
-  const techInitial = (tech: any) => {
-    const raw = String(tech?.name || '').trim()
-    if (!raw) return '?'
-    // 中文 / 日文 / 韩文取第一个字符
-    if (/^[぀-ヿ㐀-鿿]/.test(raw)) return raw.charAt(0)
-    // 跳过常见前缀(@、/),取第一个字母
-    const letter = raw.replace(/^[^a-zA-Z0-9]+/, '').charAt(0)
-    return (letter || raw.charAt(0)).toUpperCase()
-  }
-
   const openTechDetail = (tech: any) => {
     selectedTech.value = tech
     rawSourceContext.value = null
@@ -1664,52 +1628,6 @@
     white-space: nowrap;
   }
 
-  // 圆角小色块,首字母在中间。哈希到 7 个调度过的中性色,避免饱和过高
-  .tech-chip {
-    align-items: center;
-    background: var(--tech-chip-bg, var(--accent));
-    border-radius: 4px;
-    color: #fff;
-    display: inline-flex;
-    flex-shrink: 0;
-    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
-    font-size: 10px;
-    font-weight: 600;
-    height: 18px;
-    justify-content: center;
-    line-height: 1;
-    width: 18px;
-
-    &.tech-chip-blue {
-      --tech-chip-bg: #4f7ab8;
-    }
-    &.tech-chip-emerald {
-      --tech-chip-bg: #3f8f6b;
-    }
-    &.tech-chip-amber {
-      --tech-chip-bg: #b58435;
-    }
-    &.tech-chip-rose {
-      --tech-chip-bg: #b95a6a;
-    }
-    &.tech-chip-violet {
-      --tech-chip-bg: #7a6cb5;
-    }
-    &.tech-chip-cyan {
-      --tech-chip-bg: #4a8a9b;
-    }
-    &.tech-chip-slate {
-      --tech-chip-bg: #6b7280;
-    }
-  }
-
-  .tech-chip-large {
-    border-radius: 8px;
-    font-size: 16px;
-    height: 36px;
-    width: 36px;
-  }
-
   // 详情面板里仍保留的彩色置信度徽章(详情视图里信息密度低,徽章撑得开)
   .confidence {
     border-radius: 4px;