基于 Microsoft Edge Extension 的本地生活数据采集与处理 Demo
本文记录一个基于 Microsoft Edge Extension 开发的本地生活数据采集与处理 Demo。项目以大众点评和美团页面为应用场景，重点讨论浏览器扩展架构、页面数据解析、字段标准化、数据质量控制以及 JSON/CSV 导出流程。
当前项目仍处于个人开发和验证阶段，暂未开源。本文不会公开完整源代码、平台接口、内部配置、请求参数或可直接复现的批量采集流程。
1. 项目背景与定位
大众点评和美团等本地生活平台包含大量与城市消费和商业活动相关的信息，如商户名称、类别、评分、评论数量、人均消费、商圈、优惠活动、团购套餐、营业状态和地址位置等。这些信息适合用于商业分析、城市研究、空间分析和数据可视化。
然而，平台页面主要服务于普通用户浏览，而非提供可直接分析的结构化数据。人工整理效率低下且容易出错，因此我开发了一个基于 Microsoft Edge Extension 的本地生活数据辅助工具，将页面展示信息转换为结构化记录。
项目暂定名称为 Local Business Data Assistant（本地生活数据辅助工具），使用大众点评和美团作为应用场景，但设计上不限于特定平台。从工程角度看，它主要解决以下问题：
- 如何在浏览器扩展中读取当前页面信息；
- 如何将不同页面结构转换为统一字段；
- 如何设计商户、商品和团购的数据模型；
- 如何处理缺失值、重复值和异常值；
- 如何将数据导出为分析友好的格式；
- 如何为后续数据库、统计分析和 GIS 应用保留扩展空间。
项目更接近一个小型的数据采集与处理系统：Browser Extension + Data Parsing + Schema Normalization + Quality Control + Data Export。
为什么选择浏览器扩展
相比手工复制、Python 脚本、浏览器自动化或官方开放平台，选择 Edge Extension 的主要原因：
- 接近真实浏览环境：扩展运行在浏览器中，可直接处理当前页面已加载和展示的内容，适合开发交互式数据辅助工具。
- 用户可控的采集过程：扩展不是持续运行的后台程序，用户可以明确决定何时开始解析、处理哪个页面、是否保存数据、导出哪些字段以及何时清空记录。
- 便于构建图形界面：通过 Extension Popup 可设计简单操作界面，相比命令行脚本更适合 Demo 展示和非技术用户操作。
2. 技术栈
当前项目涉及的主要技术包括：
|----------------------|------------|
| 技术 | 用途 |
| Microsoft Edge | 插件运行环境 |
| Manifest V3 | 浏览器扩展规范 |
| JavaScript | 页面解析和业务逻辑 |
| HTML | Popup 页面结构 |
| CSS | 插件界面样式 |
| Chrome Extension API | 页面通信、存储与下载 |
| JSON | 保存半结构化数据 |
| CSV | 用于表格和统计分析 |
| Python | 后续数据清洗与分析 |
| pandas | 表格处理 |
| GeoPandas | 可选的空间分析扩展 |
Edge 和 Chrome 使用相近的 Chromium Extension 体系，因此大部分基于 Manifest V3 的扩展结构可以在两者之间迁移。
3. 系统架构
项目采用模块化设计，将页面交互、字段解析、数据处理和文件导出分开。
┌───────────────────┐
│ User │
└─────────┬─────────┘
│
▼
┌───────────────────┐
│ Extension Popup │
└─────────┬─────────┘
│
▼
┌──────────────────┐ ┌───────────────────┐
│ Background Worker│◀──▶│ Message Manager │
└─────────┬────────┘ └─────────┬─────────┘
│ │
│ ▼
│ ┌───────────────────┐
│ │ Content Script │
│ └─────────┬─────────┘
│ │
│ ▼
│ ┌───────────────────┐
│ │ Platform Adapter │
│ ├───────────────────┤
│ │ Dianping Parser │
│ │ Meituan Parser │
│ └─────────┬─────────┘
│ │
▼ ▼
┌──────────────────┐ ┌───────────────────┐
│ Local Storage │◀───│ Data Normalizer │
└─────────┬────────┘ └─────────┬─────────┘
│ │
└───────────┬───────────┘
▼
┌───────────────────┐
│ Quality Validator │
└─────────┬─────────┘
│
▼
┌───────────────────┐
│ JSON / CSV Export │
└───────────────────┘系统可以划分为五个层次：
1. Interface Layer
2. Extraction Layer
3. Processing Layer
4. Storage Layer
5. Export Layer4. 项目目录设计
为了避免所有代码堆积在同一个文件中，项目采用分层目录。
local-business-data-assistant/
│
├── manifest.json
│
├── popup/
│ ├── popup.html
│ ├── popup.css
│ └── popup.js
│
├── content/
│ ├── content.js
│ └── page-detector.js
│
├── adapters/
│ ├── dianping-adapter.js
│ └── meituan-adapter.js
│
├── parsers/
│ ├── shop-parser.js
│ ├── product-parser.js
│ └── deal-parser.js
│
├── core/
│ ├── normalizer.js
│ ├── validator.js
│ ├── deduplicator.js
│ └── message-manager.js
│
├── storage/
│ ├── local-storage.js
│ ├── json-exporter.js
│ └── csv-exporter.js
│
├── assets/
│ └── icons/
│
└── README.md各模块的主要职责如下：
|----------------|--------------|
| 模块 | 主要职责 |
| popup | 提供操作界面 |
| content | 与当前页面交互 |
| adapters | 适配不同平台 |
| parsers | 提取商户、商品和团购数据 |
| normalizer | 统一数据格式 |
| validator | 检查数据质量 |
| deduplicator | 处理重复记录 |
| storage | 临时存储与文件导出 |
5. Manifest V3 配置
浏览器扩展的入口是 manifest.json。
下面是一个经过简化的结构示例：
{
"manifest_version": 3,
"name": "Local Business Data Assistant",
"version": "0.1.0",
"description": "A browser-based assistant for organizing visible local business information.",
"permissions": [
"activeTab",
"storage",
"downloads",
"scripting"
],
"action": {
"default_popup": "popup/popup.html"
},
"background": {
"service_worker": "background/service-worker.js"
}
}其中：
activeTab：允许扩展在用户当前激活的页面中执行操作；storage：用于保存临时数据和用户设置；downloads：用于导出 JSON 或 CSV；scripting：用于控制脚本注入；service_worker：处理后台消息和任务调度。
正式项目应遵循最小权限原则，只申请真正需要的权限。
6. 页面识别与平台适配
大众点评和美团的页面结构并不完全相同。
即使它们都展示商户信息，字段位置和页面类型也可能存在明显差异。
例如：
大众点评
├── 搜索结果页
├── 商户列表页
├── 商户详情页
└── 团购展示页
美团
├── 商户列表页
├── 商品分类页
├── 商品详情页
└── 优惠活动页如果直接在同一个解析函数中处理所有页面，代码会逐渐变成大量条件判断：
if (platform === "dianping") {
// ...
} else if (platform === "meituan") {