61 lines
3.5 KiB
Markdown
61 lines
3.5 KiB
Markdown
# PRD: AI-Powered Hardware Sourcing Assistant (Chrome Extension)
|
|
|
|
## 1. Role & Goal
|
|
You are an expert Chrome Extension Developer and AI Integration Specialist. The goal is to build a browser extension that allows a user to extract structured electronic product data (Laptops, Mouse, Keyboards, etc.) from any e-commerce website (especially non-standard local sites in Central America) into a Google Sheet using the Gemini API for semantic analysis.
|
|
|
|
## 2. Target Workflow
|
|
1. User browses a product page (e.g., a laptop on a Honduran retail site).
|
|
2. User opens the **Chrome Side Panel**.
|
|
3. User clicks a category button (e.g., "Extract Laptop") or types a custom command.
|
|
4. The extension captures the page text -> Sends it to **Gemini API**.
|
|
5. Gemini parses the unstructured Spanish/English text into a clean JSON.
|
|
6. The JSON is sent to a **Google Apps Script Web App URL** which appends it as a new row in a Google Sheet.
|
|
|
|
## 3. Technical Stack
|
|
* **Frontend**: Manifest V3, HTML5, Tailwind CSS (via CDN), JavaScript.
|
|
* **APIs**:
|
|
* `chrome.sidePanel` (for the persistent UI).
|
|
* `chrome.scripting` (to read page content).
|
|
* **Gemini API (Google AI Studio)**: For data extraction and translation.
|
|
* **Backend**: Google Apps Script (as a lightweight proxy to Google Sheets).
|
|
|
|
## 4. Functional Requirements
|
|
|
|
### 4.1 UI Components (Side Panel)
|
|
* **API Key Input**: A secure way to save the Gemini API Key to `chrome.storage.local`.
|
|
* **Action Buttons**: Quick-action buttons for different categories:
|
|
* `[Extract Laptop]`: Target fields: Brand, CPU, RAM, Storage, Price, URL.
|
|
* `[Extract Peripheral]`: Target fields: Brand, Model, Connectivity, Battery Life, Price, URL.
|
|
* **Chat Interface**: A simple chat box to give custom instructions to the AI about the current page.
|
|
* **Status Indicator**: Loading states, Success/Error messages.
|
|
|
|
### 4.2 Data Extraction Logic (The Content Script)
|
|
* The script must extract `document.body.innerText` but filtered to remove excessive whitespace or script tags to save token costs.
|
|
* It should also capture the current `window.location.href`.
|
|
|
|
### 4.3 AI Prompt Engineering (The "Brain")
|
|
The extension must send a system prompt to Gemini:
|
|
> "Context: You are a professional shopping assistant.
|
|
> Input: Unstructured text from a retail website (might be in Spanish).
|
|
> Task: Extract [Fields] and translate technical terms to English/Chinese as requested.
|
|
> Constraint: Output ONLY valid JSON. Convert local currency (e.g., Lempira L.) to USD if possible, or keep original with symbol."
|
|
|
|
### 4.4 Data Storage (Google Sheets Integration)
|
|
* Instead of complex OAuth2, the extension will send a `POST` request to a **Google Apps Script Web App URL**.
|
|
* The Apps Script will handle `appendRow()` logic.
|
|
|
|
## 5. File Structure
|
|
* `manifest.json`: Configuration for permissions (`sidePanel`, `scripting`, `storage`, `activeTab`).
|
|
* `sidepanel.html`: The UI layout.
|
|
* `sidepanel.js`: Handling UI events, calling Gemini API, and communicating with Apps Script.
|
|
* `content.js`: Script to read the webpage text.
|
|
* `google-script.js`: The backend code to be pasted into Google Apps Script.
|
|
|
|
## 6. Security & Constraints
|
|
* **Location Context**: The user is in the US; use US-based Gemini API endpoints.
|
|
* **Privacy**: Do not send sensitive user data; only product-related text.
|
|
* **Error Handling**: Handle cases where Gemini cannot find product info (return "N/A").
|
|
|
|
## 7. Future Scalability
|
|
* Ability to capture product images (extracting `<img>` tags).
|
|
* Automatic currency conversion using a secondary FX API. |