一个 Chrome SEO 扩展生成提示词：5 个文件完整代码，带后端代理

扮演一个资深 Chrome 扩展开发者（Manifest V3）和后端工程师。

我要你写一个完整的、生产就绪的 Chrome 扩展代码，叫 "ARIX Pro SEO Toolkit"。

关键规则：
1. 不要爬取。只用官方、顶级的 SEO API。
2. 用 Manifest V3、Vanilla JavaScript、HTML、CSS。不用 React，不用构建步骤。
3. 为了保护 API key，扩展不能直接从 popup 调 API。它必须调一个简单的、免费的 Vercel Serverless Function（后端代理），这个我来部署。

技术栈和数据源：
1. Off-Page SEO（DR、流量、外链）：DataForSEO API（或 Moz API 作为备选）。
2. Technical SEO / Core Web Vitals：Google PageSpeed Insights API。

需要的文件结构：
请提供以下文件的完整代码：
1. manifest.json（Manifest V3，权限：activeTab、storage）
2. popup.html（干净、现代的暗色 UI，有 Overview、Off-Page、Technical 三个 tab）
3. popup.css（高级样式、干净排版、加载状态）
4. popup.js（主控制器。它从我的 Vercel 后端 URL 获取数据，不直接从 API 获取）
5. api/index.js（Vercel Serverless 函数。这个文件安全持有 API key，实际请求 DataForSEO 和 Google PSI，然后返回 JSON 给扩展）

具体逻辑要求：
- 后端（api/index.js）：
  - 接受 domain 和 type（offpage 或 technical）查询参数
  - 如果 type=offpage，用 DataForSEO API（Basic Auth）获取 Domain Rank、Organic Traffic、Backlink count
  - 如果 type=technical，调 Google PageSpeed Insights API，返回 SEO 分数和 Core Web Vitals
  - 返回干净的 JSON 给前端
- 前端（popup.js）：
  - 获取当前 tab 的 URL
  - 等 Vercel 后端时显示加载骨架屏
  - 用干净的卡片展示数据（比如 "Domain Rating: 45"、"Est. Traffic: 10k"、"Backlinks: 5.2k"）
  - 加本地缓存（chrome.storage.local）24 小时，避免重复点击同一网站浪费 API 额度

请把每个文件的代码清楚标注输出。确保 Vercel 后端代码能直接部署在一个 api/ 文件夹里。