生成 Chrome SEO 工具扩展

请扮演一名专业的 Chrome 扩展开发者（Manifest V3）和后端工程师。

我需要你为一款名为“ARIX Pro SEO Toolkit”的高级 Chrome 扩展编写完整且可用于生产环境的代码。

重要规则：
1. 禁止抓取网页。只能使用官方的一流 SEO API。
2. 使用 Manifest V3、原生 JavaScript、HTML 和 CSS。不要使用 React，也不要设置构建步骤。
3. 为保护 API 密钥，扩展不得直接从弹出窗口调用 API。它必须调用一个简单、免费的 Vercel 无服务器函数（后端代理），该函数将由我部署。

技术栈与数据来源：
1. 页外 SEO（DR、流量、反向链接）：DataForSEO API（或作为备用方案的 Moz API）。
2. 技术 SEO / Core Web Vitals：Google PageSpeed Insights API。

所需文件结构：
请提供以下文件的完整代码：
1. `manifest.json`（Manifest V3，权限：activeTab、storage）。
2. `popup.html`（简洁现代的深色模式界面，包含“概览”“页外”和“技术”标签页）。
3. `popup.css`（高级样式、简洁的排版、加载状态）。
4. `popup.js`（主控制器。它应从我的 Vercel 后端 URL 获取数据，而不是直接从 API 获取）。
5. `api/index.js`（Vercel 无服务器函数。此文件将安全地保存 API 密钥，向 DataForSEO 和 Google PSI 发出实际请求，然后将 JSON 返回给扩展）。

具体逻辑要求：
- 后端（api/index.js）：
  - 接受一个 `domain` 和 `type`（offpage 或 technical）查询参数。
  - 如果是 `type=offpage`，使用 DataForSEO API（基本身份验证）获取域名排名、自然流量和反向链接数量。（清楚说明如何设置 DataForSEO REST API 调用的格式。）
  - 如果是 `type=technical`，调用 Google PageSpeed Insights API，并返回 SEO 得分和 Core Web Vitals。
  - 向前端返回整洁的 JSON。
- 前端（popup.js）：
  - 获取当前标签页的 URL。
  - 等待 Vercel 后端响应时显示简洁的加载骨架屏。
  - 在整洁的卡片中显示数据（例如“域名评分：45”“预估流量：10k”“反向链接：5.2k”）。
  - 包含基本的本地缓存（`chrome.storage.local`），持续 24 小时，这样如果用户两次点击同一网站，就不会浪费 API 配额。

请清楚标注每个文件并输出其代码。确保 Vercel 后端代码已准备好放入一个单独的 `api/` 文件夹中进行部署。

Act as an Expert Chrome Extension Developer (Manifest V3) and Backend Engineer.

I need you to write the complete, production-ready code for a premium Chrome Extension called "ARIX Pro SEO Toolkit". 

CRITICAL RULES:
1. NO SCRAPING. Use ONLY official, top-tier SEO APIs.
2. Use Manifest V3, Vanilla JavaScript, HTML, and CSS. No React, no build steps.
3. To protect API keys, the extension must NOT call the APIs directly from the popup. It must call a simple, free Vercel Serverless Function (backend proxy) which I will deploy.

TECH STACK & DATA SOURCES:
1. Off-Page SEO (DR, Traffic, Backlinks): DataForSEO API (or Moz API as a fallback). 
2. Technical SEO / Core Web Vitals: Google PageSpeed Insights API.

FILE STRUCTURE REQUIRED:
Please provide the complete code for:
1. `manifest.json` (Manifest V3, permissions: activeTab, storage).
2. `popup.html` (Clean, modern, dark-mode UI with tabs for Overview, Off-Page, and Technical).
3. `popup.css` (Premium styling, clean typography, loading states).
4. `popup.js` (Main controller. It should fetch data from my Vercel backend URL, not directly from the APIs).
5. `api/index.js` (The Vercel Serverless function. This file will hold the API keys securely and make the actual requests to DataForSEO and Google PSI, then return the JSON to the extension).

SPECIFIC LOGIC REQUIREMENTS:
- BACKEND (api/index.js): 
  - Accept a `domain` and `type` (offpage or technical) query parameter.
  - If `type=offpage`, use the DataForSEO API (Basic Auth) to fetch Domain Rank, Organic Traffic, and Backlink count. (Provide clear instructions on how to format the DataForSEO REST API call).
  - If `type=technical`, call the Google PageSpeed Insights API and return the SEO score and Core Web Vitals.
  - Return clean JSON to the frontend.
- FRONTEND (popup.js):
  - Get the current tab's URL.
  - Show a sleek loading skeleton while waiting for the Vercel backend.
  - Display the data in clean cards (e.g., "Domain Rating: 45", "Est. Traffic: 10k", "Backlinks: 5.2k").
  - Include basic local caching (`chrome.storage.local`) for 24 hours so we don't waste API credits if the user clicks the same site twice.

Please output the code for each file clearly labeled. Ensure the Vercel backend code is ready to be deployed in a single `api/` folder.