【开发一个Chrome导出csv数据插件】

贺公子之数据科学与艺术

发布于 2025-12-17 14:35:00

1860

需求分析

开发一个Chrome插件，用于从亚马逊商品详情页提取关键信息（如标题、价格、评分、评论数等），并将数据导出为CSV文件。核心功能包括：

通过内容脚本解析页面DOM结构
提取商品数据并存储
提供交互按钮触发导出操作
生成CSV文件并下载

技术方案

插件结构
- manifest.json：定义插件配置和权限
- content.js：注入页面脚本，提取数据
- popup.html + popup.js：用户交互界面
- background.js：处理下载逻辑（可选）
数据提取 亚马逊页面结构示例：
- 商品标题：#productTitle
- 价格：span.a-price-whole
- 评分：span.a-icon-alt
- 评论数：#acrCustomerReviewText

代码实现

manifest.json

{
  "manifest_version": 3,
  "name": "Amazon Product Exporter",
  "version": "1.0",
  "permissions": ["activeTab", "downloads"],
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["https://www.amazon.com/*"],
      "js": ["content.js"]
    }
  ]
}

content.js

// 提取商品数据
function getProductData() {
  const title = document.getElementById('productTitle')?.innerText.trim() || 'N/A';
  const price = document.querySelector('span.a-price-whole')?.innerText || '0';
  const rating = document.querySelector('span.a-icon-alt')?.innerText.replace(' stars', '') || '0';
  const reviews = document.getElementById('acrCustomerReviewText')?.innerText.replace(',', '') || '0';

  return { title, price, rating, reviews };
}

// 监听来自popup的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getProductData') {
    sendResponse(getProductData());
  }
});

popup.html

<!DOCTYPE html>
<html>
  <body>
    <button id="exportBtn">Export to CSV</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

document.getElementById('exportBtn').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const response = await chrome.tabs.sendMessage(tab.id, { action: 'getProductData' });

  // 生成CSV内容
  const csvContent = `Title,Price,Rating,Reviews\n"${response.title}",${response.price},${response.rating},${response.reviews}`;

  // 触发下载
  const blob = new Blob([csvContent], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);
  chrome.downloads.download({
    url: url,
    filename: `amazon_product_${Date.now()}.csv`
  });
});