☰

CDN & Server Info Displayer Enhanced (TEST 1: URL/Domain Check)

DEBUG: Only checks URL and Domain filters.

当前为 2025-06-11 提交的版本，查看 最新版本。

作者
抛物线
评分
0 0 0
版本
2025.06.11.21
创建于
2025-06-10
更新于
2025-06-11
大小
11.7 KB
许可证
MIT
适用于
所有网站

CDN & Server Info Displayer Enhanced (增强版CDN及服务器信息显示)

这是一个功能强大的 Tampermonkey (油猴) 脚本，旨在为浏览器增加一个悬浮信息面板，用以实时显示当前网站所使用的 CDN (内容分发网络) 服务商、缓存状态、服务器信息以及 POP (接入点) 位置。通过精准的检测规则和现代化的界面设计，它能帮助开发者、网络工程师和技术爱好者快速洞察网站的底层技术架构。

核心功能

  • 智能 CDN 检测: 内置了针对全球主流 CDN 服务商（如 Cloudflare, AWS CloudFront, 阿里云, 腾讯云, Akamai, Fastly, Vercel 等）的精确检测规则。
  • 多维度信息展示: 清晰地展示 CDN 提供商、缓存状态 (HIT/MISS)、POP 节点位置和额外技术详情。
  • 优雅的悬浮面板:
    • 现代、美观且带有毛玻璃效果的 UI 设计。
    • 可自由拖拽: 面板位置可以随意拖动，不会遮挡重要内容。
    • 动态高亮: HIT (命中) 和 MISS (未命中) 状态会以不同的颜色（绿/红）高亮显示，一目了然。
    • 悬停交互: 鼠标悬停时面板会轻微放大并提高透明度，方便查看。
    • 一键关闭: 悬停时右上角会出现关闭按钮，可临时隐藏面板。
  • 后备服务器信息: 当无法识别特定 CDN 时，脚本会尝试解析并显示 Server、X-Cache 等通用头部信息，提供基础的服务器详情。
  • 优先级检测机制: 当一个网站可能混合使用多种 CDN 服务时，脚本会根据预设的优先级，显示最关键的服务商信息。
  • 轻量与高效: 使用 HEAD 请求来获取响应头，最大程度减少网络开销。脚本在文档加载完毕后 (document-end) 执行，不影响页面渲染速度。
  • CORS 错误处理: 在因跨域策略 (CORS) 限制而无法获取响应头时，脚本会优雅地降级，并显示提示信息。

工作原理

该脚本通过以下几种方式来识别网站背后的技术栈：

  1. HTTP 响应头分析: 脚本会向当前页面 URL 发送一个 HEAD 请求，并分析返回的 HTTP 响应头。
  2. 特征匹配:
    • 特定头部字段: 检查是否存在特定 CDN 服务商独有的响应头，例如 Cloudflare 的 cf-ray 或 Vercel 的 x-vercel-id。
    • Server 头部: 检查 Server 响应头中是否包含服务商的标识，例如 cloudflare, litespeed 或 gws (Google Web Server)。
    • 自定义检查: 对于某些需要复杂逻辑判断的服务商（如 MaxCDN），会执行特定的检查函数。
  3. 信息提取与格式化: 一旦匹配成功，脚本会调用对应服务商的 getInfo 函数，从响应头中提取关键信息（如 POP 位置、缓存状态等），并将其格式化后进行显示。
  4. 动态生成面板: 最后，脚本使用 GM_addStyle 注入样式，并动态创建一个可拖拽的 <div> 元素来承载和展示这些信息。

安装步骤

  1. 安装脚本管理器: 您需要在浏览器中安装一个用户脚本管理器。最常用的是 Tampermonkey。

  2. 安装本脚本:

    • 访问脚本的发布页面（例如 Greasy Fork镜像 或 GitHub）。
    • 点击页面上的“安装此脚本”或 "Install this script" 按钮。
    • Tampermonkey 会自动被唤起，并显示脚本的源代码和信息。
    • 确认无误后，点击“安装”按钮即可。

使用说明

  • 自动显示: 安装完成后，刷新或打开任意网页，脚本会自动在页面右下角显示 CDN 信息面板。
  • 查看信息:
    • CDN/Server: 显示检测到的服务商名称。
    • Cache: 显示缓存状态。通常为 HIT (表示资源从 CDN 缓存中直接返回) 或 MISS (表示 CDN 需要回源站获取资源)。其他可能的值包括 BYPASS, EXPIRED, DYNAMIC 等。
    • POP: Point of Presence，表示为您提供服务的 CDN 节点位置或代号。
    • 附加信息: 部分 CDN 会提供额外信息，如请求 ID、内容压缩状态等，会显示在面板底部。
  • 拖动面板: 按住面板的任意位置 (关闭按钮除外)，然后拖动鼠标即可将其移动到屏幕的任何地方。松开鼠标后，面板将固定在新位置。
  • 关闭面板: 将鼠标悬停在面板上，右上角会出现一个红色的 "×" 按钮。点击即可关闭当前页面的信息面板 (刷新后会再次出现)。

自定义配置

您可以直接编辑脚本代码，对面板的外观和行为进行个性化设置。找到代码头部的 config 对象即可修改：

// --- 配置项 ---
const config = {
    // 面板初始位置 (CSS格式)
    initialPosition: { bottom: '15px', right: '15px' }, 

    // 面板背景色 (支持 RGBA)
    panelBgColor: 'rgba(44, 62, 80, 0.95)',

    // 面板文字颜色
    panelTextColor: '#ffffff',

    // 边框颜色
    borderColor: '#3498db',

    // 面板默认不透明度 (0到1)
    opacity: '0.9',

    // 是否显示详细信息 (此选项当前未在逻辑中使用，为未来扩展保留)
    showDetailed: true,

    // 动画过渡时间
    animationDuration: '0.3s' 
};

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址