构建 Chrome 扩展：从创意到自动化发布

Source: Dev.to

介绍

Chrome 扩展是快速交付实用软件的方式之一。
它们轻量、功能强大，并且迫使你在明确的边界内思考。

本文将演示如何使用现代工具构建 Chrome 扩展，以及如何使用 GitHub Actions 自动化版本管理和发布。

我们要构建的内容

我们将构建一个简单的 Chrome 扩展，包含：

• 与网页交互的 content script
• 处理逻辑和协调的 background script
• 用于用户交互的 popup UI
• 自动化的构建、版本管理和 GitHub Release

关键组件

Manifest

定义元数据、权限和入口点。

Content Script

在网页上下文中运行。
可以读取和操作 DOM。

Background Script

独立于页面运行。
处理状态、消息传递和生命周期事件。

Popup UI

点击扩展图标时显示的短暂界面。

Messaging Model

Chrome 扩展是事件驱动的。各组件之间从不直接访问对方。

• Popup → 发送用户意图
• Background → 协调逻辑
• Content Script → 影响页面

分发策略

Chrome 扩展通常根据项目阶段采用以下一种方式进行分发。

Chrome Web Store（公开 & 自动更新）

面向公众分发时，可将 Chrome 扩展发布到 Chrome Web Store。

• 需要一次性 5 美元的开发者注册费
• 支持自动更新
• 让非技术用户也能发现并安装扩展

GitHub Releases（免费 & 灵活）

用户通过下载 Release 包并手动在 Chrome 中加载来安装扩展。

借助 GitHub Actions，Release 可以完全自动化：

• 版本化的 ZIP 产物
• 构建一致性
• 无需审查或批准流程
• 零成本

自动滚动扩展

作为实际案例，我构建了一个 Chrome 自动滚动扩展，并使用 GitHub Actions 搭建了全自动的发布流水线。项目包括：

• 控制页面滚动的 content script
• 用于用户交互的 popup UI
• 用于协调的 background script
• 每次 Git tag 推送时自动生成带版本号的 Release

源代码

https://github.com/Prajwol-Shrestha/auto-scroll-browser-extenstion

发布自动化概览

在本项目中，Release 的自动化流程如下：

• 推送一个 Git tag（例如 v1.0.1）
• GitHub Actions 构建扩展
• 将构建产出打包成 ZIP
• 自动创建 GitHub Release
• 将 ZIP 作为 Release 资产附加上去