support custom item

sidepanel.html

@@ -33,20 +33,27 @@
           <label class="block text-xs text-gray-500">AI 模型名称</label>
           <input type="text" id="modelInput" class="w-full mt-1 border border-gray-300 rounded px-2 py-1 text-sm focus:ring-1 focus:ring-indigo-500 outline-none" placeholder="例如：gemini-1.5-flash">
         </div>
-        <button id="saveConfig" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white text-sm py-2 rounded transition-colors">保存设置</button>
+        
+        <!-- Preset Management -->
+        <div class="pt-2 border-t border-gray-100">
+          <label class="block text-xs font-bold text-gray-600 mb-2">预设管理</label>
+          <div class="space-y-2">
+            <input type="text" id="newPresetName" class="w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none" placeholder="预设名称 (如：手机)">
+            <textarea id="newPresetFields" class="w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none h-16" placeholder="提取字段 (用逗号分隔，如：品牌, 型号, 价格)"></textarea>
+            <button id="addPreset" class="w-full bg-indigo-100 text-indigo-700 text-xs py-1.5 rounded hover:bg-indigo-200 transition-colors font-semibold">添加新预设</button>
+          </div>
+          <div id="presetList" class="mt-3 space-y-2">
+            <!-- Saved presets will appear here with delete buttons -->
+          </div>
+        </div>
+
+        <button id="saveConfig" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white text-sm py-2 rounded transition-colors">保存所有设置</button>
       </div>
     </section>
 
-    <!-- Action Buttons -->
+    <!-- Dynamic Action Buttons -->
-    <section class="grid grid-cols-2 gap-3 mb-4">
+    <section id="presetButtons" class="grid grid-cols-2 gap-3 mb-4">
-      <button id="extractLaptop" class="flex flex-col items-center justify-center p-4 bg-white border border-gray-200 rounded-lg hover:border-indigo-400 hover:bg-indigo-50 group">
+      <!-- Buttons will be injected here by JS -->
-        <span class="text-2xl mb-1 group-hover:scale-110 transition-transform">💻</span>
-        <span class="text-xs font-semibold">提取笔记本</span>
-      </button>
-      <button id="extractPeripheral" class="flex flex-col items-center justify-center p-4 bg-white border border-gray-200 rounded-lg hover:border-indigo-400 hover:bg-indigo-50 group">
-        <span class="text-2xl mb-1 group-hover:scale-110 transition-transform">⌨️</span>
-        <span class="text-xs font-semibold">提取外设</span>
-      </button>
     </section>
 
     <!-- Chat / Custom Instructions -->

sidepanel.js

@@ -3,40 +3,51 @@ const apiKeyInput = document.getElementById('apiKey');
 const scriptUrlInput = document.getElementById('scriptUrl');
 const modelInput = document.getElementById('modelInput');
 const saveConfigBtn = document.getElementById('saveConfig');
-const extractLaptopBtn = document.getElementById('extractLaptop');
-const extractPeripheralBtn = document.getElementById('extractPeripheral');
 const customInput = document.getElementById('customInput');
 const sendCustomBtn = document.getElementById('sendCustom');
 const statusBadge = document.getElementById('statusBadge');
 const resultsArea = document.getElementById('results');
 
+// Preset Management Elements
+const newPresetName = document.getElementById('newPresetName');
+const newPresetFields = document.getElementById('newPresetFields');
+const addPresetBtn = document.getElementById('addPreset');
+const presetList = document.getElementById('presetList');
+const presetButtonsContainer = document.getElementById('presetButtons');
+
 // Collapsible logic
 const toggleConfig = document.getElementById('toggleConfig');
 const configContent = document.getElementById('configContent');
 const configChevron = document.getElementById('configChevron');
 
+const DEFAULT_PRESETS = [
+  { id: 'p1', name: '提取笔记本', fields: '品牌, CPU, 内存, 存储, 价格, URL' },
+  { id: 'p2', name: '提取外设', fields: '品牌, 型号, 连接方式, 电池寿命, 价格, URL' }
+];
+
 toggleConfig.addEventListener('click', () => {
   const isHidden = configContent.classList.toggle('hidden');
   configChevron.classList.toggle('rotate-180', !isHidden);
 });
 
