feat(core): 升级多源防盗链穿透架构、图片加载性能优化与多语言字体自适应

1. 网络与防盗链代理层升级：
   - 引入 declarativeNetRequest 动态拦截规则，为微博、Pixiv、Reddit 图片自动注入和伪装安全 Referer & Origin 头。
   - 彻底移除后台 Service Worker 中不兼容的 FileReader，改用基于 ArrayBuffer 与 Uint8Array 的原生二进制分块处理机制，解决受限域名图片代理加载崩溃问题。
   - 在后台代理 Fetch 通道中增加 50MB 安全体积截断校验，抵御超大媒体导致的 SW 内存溢出风险。

2. 提取解析算法与容错增强：
   - 优化 WeiboResolver，利用 Base36 进制解码微博图床文件名直接提取原图宽高，规避网络延迟。
   - 扩展 PixivResolver，深度适配 sci/ci 前缀小说封面原图匹配及 JPG/PNG 智能双向回退重试机制，Pixiv 站点下自动过滤无用背景 SVG。
   - 支持 Telegram 公开 CDN 原图还原，并为 Telegram 站点强制白名单开启智能 Blob 嗅探。
   - 为图片尺寸测量流程增加超时放宽（2s~3s）及高容错兜底保留机制，防止测量失败导致原图项丢失。

3. 前端 UI 渲染与性能重构：
   - 重构受限域名图片加载 Hook，采用派生状态（Derived State）同步渲染模式配合全局 Promise 级请求去重，消除多次渲染造成的屏幕闪烁与重绘。
   - Hook 内集成 Object URL 全局 Map 缓存并加入 500 个上限的容量控制（自动调用 revokeObjectURL），防止长会话隐性内存泄漏。
   - 优化虚拟列表组件复用时的卸载状态重置，规避 Ghost Images（闪现旧图）现象。

