From 9b55bea09db172206c57faab64f9dbc94bf348e9 Mon Sep 17 00:00:00 2001 From: Julian Freeman Date: Wed, 11 Mar 2026 12:33:42 -0400 Subject: [PATCH] support custom item --- sidepanel.html | 29 ++++++++----- sidepanel.js | 112 +++++++++++++++++++++++++++++++++++-------------- 2 files changed, 98 insertions(+), 43 deletions(-) diff --git a/sidepanel.html b/sidepanel.html index 14f78ca..a46c944 100644 --- a/sidepanel.html +++ b/sidepanel.html @@ -33,20 +33,27 @@ - + + +
+ +
+ + + +
+
+ +
+
+ + - -
- - + +
+
diff --git a/sidepanel.js b/sidepanel.js index fc32b06..273fc08 100644 --- a/sidepanel.js +++ b/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 -chrome.storage.local.get(['geminiApiKey', 'googleScriptUrl', 'geminiModel'], (data) => { +// Load settings and presets on startup +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 -extractLaptopBtn.addEventListener('click', () => handleExtraction('laptop')); -extractPeripheralBtn.addEventListener('click', () => handleExtraction('peripheral')); -sendCustomBtn.addEventListener('click', () => handleExtraction('custom', customInput.value)); +// Preset Management Logic +addPresetBtn.addEventListener('click', async () => { + const name = newPresetName.value.trim(); + 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 = ` +
+
${preset.name}
+
${preset.fields}
+
+ + `; + 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 = ` + ⚙️ + ${preset.name} + `; + 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 = ""; - if (type === 'laptop') { - userPrompt = "提取笔记本详情：品牌、CPU、内存、存储、价格、URL。仅返回 JSON。"; - } else if (type === 'peripheral') { - userPrompt = "提取外设详情：品牌、型号、连接方式、电池寿命、价格、URL。仅返回 JSON。"; - } else { - userPrompt = `提取以下信息：${customText}。仅返回 JSON。`; - } + const userPrompt = `提取以下字段：${presetObj.fields}。仅返回 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) {