点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群

我曾想快速获取一些电商网站上的商品信息，但又不想搭建服务器或部署爬虫服务。所以我动手用 JavaScript 写了一个 Chrome 插件，一键提取网页上的数据，清洗整理后直接导出成表格。

想要快速爬数据，但不想折腾后端

事情是这样的，我经常浏览一些小众电商网站，页面里有：

  • 商品价格

  • 商品标题

  • 用户评分

这些信息我都想整理进表格里。但我又不想：

  • 配置 Puppeteer 或 Selenium

  • 写后端接口

  • 部署什么云爬虫

我只想打开网页，点个按钮，立刻拿到结构化数据。

Chrome 插件的目录结构

我首先创建了一个插件项目，结构非常简单：

web-scraper-extension/
├── manifest.json
├── content.js
├── popup.html
├── popup.js
├── styles.css

manifest.json 是插件的核心配置文件：

{
  "manifest_version": 3,
"name": "Web Scraper Pro",
"version": "1.0",
"description": "一键抓取电商页面数据",
"permissions": ["activeTab", "scripting"],
"action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
"background": {
    "service_worker": "background.js"
  },
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

这个配置确保插件可以注入脚本到任何网页中。

在当前标签页中注入爬虫逻辑

在 popup.js 里，我监听点击事件，让插件在当前页面执行爬取函数：

document.getElementById("scrape-btn").addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: scrapePageData
  });
});

这个函数 scrapePageData 是定义在 content.js 中的。

如何从页面中提取商品信息

在 content.js 中，我用原生 DOM API 获取商品卡片信息：

function scrapePageData() {
const products = document.querySelectorAll(".product-card");
const data = [];

  products.forEach((product) => {
    const title = product.querySelector(".title")?.innerText || "N/A";
    const price = product.querySelector(".price")?.innerText || "N/A";
    const rating = product.querySelector(".stars")?.innerText || "N/A";

    data.push({ title, price, rating });
  });

console.table(data);
  downloadCSV(data);
}

全部逻辑都是在用户的浏览器中执行，不发请求，不调用 API，纯前端处理。

将数据导出为 CSV 文件

我还写了一个小工具函数，把数据转成 CSV 并触发下载：

function downloadCSV(data) {
const headers = Object.keys(data[0]).join(",");
const rows = data.map(obj =>Object.values(obj).join(",")).join("\n");
const csv = `${headers}\n${rows}`;

const blob = new Blob([csv], { type: "text/csv" });
const url = URL.createObjectURL(blob);

const a = document.createElement("a");
  a.href = url;
  a.download = "products.csv";
document.body.appendChild(a);
  a.click();
document.body.removeChild(a);
}

用户点“Scrape”按钮后，就会自动下载 products.csv。

简单但好用的 UI 界面

popup.html 提供了一个基础的操作界面：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Web Scraper Pro</h1>
    <button id="scrape-btn">抓取商品</button>
    <script src="popup.js"></script>
  </body>
</html>

简洁直观，足够用了。

给界面加点样式（虽然不是必需）

body {
font-family: Arial;
width: 250px;
padding: 10px;
background: #f8f9fa;
}

button {
background: #007bff;
border: none;
color: white;
padding: 10px;
width: 100%;
cursor: pointer;
border-radius: 5px;
}

虽然不是核心功能，但样式清爽，用户体验会更好。

应对动态加载内容：MutationObserver 来了

function waitForProducts(callback) {
  const observer = new MutationObserver(() => {
    if (document.querySelectorAll(".product-card").length > 5) {
      observer.disconnect();
      callback();
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
}

现在就算是异步渲染的页面，也能可靠抓取了。

没有 CORS、IP 封锁、隐私风险

因为我们是在浏览器中操作 DOM，而不是发网络请求：

  • 不会遇到 CORS 跨域限制

  • 不会被服务器封 IP

  • 不需要代理

当然，为了安全和隐私，插件只在用户主动点击时运行，并且在 manifest.json 中明确声明了权限。

本地调试插件

测试流程：

  1. 打开 chrome://extensions

  2. 开启“开发者模式”

  3. 点击“加载已解压的扩展程序”

  4. 选择你的插件文件夹

  5. 随便打开一个商品页面，点击插件按钮测试功能

打包并发布到 Chrome 应用商店

发布流程如下：

  1. 把整个项目文件夹打包成 ZIP

  2. 登录 Chrome Web Store Developer Dashboard

  3. 支付一次性 5 美元的开发者认证费用

  4. 上传 ZIP 包，填写插件描述、上传截图

  5. 提交审核

我提交后 3 天就通过审核了。

添加 Google Analytics（可选功能）

我还加了匿名埋点统计，分析用户最常抓取哪些网页：

fetch("https://www.google-analytics.com/collect", {
  method: "POST",
  body: "v=1&t=event&tid=UA-XXXXX-Y&cid=555&ec=Scraper&ea=Click&el=Popup"
});

方便后续优化功能和提升用户体验。

一些收获和感悟

  • 构建强大的爬虫工具，其实不需要后端

  • Chrome 插件的能力被很多人低估了，搭建门槛很低

  • 用户喜欢一键式、零配置的解决方案

结语

这是我开发速度最快、上线最快的一款工具。它不需要部署，不需要服务器，完全运行在浏览器中，使用门槛极低。

如果你也想快速抓取网页数据，不妨试试 JavaScript + Chrome 扩展这个组合 —— 效率极高，体验极爽！

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞、在看” 支持一波👍
# javascript # 开发语言 # ecmascript # 前端
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

AI Agent 系统设计：从单轮对话到多步推理的架构演进

规划模块：将高层目标分解为可执行的子任务或步骤序列。这可以是简单的思维链（Chain-of-Thought），也可以是复杂的任务分解树。任务分解：将模糊的用户需求转化为明确、可执行的动作序列。路径规划：在多个可能的执行路径中选择最优或最可行的方案。动态调整：根据执行结果和环境变化实时调整计划。记忆模块：为 Agent 提供上下文和历史感知能力。短期记忆：当前对话或任务的上下文，通常以对话历史的形式

avatar AI Agent技术社区
cover

日照中小景区数字化预算有限，有没有轻量导览方案？

avatar AI Agent技术社区

AI智能外呼系统效能实测：10大品牌在真实业务场景下的数据对比与选型策略

2026年，AI智能外呼系统行业已全面进入“大模型+高并发+合规线路”三位一体的新阶段。据工信部《2026年智能语音外呼系统行业白皮书》数据显示，当前AI外呼机器人市场年复合增长率达37.6%，渗透率在金融、零售等核心行业已超过40%。中国信通院指出，2026年主流产品已全面实现ASR语音识别准确率≥98%、TTS拟人自然度MOS值≥4.2的行业标准。行业正从传统固定话术的“通知播报”模式，全面升

avatar AI Agent技术社区