4. 国际化与工程规范：
   - 建立 AGENTS.md（项目宪法）定义多语言后备字体栈规范及开发禁止模式。
   - 在 theme.ts 中通过运行时 JS 实现 Outfit 与中日韩（CJK）字体的优雅自适应降级，消除字体交叉污染并缩减 CSS 编译体积。
   - 补全并同步 8 种语言包的 Telegram 暗号化聊天图片嗅探指引文案。
   - 补全 Vite 构建配置 manifest.json 的 web_accessible_resources 动态 Chunk 白名单通配符规则 (*.js/*.css)，防止打包分块被 Chrome 安全策略拦截。

Author: Shirolin

AGENTS.md

@@ -0,0 +1,20 @@
+# Imaget Project Constitution (宪法)
+
+## 技术栈与版本约束
+* **Core**: React 19, TypeScript
+* **UI**: Mantine v8, Shadow DOM
+* **Chrome Extension**: Manifest V3
+
+## 命名与编码规范
+* **字体变量**: 使用 `--imaget-font-family` 作为多语言自适应字体的核心 CSS 变量。
+* **多语言回退栈**:
+  * 英文/西方: `Outfit`, `system-ui`
+  * 简体中文: `PingFang SC`, `Microsoft YaHei`
+  * 繁体中文: `PingFang TC`, `Microsoft JhengHei`
+  * 日语: `Hiragino Sans`, `Meiryo`
+  * 韩语: `Apple SD Gothic Neo`, `Malgun Gothic`
+
+## 禁止模式
+* 严禁混合 DOM 抓取逻辑与 `src/ui` 组件。
+* 严禁在 Shadow DOM 内直接引用外部不可达的第三方 CSS，除非在 Sidepanel 且通过官方扩展方式。
+* 严禁对所有语言硬编码相同的静态回退字体栈，避免 CJK 汉字冲突。

public/manifest.json

@@ -16,7 +16,8 @@
     "activeTab",
     "storage",
     "contextMenus",
-    "sidePanel"
+    "sidePanel",
+    "declarativeNetRequest"
   ],
   "host_permissions": [
     "http://*/*",
@@ -51,13 +52,11 @@
   "web_accessible_resources": [
     {
       "resources": [
-        "content.js",
-        "theme.js",
-        "types.js",
-        "favicon.svg",
-        "icon-16.png",
-        "icon-48.png",
-        "icon-128.png"
+        "*.js",
+        "*.css",
+        "*.svg",
+        "*.png",
+        "*.ico"
       ],
       "matches": [
         "http://*/*",

sidepanel.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
     <title>Imaget Side Panel</title>
     <style>
       body, html { margin: 0; padding: 0; width: 100%; height: 100%; background: #242424; color: #fff; }

src/core/platform.ts

@@ -0,0 +1,8 @@
+import { WebAdapter } from "./adapters/web";
+import { ExtensionAdapter } from "./adapters/extension";
+import type { IPlatformAdapter } from "./adapters/interface";
+
+const isExtension = typeof chrome !== "undefined" && chrome.runtime?.id;
+export const platformAdapter: IPlatformAdapter = isExtension
+  ? new ExtensionAdapter()
+  : new WebAdapter();

src/core/processor.ts

@@ -100,6 +100,15 @@ export class ImageProcessor {
     ) {
       return false;
     }
+    // 微博、Pixiv 和 Reddit 具有极其严格的防盗链，且 chrome.downloads.download 在网络底层无法被拦截修改 Referer/Origin，
+    // 因此必须强制走 background.js 的 Blob 代理抓取模式，才能下载到真正的原图而非 403 报错 htm 网页！
+    const isProtectedDomain =
+      img.url.includes("sinaimg.cn") ||
+      img.url.includes("pximg.net") ||
+      img.url.includes("redd.it");
+    if (isProtectedDomain) {
+      return false;
+    }
     return true;
   }
 

src/core/resolvers/pixiv.ts

@@ -4,13 +4,29 @@ export class PixivResolver implements IUrlResolver {
   readonly name = "Pixiv";
 
   matches(url: string): boolean {
-    return url.includes("i.pximg.net") && url.includes("/c/");
+    return url.includes("i.pximg.net");
   }
 
   resolve(url: string): string {
-    return url
-      .replace(/\/c\/[^/]+/, "")
-      .replace(/\/img-master\//, "/img-original/")
-      .replace(/_master\d+/, "");
+    const isNovelCover = /\/(sci|ci)\d+_[a-zA-Z0-9]+/.test(url);
+
+    // 1. 小说封面等带有 sci/ci 前缀的图片原图存放在 /novel-cover-original/ 目录下，其他常规图片存放在 /img-original/ 目录下
+    const originalDir = isNovelCover ? "/novel-cover-original/" : "/img-original/";
+
+    let resolved = url
+      .replace(/\/c\/[^/]+\/[^/]+/, "") // 匹配双层缩略路径
+      .replace(/\/c\/[^/]+/, "")        // 匹配单层缩略路径
+      .replace(/\/(img-master|custom-thumb)\//, originalDir)
+      .replace(/i\.pximg\.net\/img\/(\d{4})\//, `i.pximg.net${originalDir}img/$1/`); // 适配小说/插画封面路径，锚定域名防递归
+
+    // 2. 剥离文件名中的尺寸后缀，如 _p0_master1200, _p0_custom1200, _p0_square1200, _master1200
+    resolved = resolved.replace(/_(master|custom|square)\d+/, "");
+
+    // 3. 特殊处理：如果是小说封面或企划插图(sci/ci)，由于原图大部分为无损 png，如果是 jpg，我们这里直接先转为 .png 提升一次性加载成功率
+    if (isNovelCover && resolved.endsWith(".jpg")) {
+      resolved = resolved.replace(/\.jpg$/, ".png");
+    }
+
+    return resolved;
   }
 }

src/core/resolvers/telegram.ts

@@ -4,7 +4,12 @@ export class TelegramResolver implements IUrlResolver {
   readonly name = "Telegram";
 
   matches(url: string): boolean {
-    return url.includes("cdn-telegram.org") || url.includes("t.me/s/");
+    return (
+      url.includes("cdn-telegram.org") ||
+      url.includes("t.me/s/") ||
+      url.includes("telesco.pe") ||
+      url.includes("telegram-cdn.org")
+    );
   }
 
   resolve(url: string): string {

src/core/resolvers/weibo.ts

@@ -4,10 +4,34 @@ export class WeiboResolver implements IUrlResolver {
   readonly name = "Weibo";
 
   matches(url: string): boolean {
-    return url.includes("weibo.com") || url.includes("sinaimg.cn");
+    return url.includes("sinaimg.cn");
   }
 
   resolve(url: string): string {
-    return url.replace(/\/(mw\d+|thumbnail|orj\d+|square)\//, "/large/");
+    const resolved = url.replace(
+      /\/(mw\d+|thumbnail|orj\d+|square|bmiddle|woriginal|small|thumb\d+|wap\d+|crop\.\d+\.\d+\.\d+\.\d+\.\d+)\//,
+      "/large/"
+    );
+    return resolved.split("?")[0];
+  }
+
+  static parseDimensions(url: string): { width: number; height: number } | null {
+    try {
+      const match = url.match(/\/([a-zA-Z0-9]{8,22})(ly1|gy1|gy3|ly3|my1|j6|j2|j3|j|g|mw\d+|orj\d+)?([a-zA-Z0-9]{3})([a-zA-Z0-9]{3})([a-zA-Z0-9]{2,4})\.(jpg|jpeg|png|webp|gif)$/i);
+      if (!match) return null;
+
+      const widthStr = match[3];
+      const heightStr = match[4];
+
+      const width = parseInt(widthStr, 36);
+      const height = parseInt(heightStr, 36);
+
+      if (width > 16 && height > 16 && width < 10000 && height < 10000) {
+        return { width, height };
+      }
+    } catch {
+      // ignore
+    }
+    return null;
   }
 }

src/core/sniffer.ts

@@ -2,6 +2,7 @@ import { type ImageItem, type ImageFormat } from "../types";
 import { UrlResolver } from "./utils/url-resolver";
 import { ImageTypeDetector } from "./utils/image-type-detector";
 import { runConcurrent } from "./utils/concurrency";
+import { WeiboResolver } from "./resolvers/weibo";
 import {
   isDomainDisabled,
   type SnifferSettings,
@@ -25,8 +26,8 @@ import {
 } from "../ui/utils/sniffer-events";
 
 const METADATA_CONCURRENCY = 12;
-const IMAGE_METADATA_TIMEOUT_MS = 1500;
-const FETCH_METADATA_TIMEOUT_MS = 1000;
+const IMAGE_METADATA_TIMEOUT_MS = 3000;
+const FETCH_METADATA_TIMEOUT_MS = 2000;
 
 /** 为字符串生成稳定的数字哈希（不依赖索引位置） */
 function stableHash(str: string): string {
@@ -545,7 +546,7 @@ export class Sniffer {
                 action: "SNIFF_REQUEST",
                 payload: { settings, requestId: options?.requestId },
               },
-              (response) => {
+              async (response) => {
                 if (chrome.runtime.lastError || !response) {
                   const errMsg = chrome.runtime.lastError?.message || "";
                   if (!errMsg.includes("Receiving end does not exist")) {
@@ -556,7 +557,28 @@ export class Sniffer {
                   }
                   resolve([]);
                 } else {
-                  resolve(response.results || []);
+                  const results: ImageItem[] = response.results || [];
+                  const updatedResults = [...results];
+                  
+                  // 在侧边栏环境重新获取防盗链域名的真实宽高（DNR 规则已生效，可正常加载）
+                  await runConcurrent(updatedResults, METADATA_CONCURRENCY, async (item, index) => {
+                    const needUpdate =
+                      item.url.includes("sinaimg.cn") ||
+                      item.url.includes("weibo.com");
+                    if (needUpdate) {
+                      const meta = await this.getImageMetadata(item.url);
+                      if (meta) {
+                        updatedResults[index] = {
+                          ...item,
+                          width: meta.width,
+                          height: meta.height,
+                          sizeKB: meta.sizeKB > 0 ? meta.sizeKB : item.sizeKB,
+                        };
+                      }
+                    }
+                  });
+                  
+                  resolve(updatedResults);
                 }
               },
             );
@@ -588,13 +610,15 @@ export class Sniffer {
       settings?.interfaceBehavior?.searchAllFrames ?? true;
     const identifyBackground =
       settings?.interfaceBehavior?.identifyBackgroundImages ?? true;
+    const isTelegramHost = window.location.host.includes("telegram");
     const identifyBlob =
-      settings?.interfaceBehavior?.identifyBlobImages ?? false;
+      (settings?.interfaceBehavior?.identifyBlobImages ?? false) || isTelegramHost;
 
+    const isPixiv = window.location.href.includes("pixiv.net");
     const [treeUrls, perfUrls, svgUrls] = await Promise.all([
       this.sniffNodeTree(document, searchAllFrames, identifyBackground),
       Promise.resolve(this.sniffPerformance()),
-      Promise.resolve(this.sniffSVGElements()),
+      Promise.resolve(isPixiv ? [] : this.sniffSVGElements()),
     ]);
     [...treeUrls, ...perfUrls, ...svgUrls].forEach((url) => {
       if (
@@ -603,7 +627,16 @@ export class Sniffer {
           url.startsWith("data:") ||
           (identifyBlob && url.startsWith("blob:")))
       ) {
-        urls.add(url);
+        const resolved = UrlResolver.transformSiteSpecificUrl(url);
+        // 过滤掉 weibo.com 的网页链接（如 /u/false 或 /status/ 等非真实图片）
+        if (resolved.includes("weibo.com") && !resolved.match(/\.(jpg|jpeg|png|gif|webp|svg)/i)) {
+          return;
+        }
+        // 如果在 Pixiv 网站，过滤掉所有的 SVG 资源，防止 UI 背景渐变/图标等乱入
+        if (isPixiv && (resolved.includes("image/svg+xml") || resolved.toLowerCase().includes(".svg"))) {
+          return;
+        }
+        urls.add(resolved);
       }
     });
 
@@ -624,17 +657,32 @@ export class Sniffer {
 
     const items: ImageItem[] = [];
     metadataResults.forEach((metadata, index) => {
+      const url = urlArray[index];
+      // 优先复用已有 ID，否则生成新的稳定哈希
+      const id = existingIdMap.get(url) ?? stableHash(url);
+
       if (metadata) {
-        const url = urlArray[index];
-        // 优先复用已有 ID，否则生成新的稳定哈希
-        const id = existingIdMap.get(url) ?? stableHash(url);
         items.push({
           ...metadata,
           id,
           isSelected: false,
           pageTitle: document.title,
           pageUrl: window.location.href,
         });
+      } else {
+        // 兜底保留：如果测量超时或失败，不直接丢弃图片，而是生成兜底的 ImageItem！
+        items.push({
+          url,
+          width: 0,
+          height: 0,
+          sizeKB: 0,
+          format: ImageTypeDetector.getFormatFromUrl(url),
+          filename: url.split("/").pop()?.split(/[?#]/)[0] || "image",
+          id,
+          isSelected: false,
+          pageTitle: document.title,
+          pageUrl: window.location.href,
+        });
       }
     });
 
@@ -658,6 +706,18 @@ export class Sniffer {
   private async getImageMetadata(
     url: string,
   ): Promise<Omit<ImageItem, "id" | "isSelected"> | null> {
+    const weiboSize = WeiboResolver.parseDimensions(url);
+    if (weiboSize) {
+      return {
+        url,
+        width: weiboSize.width,
+        height: weiboSize.height,
+        sizeKB: 0,
+        format: ImageTypeDetector.getFormatFromUrl(url),
+        filename: url.split("/").pop()?.split(/[?#]/)[0] || "image",
+      };
+    }
+
     try {
       const dimensions = await new Promise<{ width: number; height: number }>(
         (resolve, reject) => {
@@ -695,7 +755,42 @@ export class Sniffer {
               new Error(`Failed to load image: ${String(url).slice(0, 100)}`),
             );
           };
-          img.src = url;
+          // 仅侧边栏页面（chrome-extension:// 协议）才需要走后台 Blob 代理。
+          // Content script 运行在目标页上下文，可直接加载且受 DNR 规则保护，无需代理。
+          // 对于本地内存中的 blob: 图片，后台 Service Worker 无法跨越沙盒拉取，直接不走代理。
+          const isSidePanelPage =
+            typeof window !== "undefined" &&
+            window.location.protocol === "chrome-extension:" &&
+            typeof chrome !== "undefined" &&
+            !!chrome.runtime?.sendMessage;
+
+          const isBlobUrl = url.startsWith("blob:");
+
+          if (isSidePanelPage && !isBlobUrl) {
+            // 根据域名传入对应的防盗链 Referer，Service Worker fetch 不受 DNR 规则覆盖
+            let referer: string | undefined;
+            if (url.includes("sinaimg.cn") || url.includes("weibo.com")) {
+              referer = "https://weibo.com/";
+            } else if (url.includes("pximg.net")) {
+              referer = "https://www.pixiv.net/";
+            }
+            chrome.runtime.sendMessage(
+              {
+                type: "FETCH_BLOB",
+                payload: { url, referer },
+              },
+              (response) => {
+                if (response?.success && response.arrayBuffer) {
+                  const mimeType = response.mimeType || "image/jpeg";
+                  img.src = `data:${mimeType};base64,${response.arrayBuffer}`;
+                } else {
+                  img.src = url;
+                }
+              },
+            );
+          } else {
+            img.src = url;
+          }
         },
       );