Chrome 插件注入脚本（小白实战）：导出拼多多PDD个人订单

上一篇我们已经把插件跑起来了，这一篇进入真正有用的能力：注入脚本。目标是让你看懂并能复现 my-order 项目里的这条链路：

1. 右键菜单点击
2. background.js 触发注入
3. content.js 在页面里拿数据
4. 生成并下载 CSV

1. 注入脚本到底是什么？

简单说：插件把一段 JS “塞进当前网页执行”，这就叫注入脚本。

你之前写的 popup.js 只在插件弹窗里运行，碰不到网页里的 DOM 和 JS 状态。而注入脚本可以直接操作页面，所以能做这些事：

1. 改页面内容（标题、按钮、样式）
2. 读页面数据（列表、表格、接口结果）
3. 自动化动作（点击、复制、导出）

2. 本文用到的项目（my-order）

你当前项目里已经有现成实战代码：

1. my-order/manifest.json
2. my-order/background.js
3. my-order/content.js

这个插件的功能是：在拼多多订单页右键，点击“导出订单 CSV”，然后自动下载订单文件。

3. 第一步：Manifest 里声明权限

my-order/manifest.json 的关键配置：{"manifest_version": 3,"permissions": ["contextMenus", "tabs", "scripting"],"host_permissions": ["https://mobile.yangkeduo.com/*","https://mobile.pinduoduo.com/*"  ],"background": {"service_worker": "background.js"  }}

小白先记这 3 个权限：

1. contextMenus：创建右键菜单
2. scripting：把脚本注入页面
3. host_permissions：允许在哪些网站注入（白名单）

4. 第二步：在 background 里触发注入

my-order/background.js 的核心逻辑是：const MENU_ID = "pdd-export-orders-csv";chrome.runtime.onInstalled.addListener(() => createContextMenu());chrome.runtime.onStartup.addListener(() => createContextMenu());chrome.contextMenus.onClicked.addListener((info, tab) => {if (info.menuItemId !== MENU_ID || !tab?.id) return;  chrome.scripting.executeScript({target: { tabId: tab.id },files: ["content.js"],world: "MAIN"  });});

你可以把它理解成一句话：用户点右键菜单 -> background 收到事件 -> 把 content.js 注入当前标签页。

5. 第三步：content 脚本里干活（拿数据 + 导出）

content copy.js 是可读版本，流程很清晰：

1. 先定位订单容器（#base-list0）
2. 从内部节点拿到订单列表（list）
3. 整理字段（订单号、商品标题、状态、时间、金额）
4. 拼成 CSV 文本
5. 用 Blob + a.download 触发下载

示例（简化版）：const root = document.getElementById("base-list0");...省略核心代码if (!Array.isArray(list) || !list.length) {thrownewError("未找到订单数据");}

这段代码说明了注入脚本的核心价值：它能直接访问页面运行时对象，不只是读 HTML。

6. 为什么这里用 world: "MAIN"？

这是很多新手第一次会踩的坑。

默认内容脚本运行在隔离环境（Isolated World），和页面 JS 变量不是一个世界。而这个项目需要访问页面里的内部对象，所以用了：world: "MAIN"

意思是：让脚本在页面主世界执行，更容易拿到站点运行时数据。

7. 跑起来的完整步骤

1. 打开 chrome://extensions/
2. 开启“开发者模式”
3. 加载 my-order 目录

1. 打开拼多多订单页并等待列表加载
2. 页面空白处右键，点击“导出订单 CSV”
3. 浏览器开始下载 CSV

8. 常见报错和排查

1. 右键没有菜单：去扩展页刷新插件，再重开目标网页
2. 点击后没反应：看 background service worker 控制台是否报错
3. 提示未找到订单：大概率页面还没加载完，滚动一下再试
4. 注入失败：检查 host_permissions 是否覆盖当前网址

9. 小结

你现在掌握了注入脚本的实战主线：

1. manifest 配权限
2. background 触发注入
3. content 在页面里拿数据并输出结果

这就是 Chrome 插件“从 UI 到自动化”的分水岭能力。

下一篇预告

下一篇我们讲：popup 页面怎么和注入脚本通信。也就是从“右键触发”升级成“点插件按钮触发”，并支持参数配置、进度反馈、错误提示。