波仔
🧡 第十二章 实战项目1：Chrome扩展
📄 一句话概括

架构就是分工：五个零件各管一段，想清【这件事归谁管】比想清【这段代码怎么写】重要得多。

📝 本节和前面几节的关系

上一节把空壳搭起来了；这一节给空壳里的零件分好工，后面写代码才不会乱。

一、五个零件，各管一段

manifest：声明这个扩展是谁、要什么权限。 service worker：后台的事件处理，随事件唤醒，你看不见它。 content script：注入到网页里，只有它能读改页面内容。 popup：点图标弹出的小窗口。options：设置页。

二、一条完整的数据流

【一键存成 Markdown】走一遍：点图标 → popup 弹出 → 发消息。 → content script 收到、读正文 → 转成 Markdown 回传 → popup 触发下载。 关键在第三步：读网页这件事只有 content script 干得了。 popup 是独立的小窗口，它看不到页面内容——想不清这层，就会卡在【怎么拿不到数据】。

三、先定分工，再写代码

把五个零件一次讲给它听，让它按这个分工写。 零件之间的边界写清楚：谁能读网页、谁负责发消息、谁负责存文件。 这样后面调试时，你一问【这归哪个零件管】就能定位到文件。

四、架构错了会怎样

最常见的错：把该 content script 做的事写进 popup——运行起来就是找不到。 第二种：把状态存在 popup 里——popup 一关就没了，下次打开全丢。 所以架构不是写代码的副产品，它是先想清楚、再动手的那一步。

五、动手 Demo：Phase 2——五个零件，各管一段

下面把五个零件、各自负责的事、以及你什么时候能看见它排开。

TH([u"零件", u"它负责", u"谁看得到它"], [20, 36, 26])
T([u"content script", u"注入到网页里，读改页面内容", u"用户点开网页时"],
  [20, 36, 26])
T([u"popup", u"点图标弹出的小窗口", u"用户点图标时"], [20, 36, 26])

实跑输出：

--------------------------------------------------------------------
Phase 2——五个零件，各管一段
--------------------------------------------------------------------

扩展的架构不复杂，**五个零件，各管一段**：

  零件               它负责                             谁看得到它
  -----------------------------------------------------------------------
  manifest.json      声明这个扩展是谁、要什么权限       它自己
  service worker     在后台跑的事件处理，随事件唤醒     你看不见，靠日志
  content script     注入到网页里，读改页面内容         用户点开网页时
  popup              点图标弹出的小窗口                 用户点图标时
  options            设置页，配置项放这儿               用户主动打开时

**架构就是分工**——想清楚【这件事归哪个零件管】，
比想清楚【这段代码怎么写】重要得多。

拿【一键存成 Markdown】走一遍：

    ① 用户点图标 → **popup** 弹出来
    ② 用户点【保存】 → popup 发消息
    ③ **content script** 收到消息，读当前网页正文
    ④ 正文转成 Markdown，回传
    ⑤ popup 收到结果，触发下载

**注意 ③：读网页这件事只有 content script 干得了**——
popup 是独立的小窗口，**它看不到页面内容**。
想不清这一层，就会写出【popup 里怎么拿不到页面数据】这种问题。

架构就是分工——想清楚【这件事归哪个零件管】，比想清楚【代码怎么写】重要得多。 最容易踩的那条：popup 看不到页面内容，读网页的活只能交给 content script。

30 秒实验

  1. 把你项目的五个零件画成一张图，每条连线写一句【它传什么过去】。
  2. 拿你的主流程走一遍：哪一步归哪个零件管？有没有卡在 popup 拿不到数据上。

常见误区

  1. 把读网页的活写进 popup。popup 是独立小窗，看不到页面内容。
  2. 把状态存在 popup 里。popup 一关状态就没了，该放 service worker 或存储里。
自测三问（点开对答案） 1. 扩展的五个零件分别是什么？ —— manifest、service worker、content script、popup、options。 2. 为什么读网页只能由 content script 做？ —— popup 是独立的小窗口，看不到页面内容。 3. 为什么说架构就是分工？ —— 先想清【归谁管】，调试时才能一问就定位到文件。

相关笔记