提示词中文站 prompts.chat 中文镜像
首页 全部提示词 Vibe Coding

适用于 Chrome 的全能 ARIX SEO 工具

A complete ARIX SEO Tool for Chrome

文本 @arixnetwork 1,355 字符 在 prompts.chat 查看 译文有问题？

中文译文

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

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

关键规则：

  1. 禁止爬取。只使用官方的顶级 SEO API。
  2. 使用 Manifest V3、原生 JavaScript、HTML 和 CSS。不用 React，不用构建步骤。
  3. 为保护 API 密钥，扩展绝不能直接从 popup 调用这些 API。它必须调用一个简单、免费的 Vercel Serverless Function（后端代理），该函数将由我来部署。

技术栈与数据源：

  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（简洁、现代的深色模式 UI，包含概览、站外和技术三个标签页）。
  3. popup.css（高端样式、清爽排版、加载状态）。
  4. popup.js（主控制器。它应从我的 Vercel 后端 URL 获取数据，而不是直接从这些 API 获取）。
  5. api/index.js（Vercel Serverless 函数。该文件将安全地保存 API 密钥，向 DataForSEO 和 Google PSI 发起实际请求，然后将 JSON 返回给扩展）。

具体逻辑要求：

  • 后端（api/index.js）：
    • 接受 domain 和 type（offpage 或 technical）查询参数。
    • 如果 type=offpage，使用 DataForSEO API（Basic Auth）获取域名排名（Domain Rank）、自然流量（Organic Traffic）和外链数量（Backlink count）。（请提供关于如何构造 DataForSEO REST API 调用的清晰说明）。
    • 如果 type=technical，调用 Google PageSpeed Insights API 并返回 SEO 得分和 Core Web Vitals。
    • 将干净的 JSON 返回给前端。
  • 前端（popup.js）：
    • 获取当前标签页的 URL。
    • 在等待 Vercel 后端响应期间显示精致的加载骨架屏。
    • 以简洁的卡片展示数据（例如 "Domain Rating: 45"、"Est. Traffic: 10k"、"Backlinks: 5.2k"）。
    • 包含基本的本地缓存（chrome.storage.local），缓存时长 24 小时，以免用户两次点击同一网站时浪费 API 额度。

请清晰标注每个文件并输出其代码。确保 Vercel 后端代码可直接部署在单个 api/ 文件夹中。

English original

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.

同类提示词

更多「Vibe Coding」→