SEO On-Page: Được trích xuất trực tiếp từ DOM thông qua chrome.scripting (Chi phí: $0). DR / PR: Được lấy thông qua API miễn phí của OpenPageRank (Chi phí: $0). Backlinks: Được thu thập (scrape) thông qua Cloudflare Worker làm proxy nối tới các công cụ công khai miễn phí (Chi phí: $0). Technical SEO: Được lấy thông qua API miễn phí của Google PageSpeed Insights (Chi phí: $0). Lưu trữ (Hosting): Chrome Web Store (phí một lần $5) hoặc tải trực tiếp dưới dạng giải nén (unpacked) ở chế độ nhà phát triển (Chi phí: $0).
Hãy đóng vai một Chuyên gia Phát triển Tiện ích Mở rộng Chrome (Manifest V3) và Kỹ sư Backend. Tôi cần bạn viết toàn bộ mã nguồn hoàn chỉnh, sẵn sàng đưa vào vận hành thực tế (production-ready) cho một Tiện ích Mở rộng Chrome (Chrome Extension) cao cấp có tên là "ARIX Pro SEO Toolkit". CÁC QUY TẮC QUAN TRỌNG: 1. KHÔNG CÀO DỮ LIỆU (NO SCRAPING). CHỈ sử dụng các API SEO chính thức, thuộc nhóm hàng đầu. 2. Sử dụng Manifest V3, Vanilla JavaScript (JavaScript thuần), HTML và CSS. Không dùng React, không qua các bước đóng gói (build steps). 3. Để bảo vệ các khóa API (API keys), tiện ích mở rộng KHÔNG ĐƯỢC gọi trực tiếp đến các API từ cửa sổ popup. Nó phải gọi thông qua một hàm Vercel Serverless Function đơn giản, miễn phí (đóng vai trò backend proxy) do tôi tự triển khai. NGĂN XẾP CÔNG NGHỆ & NGUỒN DỮ LIỆU: 1. SEO Off-Page (DR, Lưu lượng truy cập, Backlinks): DataForSEO API (hoặc Moz API làm phương án dự phòng). 2. Technical SEO / Core Web Vitals: Google PageSpeed Insights API. CẤU TRÚC TỆP YÊU CẦU: Vui lòng cung cấp mã nguồn hoàn chỉnh cho các tệp sau: 1. `manifest.json` (Manifest V3, quyền truy cập: activeTab, storage). 2. `popup.html` (Giao diện người dùng chế độ tối hiện đại, gọn gàng với các tab dành cho Tổng quan / Overview, Off-Page và Kỹ thuật / Technical). 3. `popup.css` (Định dạng giao diện cao cấp, kiểu chữ rõ nét, hiệu ứng trạng thái đang tải). 4. `popup.js` (Bộ điều khiển chính. Tệp này sẽ lấy dữ liệu từ URL backend Vercel của tôi, chứ không gọi trực tiếp đến các API gốc). 5. `api/index.js` (Hàm Vercel Serverless function. Tệp này sẽ lưu giữ các khóa API một cách an toàn và thực hiện các yêu cầu gọi thực tế tới DataForSEO và Google PSI, sau đó trả kết quả JSON về cho tiện ích mở rộng). YÊU CẦU LOGIC CỤ THỂ: - BACKEND (api/index.js): - Tiếp nhận tham số truy vấn (query parameter) gồm `domain` và `type` (offpage hoặc technical). - Nếu `type=offpage`, sử dụng DataForSEO API (Basic Auth) để lấy Xếp hạng Tên miền (Domain Rank), Lưu lượng Truy cập Tự nhiên (Organic Traffic) và Số lượng Backlink. (Cung cấp hướng dẫn rõ ràng về cách định dạng lệnh gọi REST API của DataForSEO). - Nếu `type=technical`, gọi Google PageSpeed Insights API và trả về điểm số SEO cùng các chỉ số Core Web Vitals. - Trả về dữ liệu JSON gọn gàng cho phía frontend. - FRONTEND (popup.js): - Lấy URL của tab hiện tại đang mở. - Hiển thị khung chờ tải (loading skeleton) mượt mà trong lúc đợi phản hồi từ backend Vercel. - Hiển thị dữ liệu trong các thẻ (cards) trực quan, gọn gàng (ví dụ: "Domain Rating: 45", "Est. Traffic: 10k", "Backlinks: 5.2k"). - Tích hợp cơ chế lưu bộ nhớ đệm cục bộ cơ bản (`chrome.storage.local`) trong vòng 24 giờ để chúng ta không làm lãng phí tín dụng (credits) API nếu người dùng nhấp kiểm tra cùng một trang web hai lần. Vui lòng xuất mã nguồn cho từng tệp với nhãn tên tệp được ghi chú rõ ràng. Đảm bảo mã nguồn backend Vercel sẵn sàng để triển khai ngay trong một thư mục `api/` duy nhất.
