Skip to content

Commit df47745

Browse files
cgbin24cgbin24
committed
初始化项目：构建浏览器扩展及自动化发布流程
0 parents  commit df47745

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+8598
-0
lines changed

‎.github/workflows/build-and-release.yml‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
name: Build and Release
2+
3+
on:
4+
push:
5+
branches: [ main, master ]
6+
# 在推送标签时也触发
7+
tags:
8+
- 'v*' # 匹配格式如 v1.0.0 的标签
9+
10+
# 允许手动触发工作流
11+
workflow_dispatch:
12+
13+
jobs:
14+
build:
15+
runs-on: ubuntu-latest
16+
17+
steps:
18+
- name: 检出代码
19+
uses: actions/checkout@v3
20+
21+
- name: 设置Node.js环境
22+
uses: actions/setup-node@v3
23+
with:
24+
node-version: '18' # 使用Node.js 18
25+
cache: 'npm'
26+
27+
- name: 安装依赖
28+
run: npm ci
29+
30+
- name: 设置私钥
31+
run: node scripts/setup-private-key.js
32+
env:
33+
EXTENSION_PRIVATE_KEY: ${{ secrets.EXTENSION_PRIVATE_KEY }}
34+
35+
- name: 构建扩展
36+
run: npm run build:extension
37+
38+
- name: 创建ZIP包
39+
run: npm run build:zip
40+
41+
- name: 创建CRX包
42+
run: npm run build:crx
43+
44+
- name: 创建发布文件
45+
run: npm run build:release
46+
47+
- name: 上传构建产物
48+
uses: actions/upload-artifact@v3
49+
with:
50+
name: built-extension
51+
path: |
52+
dist/release/
53+
dist/zip/
54+
dist/crx/
55+
retention-days: 5
56+
57+
# 只在标签推送时进行发布
58+
release:
59+
needs: build
60+
if: startsWith(github.ref, 'refs/tags/v')
61+
runs-on: ubuntu-latest
62+
63+
steps:
64+
- name: 检出代码
65+
uses: actions/checkout@v3
66+
with:
67+
fetch-depth: 0 # 获取完整的Git历史记录，用于生成更新日志
68+
69+
- name: 下载构建产物
70+
uses: actions/download-artifact@v3
71+
with:
72+
name: built-extension
73+
path: dist
74+
75+
- name: 获取版本号
76+
id: get_version
77+
run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT
78+
79+
- name: 创建更新日志
80+
id: changelog
81+
run: |
82+
VERSION=${{ steps.get_version.outputs.VERSION }}
83+
echo "## Pro Color 浏览器扩展 v${VERSION}" > CHANGELOG.md
84+
echo "" >> CHANGELOG.md
85+
echo "发布日期: $(date +'%Y-%m-%d')" >> CHANGELOG.md
86+
echo "" >> CHANGELOG.md
87+
echo "### 更新内容" >> CHANGELOG.md
88+
echo "" >> CHANGELOG.md
89+
90+
# 如果有上一个标签，显示自上一个标签以来的提交
91+
PREV_TAG=$(git tag --sort=-v:refname | grep -A 1 "v${VERSION}" | tail -n 1)
92+
if [ ! -z "$PREV_TAG" ] && [ "$PREV_TAG" != "v${VERSION}" ]; then
93+
echo "自 ${PREV_TAG} 以来的更新:" >> CHANGELOG.md
94+
git log ${PREV_TAG}..HEAD --pretty=format:"- %s" --reverse >> CHANGELOG.md
95+
else
96+
echo "- 首次发布" >> CHANGELOG.md
97+
fi
98+
99+
# 将更新日志内容设置为步骤输出
100+
CHANGELOG=$(cat CHANGELOG.md)
101+
echo "CHANGELOG<<EOF" >> $GITHUB_OUTPUT
102+
echo "$CHANGELOG" >> $GITHUB_OUTPUT
103+
echo "EOF" >> $GITHUB_OUTPUT
104+
105+
- name: 创建GitHub Release
106+
id: create_release
107+
uses: actions/create-release@v1
108+
env:
109+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
110+
with:
111+
tag_name: ${{ github.ref }}
112+
release_name: Pro Color v${{ steps.get_version.outputs.VERSION }}
113+
body: ${{ steps.changelog.outputs.CHANGELOG }}
114+
draft: false
115+
prerelease: false
116+
117+
- name: 上传ZIP资源
118+
uses: actions/upload-release-asset@v1
119+
env:
120+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
121+
with:
122+
upload_url: ${{ steps.create_release.outputs.upload_url }}
123+
asset_path: ./dist/release/pro-color-v${{ steps.get_version.outputs.VERSION }}.zip
124+
asset_name: pro-color-v${{ steps.get_version.outputs.VERSION }}.zip
125+
asset_content_type: application/zip
126+
127+
- name: 上传CRX资源
128+
uses: actions/upload-release-asset@v1
129+
env:
130+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
131+
with:
132+
upload_url: ${{ steps.create_release.outputs.upload_url }}
133+
asset_path: ./dist/release/pro-color-v${{ steps.get_version.outputs.VERSION }}.crx
134+
asset_name: pro-color-v${{ steps.get_version.outputs.VERSION }}.crx
135+
asset_content_type: application/x-chrome-extension
136+
137+
- name: 上传版本信息
138+
uses: actions/upload-release-asset@v1
139+
env:
140+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
141+
with:
142+
upload_url: ${{ steps.create_release.outputs.upload_url }}
143+
asset_path: ./dist/release/version-info.json
144+
asset_name: version-info.json
145+
asset_content_type: application/json

