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

装进浏览器只要四步，然后按六项清单过一遍；最容易漏的两项是【换个网页还能跑】和【别人能装】。

📝 本节和前面几节的关系

上一节讲代码不生效时怎么办；这一节讲怎么把它装进去、并且确认它真的能用。

一、四步装进浏览器

一、打开扩展管理页（地址栏输 chrome://extensions）。 二、右上角打开【开发者模式】。 三、点【加载已解压的扩展程序】，选你的项目文件夹。 四、去一个真网页上，点图标试一次——不是在你的代码里试。

二、六项检查清单

能装上、图标可见、主流程能跑。 换个网页还能跑、改了能生效、别人能装。 六项都不难，难的是每次都老实过一遍。

三、最容易漏的两项

【换个网页还能跑】——你只在同一个网站试过，等于没试。 【别人能装】——你电脑上能跑，不等于别人电脑上能跑（路径、权限、版本都可能不同）。 这两项都是把自己当外人再测一遍——第 12.9 节那句【三天后的你也算别人】说的就是同一件事。

四、给别人装的两种方式

打包文件夹：直接把项目目录压给同事，他按四步加载。 发布到商店：需要开发者账号、图标、说明和隐私政策。 先打包给同事装一遍——如果连这一步都出问题，上架只会更难。

五、动手 Demo：Phase 5——安装和测试

下面给安装四步与六项检查清单。

TH([u"检查项", u"通过标准"], [30, 48])
T([u"换个网页还能跑", u"至少换两个网站，不崩"], [30, 48])
T([u"别人能装", u"把文件夹打包发出去，同事装得上"], [30, 48])

实跑输出：

--------------------------------------------------------------------
Phase 5——安装和测试
--------------------------------------------------------------------

装进浏览器只要四步，然后**按清单过一遍**：

    ① 打开扩展管理页（地址栏输 chrome://extensions）
    ② 右上角打开【开发者模式】
    ③ 点【加载已解压的扩展程序】，选你的项目文件夹
    ④ 去一个真网页上，点图标试一次

  检查项             通过标准
  --------------------------------------------------
  能装上             扩展页里出现它，没有红色报错
  图标可见           工具栏上能看到它的图标
  主流程能跑         在真网页上点一次，结果正确
  换个网页还能跑     至少换两个网站，不崩
  改了能生效         重新加载后，新代码确实起效
  别人能装           把文件夹打包发出去，同事装得上

**最后两项最容易被跳过，也最容易出问题**：

    【换个网页还能跑】——你只在同一个网站试过，等于没试
    【别人能装】——你自己电脑上能跑，不等于别人电脑上能跑

六项清单里最容易漏的是最后两项：换个网页还能跑、别人能装。 两项都是把自己当外人再测一遍——只在同一个网站试，等于没试。

30 秒实验

  1. 装完换两个完全不同的网站各点一次，看会不会崩。
  2. 把文件夹打包发给一个同事，让他自己装一遍——看会不会卡在路径或权限上。

常见误区

  1. 只在自己的测试页上试过就算完。换个网页，问题才露出来。
  2. 直接跳到发布上架。先打包给同事装一遍，过不了这一关，上架只会更难。
自测三问（点开对答案） 1. 装进浏览器的四步是什么？ —— 打开扩展管理页、开开发者模式、加载已解压的扩展、去真网页上试。 2. 最容易漏的两项检查是什么？ —— 换个网页还能跑、别人能装。 3. 给别人装有哪两种方式？ —— 直接打包文件夹给同事加载；发布到扩展商店。

相关笔记