-// Load settings on startup
+// Load settings and presets on startup
-chrome.storage.local.get(['geminiApiKey', 'googleScriptUrl', 'geminiModel'], (data) => {
+chrome.storage.local.get(['geminiApiKey', 'googleScriptUrl', 'geminiModel', 'userPresets'], (data) => {
   if (data.geminiApiKey) {
     apiKeyInput.value = data.geminiApiKey;
-    // Fold by default if already configured
     configContent.classList.add('hidden');
     configChevron.classList.remove('rotate-180');
   } else {
-    // Expand if no API key
     configContent.classList.remove('hidden');
     configChevron.classList.add('rotate-180');
   }
   if (data.googleScriptUrl) scriptUrlInput.value = data.googleScriptUrl;
   if (data.geminiModel) modelInput.value = data.geminiModel;
+
+  const presets = data.userPresets || DEFAULT_PRESETS;
+  renderPresets(presets);
 });
 
-// Save settings
+// Save settings (including presets is handled separately via add/delete)
 saveConfigBtn.addEventListener('click', () => {
   const apiKey = apiKeyInput.value.trim();
   const scriptUrl = scriptUrlInput.value.trim();
@@ -51,12 +62,64 @@ saveConfigBtn.addEventListener('click', () => {
   });
 });
 
-// Action Handlers
+// Preset Management Logic
-extractLaptopBtn.addEventListener('click', () => handleExtraction('laptop'));
+addPresetBtn.addEventListener('click', async () => {
-extractPeripheralBtn.addEventListener('click', () => handleExtraction('peripheral'));
+  const name = newPresetName.value.trim();
-sendCustomBtn.addEventListener('click', () => handleExtraction('custom', customInput.value));
+  const fields = newPresetFields.value.trim();
+  if (!name || !fields) return alert('请输入名称和字段');
 
-async function handleExtraction(type, customText = '') {
+  const { userPresets = DEFAULT_PRESETS } = await chrome.storage.local.get('userPresets');
+  const newPreset = { id: Date.now().toString(), name, fields };
+  const updatedPresets = [...userPresets, newPreset];
+
+  await chrome.storage.local.set({ userPresets: updatedPresets });
+  newPresetName.value = '';
+  newPresetFields.value = '';
+  renderPresets(updatedPresets);
+});
+
+async function deletePreset(id) {
+  const { userPresets = DEFAULT_PRESETS } = await chrome.storage.local.get('userPresets');
+  const updatedPresets = userPresets.filter(p => p.id !== id);
+  await chrome.storage.local.set({ userPresets: updatedPresets });
+  renderPresets(updatedPresets);
+}
+
+function renderPresets(presets) {
+  // Clear containers
+  presetList.innerHTML = '';
+  presetButtonsContainer.innerHTML = '';
+
+  presets.forEach(preset => {
+    // 1. Render in Settings List
+    const item = document.createElement('div');
+    item.className = 'flex items-center justify-between bg-gray-50 p-2 rounded border border-gray-200 text-xs';
+    item.innerHTML = `
+      <div class="flex-1 overflow-hidden mr-2">
+        <div class="font-bold truncate">${preset.name}</div>
+        <div class="text-gray-500 truncate">${preset.fields}</div>
+      </div>
+      <button class="text-red-500 hover:text-red-700 font-bold p-1" data-id="${preset.id}">✕</button>
+    `;
+    item.querySelector('button').onclick = () => deletePreset(preset.id);
+    presetList.appendChild(item);
+
+    // 2. Render as Action Button
+    const btn = document.createElement('button');
+    btn.className = 'flex flex-col items-center justify-center p-4 bg-white border border-gray-200 rounded-lg hover:border-indigo-400 hover:bg-indigo-50 group transition-all';
+    btn.innerHTML = `
+      <span class="text-2xl mb-1 group-hover:scale-110 transition-transform">⚙️</span>
+      <span class="text-xs font-semibold">${preset.name}</span>
+    `;
+    btn.onclick = () => handleExtraction('preset', preset);
+    presetButtonsContainer.appendChild(btn);
+  });
+}
+
+// Action Handlers
+sendCustomBtn.addEventListener('click', () => handleExtraction('custom', { fields: customInput.value }));
+
+async function handleExtraction(type, presetObj) {
   const { geminiApiKey, googleScriptUrl, geminiModel } = await chrome.storage.local.get(['geminiApiKey', 'googleScriptUrl', 'geminiModel']);
   
   if (!geminiApiKey) {
@@ -66,10 +129,9 @@ async function handleExtraction(type, customText = '') {
 
   const selectedModel = geminiModel || 'gemini-1.5-flash';
   updateStatus('提取中...', 'bg-blue-500 text-white');
-  resultsArea.textContent = `正在使用 ${selectedModel} 读取内容...`;
+  resultsArea.textContent = `正在使用 ${selectedModel} 提取 ${presetObj.name || '自定义项'}...`;
 
   try {
-    // 1. Get current tab content
     const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
     const [{ result: pageData }] = await chrome.scripting.executeScript({
       target: { tabId: tab.id },
@@ -78,7 +140,6 @@ async function handleExtraction(type, customText = '') {
 
     resultsArea.textContent = '正在发送至 Gemini...';
     
-    // 2. Prepare Prompt
     const systemPrompt = `你是一个专业的采购助手。
 请从以下文本中提取产品数据。
 将技术术语翻译成中文。
@@ -87,25 +148,16 @@ async function handleExtraction(type, customText = '') {
 URL: ${pageData.url}
 Title: ${pageData.title}`;
 
-    let userPrompt = "";
+    const userPrompt = `提取以下字段：${presetObj.fields}。仅返回 JSON 格式。`;
-    if (type === 'laptop') {
-      userPrompt = "提取笔记本详情：品牌、CPU、内存、存储、价格、URL。仅返回 JSON。";
-    } else if (type === 'peripheral') {
-      userPrompt = "提取外设详情：品牌、型号、连接方式、电池寿命、价格、URL。仅返回 JSON。";
-    } else {
-      userPrompt = `提取以下信息：${customText}。仅返回 JSON。`;
-    }
 
-    // 3. Call Gemini API
     const geminiResult = await callGemini(geminiApiKey, selectedModel, systemPrompt, pageData.text, userPrompt);
     const cleanedJson = parseGeminiJson(geminiResult);
     
     resultsArea.textContent = JSON.stringify(cleanedJson, null, 2);
 
-    // 4. Send to Google Apps Script
     if (googleScriptUrl) {
       updateStatus('保存至表格...', 'bg-purple-500 text-white');
-      await sendToGoogleScript(googleScriptUrl, { ...cleanedJson, source_url: pageData.url, timestamp: new Date().toISOString() });
+      await sendToGoogleScript(googleScriptUrl, { ...cleanedJson, preset_type: presetObj.name || 'custom', source_url: pageData.url, timestamp: new Date().toISOString() });
       updateStatus('成功', 'bg-green-500 text-white');
     } else {
       updateStatus('完成 (未配置脚本链接)', 'bg-yellow-500 text-white');
@@ -120,7 +172,6 @@ Title: ${pageData.title}`;
 
 async function callGemini(apiKey, model, systemPrompt, contextText, userPrompt) {
   const url = `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`;
-  
   const response = await fetch(url, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -132,7 +183,6 @@ async function callGemini(apiKey, model, systemPrompt, contextText, userPrompt)
       }]
     })
   });
-
   const data = await response.json();
   if (data.error) throw new Error(data.error.message);
   return data.candidates[0].content.parts[0].text;
@@ -140,7 +190,6 @@ async function callGemini(apiKey, model, systemPrompt, contextText, userPrompt)
 
 function parseGeminiJson(text) {
   try {
-    // Remove markdown code blocks if any
     const jsonStr = text.replace(/```json/g, '').replace(/```/g, '').trim();
     return JSON.parse(jsonStr);
   } catch (e) {
@@ -149,13 +198,12 @@ function parseGeminiJson(text) {
 }
 
 async function sendToGoogleScript(url, payload) {
-  const response = await fetch(url, {
+  return await fetch(url, {
     method: 'POST',
-    mode: 'no-cors', // Apps Script often requires no-cors for simple POST
+    mode: 'no-cors',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(payload)
   });
-  return response;
 }
 
 function updateStatus(text, classes) {