用AI快速实现一个浏览器插件的提示词和技术规范-夜雨聆风

本文最后更新于2025-12-31，某些文章具有时效性，若有错误或已失效，请在下方留言或联系老夜。

用AI快速实现一个浏览器插件的提示词和技术规范

本文档记录了开发 Auto Refresh 浏览器扩展时使用的提示词和技术规范。先看下实现效果。这是一个定时刷新页面的小插件。

项目概述

初始需求提示词

在 auto-refresh 目录下创建一个插件，自动刷新当前 tab 页面，方便配置

核心功能

自动刷新当前标签页
可自定义刷新间隔
预设快捷间隔选项
快捷键支持
每个标签页独立配置

技术栈

框架: React 18 + TypeScript
构建工具: Vite + @crxjs/vite-plugin
样式: Tailwind CSS
扩展规范: Manifest V3
图标库: Lucide React

功能增强提示词

动态倒计时 Badge提示词

icon角标运行的时候实现动态倒计时，1S刷新一次，可以吗

实现方案:

创建全局 countdown_ticker 定时器（每秒触发）
使用 chrome.alarms API 实现可靠的定时
countdownState

对象存储每个标签页的倒计时状态
Badge 显示格式：

< 60s

显示秒数如 59
60s - 1h

显示 分:秒 如 1:30
> 1h

显示 时:分 如 1:30 或 2h

文档与上架

创建README 文档提示词

创建 README.md 增加上架插件所需要的文本

包含内容:

双语说明（English / 中文）
功能特点列表
使用方法步骤
权限说明表格
隐私声明
Chrome Web Store 上架文本

简短描述（132字符以内）
详细描述
分类建议
搜索关键词

宣传图创建提示词

创建宣传图，生成 svg 文件再增加一个 1280x800 的

生成的图片尺寸:

用途	尺寸	文件
小型宣传图块	440×280	`promo-small-440x280.svg`
顶部宣传图块	1400×560	`promo-large-1400x560.svg`
标准宣传图	1280×800	`promo-banner-1280x800.svg`

设计要素:

绿色主题（#10B981 / #059669）
中央刷新图标带倒计时数字
浏览器模拟窗口展示 badge 效果
功能特点列表
快捷键提示

文件结构

auto-refresh/├── manifest.json                 # 扩展配置├── package.json                  # 依赖配置├── vite.config.ts               # Vite 构建配置├── tsconfig.json                # TypeScript 配置├── tailwind.config.js           # Tailwind 配置├── postcss.config.js            # PostCSS 配置├── README.md                    # 项目文档├── public/│   ├── icons/│   │   ├── icon.svg             # 源 SVG 图标│   │   ├── icon-16.png│   │   ├── icon-32.png│   │   ├── icon-48.png│   │   └── icon-128.png│   ├── promo/│   │   ├── promo-small-440x280.svg│   │   ├── promo-large-1400x560.svg│   │   └── promo-banner-1280x800.svg│   └── _locales/│       ├── en/messages.json│       └── zh_CN/messages.json├── scripts/│   └── build-zip.sh             # 打包脚本└── src/    ├── types/index.ts           # 类型定义    ├── lib/storage.ts           # 存储管理    ├── background/index.ts      # 后台脚本    ├── popup/    │   ├── index.html    │   ├── main.tsx    │   └── PopupApp.tsx    └── styles/globals.css       # 全局样式

关键代码片段

倒计时 Badge 实现

// 格式化倒计时显示functionformatBadgeCountdown(seconds: number): string {if (seconds >= 3600) {const h = Math.floor(seconds / 3600)const m = Math.floor((seconds % 3600) / 60)return m > 0 ? `${h}:${m.toString().padStart(2, '0')}` : `${h}h`  }if (seconds >= 60) {const m = Math.floor(seconds / 60)const s = seconds % 60return`${m}:${s.toString().padStart(2, '0')}`  }return`${seconds}`}// 启动全局倒计时定时器asyncfunctionstartCountdownTicker() {await chrome.alarms.clear(COUNTDOWN_ALARM)await chrome.alarms.create(COUNTDOWN_ALARM, {periodInMinutes: 1 / 60, // 每秒触发  })}

存储结构

interfaceTabRefreshConfig {tabId: numberinterval: number// 刷新间隔（秒）enabled: booleanurl: stringlastRefresh?: number}interfaceRefreshSettings {defaultInterval: numbershowNotification: booleanpresets: number[]     // 预设间隔选项}

权限说明

权限	用途
`storage`	保存刷新设置和偏好
`tabs`	访问当前标签页以执行刷新
`alarms`	可靠地调度刷新间隔和倒计时
`activeTab`	刷新当前活动标签页
`<all_urls>`	支持刷新任意网页

构建命令

# 安装依赖pnpm install# 开发模式pnpm run dev# 生产构建pnpm run build# 打包发布pnpm run build:zip# 类型检查pnpm run type-check

设计规范

颜色

名称	色值	用途
Primary	#10B981	主色、激活状态
Primary Hover	#059669	主色悬停
Danger	#EF4444	停止按钮
Background	#FFFFFF	背景色
Surface	#F9FAFB	表面色
Text	#111827	主文字
Text Muted	#6B7280	次要文字
Border	#E5E7EB	边框色

图标设计

刷新环形箭头
内圆显示倒计时数字
绿色主题
白色背景 + 浅灰边框

Chrome Web Store 信息

分类

Productivity

语言

English, Chinese (Simplified)

搜索关键词

auto refresh, page refresh, automatic reload, tab refresh, auto reload,refresh timer, page monitor, 自动刷新, 页面刷新, 定时刷新

简短描述 (132字符)

EN: Auto refresh any webpage at custom intervals. Live countdown badge, keyboard shortcuts, per-tab settings. Simple and lightweight.

ZH: 自动刷新任意网页，支持自定义间隔。实时倒计时角标、快捷键、独立标签页设置。简单轻量。