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

扩展的身子骨就那么几个文件：一个 manifest 加几个脚本；初始化只求能加载进浏览器，权限一项一项加。

📝 本节和前面几节的关系

上一节把要做什么写成一页纸；这一节把它变成一个能装进浏览器的空壳。

一、身子骨就这么大

manifest.json：唯一的必填文件，扩展的身份证。 popup.html / popup.js：点图标弹出的小窗与它的逻辑。 content.js：注入到网页里跑的脚本。 icons/：图标，通常备 16 / 48 / 128 三种尺寸。

二、manifest 的最小骨架

演示里那份骨架就够启动了：版本、名字、版本号、弹窗、权限。 具体字段以官方文档为准——工具迭代快，字段会变。 所以这里要养成的习惯是：不确定的字段问它，然后自己去官方文档核对一遍。

三、两条初始化纪律

一、先只写最少字段——能加载进浏览器就算过。 二、权限一项一项加——每加一项都问【现在真的需要吗】。 第二条像小事，其实是需求纪律：权限只要必需的，用户才敢装。

四、让它来做初始化

把一页纸需求＋【先做能加载的空壳】这条要求一起交给它。 验收标准写清楚：能在扩展管理页里加载、点图标能弹出一个空窗口。 先跑通这一步，后面每加一个功能都有一个稳定的地基。

五、动手 Demo：Phase 1——项目初始化

下面给一个扩展的目录树，和一份最小可用的 manifest 骨架。

P("    my-extension/")
P("      manifest.json     <- 唯一的必填文件")
P("      popup.html        <- 点图标弹出来的那个小窗")
P("      content.js        <- 注入到网页里跑的脚本")

实跑输出：

--------------------------------------------------------------------
Phase 1——项目初始化
--------------------------------------------------------------------

一个 Chrome 扩展的身子骨，就这么大：

    my-extension/
      manifest.json     ← 唯一的必填文件，扩展的身份证
      popup.html        ← 点图标弹出来的那个小窗
      popup.js          ← 小窗里的逻辑
      content.js        ← 注入到网页里跑的脚本
      icons/            ← 图标（16 / 48 / 128 三种尺寸）

`manifest.json` 的最小骨架长这样（**字段以官方文档为准**）：

    {
      "manifest_version": 3,
      "name": "网页存 Markdown",
      "version": "0.1.0",
      "action": { "default_popup": "popup.html" },
      "permissions": ["activeTab", "scripting"]
    }

**初始化阶段的两条纪律**：

    ① 先只写最少字段，能加载进浏览器就算过
    ② 权限一项一项加——**每加一项，都问一句【现在真的需要吗】**

第二条尤其重要：**权限是给用户看的**，也是给自己省的——
只要必需的，出问题时排查范围也小。

初始化只求能加载：manifest 加几个空文件，能在浏览器里装载就算过。 权限一项一项加——每加一项都问【现在真的需要吗】；权限越多，用户越不敢装。

30 秒实验

  1. 照抄那份最小骨架，先不做任何功能，只求能加载进浏览器。
  2. 看一眼权限那一行：每一项你都能说出它为什么必须存在吗？说不出就删掉。

常见误区

  1. 一上来就把所有功能都规划成文件。先空壳，再填功能。
  2. 顺手把能想到的权限全加上。权限要一项一项加，加的时候问一句真的需要吗。
自测三问（点开对答案） 1. 扩展最少需要哪几个文件？ —— 一个 manifest.json，加上真正用到的脚本与图标。 2. 初始化阶段的两条纪律是什么？ —— 先只写最少字段；权限一项一项加。 3. 初始化的验收标准是什么？ —— 能加载进浏览器，点图标能弹出一个空窗口。

相关笔记