CNB Browser Extension

一个使用 TypeScript 开发的简单浏览器插件项目。

• 🎨 改变页面背景色 - 随机改变当前页面的背景颜色
• 🔄 重置背景 - 恢复页面原始背景色
• 📊 页面信息显示 - 显示当前页面的标题和URL
• 💾 数据存储 - 支持设置保存和读取
• 🔔 消息通知 - 操作完成后显示友好的通知

• TypeScript - 类型安全的JavaScript
• Webpack - 模块打包工具
• Chrome Extension Manifest V3 - 最新的扩展标准
• Chrome APIs - 标签页、存储、消息传递等API

cnb-ci-flow/
├── src/
│   ├── popup/              # 弹窗相关文件
│   │   ├── popup.html      # 弹窗HTML
│   │   ├── popup.ts        # 弹窗逻辑
│   │   └── popup.css       # 弹窗样式
│   ├── content/            # 内容脚本
│   │   └── content.ts      # 页面注入脚本
│   ├── background/         # 后台脚本
│   │   └── background.ts   # Service Worker
│   └── types/              # 类型定义
│       └── index.ts        # 通用类型
├── public/
│   ├── manifest.json       # 扩展配置文件
│   └── icons/              # 图标文件夹
├── dist/                   # 构建输出目录
├── webpack.config.js       # Webpack配置
├── tsconfig.json          # TypeScript配置
└── package.json           # 项目依赖

npm install

npm run dev

这将启动 Webpack 的 watch 模式，自动监听文件变化并重新构建。

npm run build

构建完成后，dist 目录将包含所有打包后的文件。

1. 打开 Chrome 浏览器
2. 访问 chrome://extensions/
3. 开启"开发者模式"
4. 点击"加载已解压的扩展程序"
5. 选择项目的 dist 目录

1. 安装扩展后，浏览器工具栏会出现扩展图标
2. 点击图标，打开弹窗界面
3. 查看页面信息，显示当前页面的标题和URL
4. 改变背景色，点击"改变背景色"按钮随机改变页面背景
5. 重置背景，点击"重置背景"按钮恢复原始背景
6. 刷新信息，点击"刷新信息"按钮更新页面信息

扩展使用 Chrome 的消息传递API在不同组件间通信：

• Popup → Content Script: 发送操作指令
• Content Script → Popup: 返回操作结果
• Background Script: 处理扩展生命周期和存储

项目使用 TypeScript 提供完整的类型安全：

• ExtensionMessage: 消息类型定义
• ExtensionResponse: 响应类型定义
• PageInfo: 页面信息类型定义

• 现代化的渐变背景设计
• 响应式布局适配不同屏幕
• 平滑的动画过渡效果
• 友好的用户反馈机制

MIT License