‎.gitignore‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Node.js
2+
node_modules/
3+
npm-debug.log
4+
yarn-debug.log
5+
yarn-error.log
6+
7+
# 构建产物
8+
dist/
9+
build/
10+
11+
# 私钥文件 - 不要提交到仓库
12+
private.pem
13+
*.pem
14+
15+
# IDE / 编辑器
16+
.idea/
17+
.vscode/
18+
*.swp
19+
*.swo
20+
.DS_Store
21+
22+
# 临时文件
23+
.tmp/
24+
temp/
25+
26+
# 日志
27+
*.log
28+
29+
# 测试
30+
coverage/
31+
32+
# 环境变量
33+
.env
34+
.env.local
35+
.env.development.local
36+
.env.test.local
37+
.env.production.local

‎README.md‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
# Pro Color 浏览器扩展
2+
3+
Pro Color 是一个强大的浏览器主题扩展，可以让您自定义网页颜色方案，包括暗色模式支持。
4+
5+
## 核心功能
6+
7+
- 🎨 四种预设主题：白色、护眼绿、纸张黄、夜间深色
8+
- 🔄 每个网站单独设置主题，记住您的偏好
9+
- 🌙 兼容系统深色模式
10+
- 📱 响应式设计，自动适应各种屏幕
11+
- 📝 支持导入/导出配置
12+
- 🔌 支持懒加载内容的动态处理
13+
14+
## 技术栈
15+
16+
- React + TypeScript
17+
- Vite 构建
18+
- Chrome Extension Manifest V3
19+
20+
## 开发指南
21+
22+
### 环境要求
23+
24+
- Node.js 16+
25+
- npm 8+
26+
27+
### 安装依赖
28+
29+
```bash
30+
npm install
31+
```
32+
33+
### 开发模式
34+
35+
```bash
36+
npm run dev
37+
```
38+
39+
### 构建扩展
40+
41+
#### 基本构建 (只生成源文件)
42+
43+
```bash
44+
npm run build:extension
45+
```
46+
47+
所有构建文件将位于 `dist/source` 目录中，可以直接加载到浏览器进行测试。
48+
49+
#### 打包构建 (生成多种格式)
50+
51+
```bash
52+
npm run build:package
53+
```
54+
55+
此命令将自动执行以下步骤:
56+
1. `build:extension` - 构建源文件到 `dist/source` 目录
57+
2. `build:zip` - 创建ZIP压缩包到 `dist/zip` 目录
58+
3. `build:crx` - 创建CRX扩展包到 `dist/crx` 目录
59+
4. `build:release` - 复制带版本号的文件到 `dist/release` 目录
60+
61+
您也可以单独运行每个步骤:
62+
63+
```bash
64+
# 只创建ZIP格式
65+
npm run build:zip
66+
67+
# 只创建CRX格式
68+
npm run build:crx
69+
70+
# 只生成发布文件
71+
npm run build:release
72+
```
73+
74+
## CRX扩展包构建说明
75+
76+
CRX文件构建需要RSA私钥进行签名。首次运行 `npm run build:crx` 时会自动生成私钥文件 `private.pem`，请妥善保管该文件以用于将来的更新。
77+
78+
**注意:** 如果删除或丢失私钥文件，生成的新CRX将与之前发布的CRX具有不同的签名，Chrome浏览器将视为不同的扩展。
79+
80+
### 常见问题排查
81+
82+
如果CRX构建失败，请检查:
83+
84+
1. 确保 `dist/source` 目录存在并包含有效的扩展文件
85+
2. 确保 `private.pem` 私钥文件权限正确且可读
86+
3. 确保已安装 `crx` 模块: `npm install --save-dev crx`
87+
4. 如果遇到 `privateKey` 相关错误，可能是私钥格式问题，尝试删除 `private.pem` 让脚本重新生成
88+
89+
## 目录结构
90+
91+
```
92+
├── public/ # 静态资源
93+
│ ├── icons/ # 扩展图标
94+
│ ├── manifest.json # 扩展配置文件
95+
│ └── themes.css # 主题样式
96+
├── src/ # 源代码
97+
│ ├── background/ # 后台脚本
98+
│ ├── content-script/ # 内容脚本
99+
│ └── pages/ # 扩展页面
100+
├── scripts/ # 构建脚本
101+
│ ├── build-crx.js # CRX打包脚本
102+
│ ├── create-zip-file.js # ZIP打包脚本
103+
│ ├── create-release.js # 发布文件生成脚本
104+
│ └── create-zip.js # ZIP压缩模块
105+
├── .github/ # GitHub相关配置
106+
│ └── workflows/ # GitHub Actions工作流
107+
├── docs/ # 文档
108+
│ └── CI-CD.md # CI/CD配置文档
109+
└── dist/ # 构建输出
110+
├── source/ # 构建后的源文件
111+
├── zip/ # ZIP压缩包
112+
├── crx/ # Chrome扩展包
113+
└── release/ # 版本发布文件
114+
```
115+
116+
## 发布流程
117+
118+
### 手动发布
119+
120+
1. 更新 `package.json` 中的版本号
121+
2. 运行 `npm run build:package` 生成所有需要的格式
122+
3. 使用 `dist/release` 目录中的文件进行发布:
123+
- `pro-color-vX.X.X.zip`: 用于提交到Chrome商店
124+
- `pro-color-vX.X.X.crx`: 用于直接分发给用户
125+
- `version-info.json`: 包含版本和构建信息
126+
127+
### GitHub Actions自动发布
128+
129+
项目配置了GitHub Actions自动构建和发布流程，使用方法：
130+
131+
1. 更新 `package.json` 中的版本号（例如 `"version": "1.0.0"`）
132+
2. 提交并推送更改到GitHub
133+
3. 创建一个与版本号匹配的标签并推送:
134+
```bash
135+
git tag v1.0.0
136+
git push origin v1.0.0
137+
```
138+
4. GitHub Actions将自动执行以下操作:
139+
- 构建扩展的所有格式（源文件、ZIP、CRX）
140+
- 创建GitHub Release
141+
- 上传构建的文件作为Release资源
142+
- 生成更新日志
143+
144+
您可以在GitHub仓库的"Actions"和"Releases"标签页查看构建和发布状态。
145+
146+
更多关于CI/CD配置的详细信息，请参阅 [CI/CD文档](docs/CI-CD.md)。
147+
148+
## 注意事项
149+
150+
- 私钥文件 (`private.pem`) 用于签名CRX文件，请勿将其包含在版本控制中
151+
- 确保在提交到Chrome商店前测试扩展的所有功能
152+
- 对于CI/CD环境，可以将私钥保存为GitHub Secrets或仓库Secrets
153+
- GitHub Actions工作流程配置在 `.github/workflows/build-and-release.yml` 文件中
154+
155+
## 加载扩展
156+
157+
1. 打开 Chrome 浏览器，进入扩展管理页面 `chrome://extensions/`
158+
2. 开启右上角的"开发者模式"
159+
3. 点击"加载已解压的扩展程序"
160+
4. 选择项目的 `dist/source` 目录
161+
162+
## 使用说明
163+
164+
- 安装后，在任何网页右侧会出现一个悬浮按钮
165+
- 点击按钮可以切换主题颜色
166+
- 设置会自动保存，下次访问同一网站时自动应用
167+
- 进入扩展的设置页可以管理所有网站配置

0 commit comments

Comments
 (0)