Chrome 扩展开发

Chrome 扩展开发：打包和发布扩展

Moran 的茶馆

2024年2月20日 • 6 min read

教程中演示的插件第一个版本很简单，也就不涉及优化测试相关的内容，所以就不写了，直接开始打包发布。

打包发布的形式

Chrome 扩展的打包发布有两种形式，区别如下：

浏览器扩展程序（chrome://extensions/）页面的“打包扩展程序”功能

这种方法是通过 Chrome 浏览器自带的打包功能来实现的。你可以在扩展开发者模式下，使用“打包扩展程序”功能来创建一个 .crx 文件和一个 .pem 文件（包含扩展的私钥）。
这种方式适用于个人使用或内部分发，比如你开发了一个扩展，只想分享给特定的朋友或同事，而不想公开发布。
用户需要手动在 Chrome 浏览器中安装 .crx 文件，这个过程比从 Chrome Web Store 安装扩展稍微复杂一些。

发布到 Chrome Web Store

这是将你的扩展发布到官方的 Chrome Web Store，使得全世界的 Chrome 用户都能搜索到并安装你的扩展。
发布到 Chrome Web Store 需要遵循一定的政策和标准，例如内容政策、版权政策等。同时，你需要支付一次性的开发者注册费用。
通过 Chrome Web Store 安装的扩展更加方便和安全，用户只需点击“添加到 Chrome”按钮即可完成安装，而且扩展会自动更新。

上面两种方法都比较正式，主要是方便扩展的更新和维护。草率一点的方法，就是直接将扩展应用打包，让使用者打开“开发者模式”，直接加载解压的扩展程序。

油猴脚本

还有一种大部分开发者惯用的方法，将自己的扩展发布到油猴脚本。

油猴脚本（Tampermonkey Script）是一种运行在浏览器上的用户脚本，它可以让用户自定义和增强网页的功能和外观。油猴脚本通常与油猴扩展（Tampermonkey 或 Greasemonkey）一起使用，这些扩展允许用户在浏览器中安装和管理用户脚本。

油猴脚本可以用来实现各种功能，比如：

修改网页的样式和布局
自动填充表单
去除广告和弹窗
添加快捷键和自定义按钮
实现网页的自动刷新或自动翻页
以及其他各种自定义的网页交互功能

大白话一点，油猴脚本就类比小程序，Chrome 浏览器是操作系统，普通扩展是 APP，油猴扩展就是微信 APP，油猴脚本就是微信小程序里面的应用，基本普通扩展能实现的功能，油猴脚本都能实现。

油猴脚本省去了打包发布的复杂流程，对于开发者和用户来说都还是比较方便的。

打包扩展

上面介绍了所有的扩展发布方法，虽然网络环境不支持，但为了保证教程的完整性，还是说一下如何发布到 Chrome Web Store。

我们开发过程中产生了很多项目文件，在发布扩展的时候是不需要的，因此我们只需要提出部分文件（dist 目录、public 目录以及 manifest.json 文件）压缩成 .zip 格式即可，以下是最终提出来的文件内容：

.
├── dist
│   ├── popup.js
│   └── tailwind.css
└── public
    ├── images
    │   ├── logo128.png
    │   ├── logo16.png
    │   ├── logo24.png
    │   ├── logo32.png
    │   └── logo48.png
    └── popup.html
└── manifest.json