大家好，我是顾北，专注于 AI 应用探索与副业实践，长期关注 AI 技术趋势、实用工具以及Github线索探索。

最近好多同学来问我，怎么开发一款 Chrome 插件，比如开发一个将浏览器浏览的页面转化为HTML + TailwindCSS，以便后续下载上进行网页重构。

针对于这个问题，对于我们小白朋友来说，开发 Chrome 插件，需要先了解一下 Chrome 插件的基础构成和结构。

接下来我大致给大家讲讲 Chrome 插件需要有什么？

一、开发前的准备

了解 Chrome 插件基础结构

Chrome 插件本质上是由 THML、CSS、JavaScript、Manifest 等文件组成的压缩包，核心配置文件是 manifest.json

一个简单的插件构成如下：

插件文件夹/
├─ manifest.json      # 核心配置文件
├─ popup.html         # 点击插件图标弹出的页面
├─ popup.js           # popup 页面的逻辑
├─ content.js         # 注入网页的脚本（可选）
└─ background.js      # 后台运行的脚本（可选）

manifest.json 配置文件主要是来定义插件的功能，权限，描述等信息。

下面这张是一个基础的manifest.json配置文件内容：

•  manifest_version:3 指定 Chrome 插件使用的 maifest 版本。V3是目前的主流版本，相比于 V2，在安全和性能方面更好。

• name：插件的名称

• version：插件的当前版本

• description：插件的描述信息，帮助用户了解插件的功能。

• permissions：声明插件需要的权限

•  action：配置插件的 “动作”，即点击浏览器工具栏中插件图标时的行为

•  icons：插件的图标配置

• background：配置插件的后台脚本

• context_scripts：配置 “内容脚本”，内容脚本是注入到匹配网页中的脚本，可与网页 DOM 交互

Claude Code 使用技巧

• 首先必须在你明确需求之后再提问，你可以和其他AI应用沟通，让给你产出一份PRD文档

•  然后让Claude Code 阅读你这个产品文档，注意，在使用的时候强调先不要进行编码，可以采用 Plan Mode 的模式

二、开始开发

在你明确了产品之后，可以在向 Claude Code 提问的过程中分步骤提问

初始化插件结构

帮我创建一个Chrome插件的基础结构（Manifest V3），功能是：解析当前网页并转换样式为TailwindCSS。需要包含：
- manifest.json（声明必要权限：activeTab、scripting等）
- popup.html（简单界面：1个“转换样式”按钮，1个“复制代码”按钮，1个状态提示区域）
- 后台脚本（处理插件逻辑的入口）
请说明每个文件的作用，以及权限声明的原因。

网页 DOM 和样式提取

我需要开发一个功能：让Chrome插件获取当前网页的完整HTML结构和所有样式（包括内联style、<style>标签、外部CSS）。请生成对应的代码：
- 使用Chrome的scripting API注入内容脚本
- 内容脚本需要返回：完整的DOM结构字符串、所有样式规则（按选择器分组）
- 说明如何处理跨域CSS文件的加载限制

CSS 转 TailwindCSS 工具类

请编写一个JavaScript函数，功能是将CSS样式转换为TailwindCSS工具类。要求：
- 输入：单个CSS属性键值对（如{color: '#333', margin: '16px'}）
- 输出：对应的Tailwind类（如['text-gray-800', 'm-4']）
- 支持常见属性：color、background、margin、padding、font-size、display（flex/block）、width、height
- 对于不支持的属性，返回原CSS并标注“需手动转换”

整合 HTML 和 Tailwind 类

基于之前获取的DOM结构和转换后的Tailwind类，如何生成新的HTML代码？请编写代码实现：
- 遍历DOM树的每个元素，将转换后的Tailwind类添加到class属性中
- 移除原元素的style属性和与样式相关的class（保留语义化class）
- 最终输出完整的HTML字符串（不含原CSS引用）

交互功能实现

插件popup需要实现以下交互：
- 点击“转换样式”按钮后，触发后台脚本执行解析和转换，并显示“转换中...”
- 转换完成后，在popup中显示“转换成功”，并启用“复制代码”按钮
- 点击“复制代码”按钮，将生成的HTML+Tailwind代码复制到剪贴板，显示“已复制”提示
请生成对应的popup.js和后台脚本通信逻辑（使用Chrome.runtime.sendMessage）。

问题排查与优化

我的插件在转换复杂网页时出现两个问题：
1. 部分CSS属性（如line-height: 1.5）没有转换为Tailwind类
2. 大型网页转换后HTML代码有重复元素
请分析原因并修改代码，优化转换逻辑。

再处理每一个步骤的时候，如果遇到报错，需要你完整的复制报错信息给到Claude Code，然后让它帮你排错

在整个过程剩下的内容就等了，大概我这边等了1个小时左右，基本的页面已经出来了

但是页面复刻出来的样式不是很好

基本是乱的，接下来就让Claude Code 继续更改bug了

经过一番修改，来看最终结果

我觉得效果一般吧，这篇文章主要带大家了解了一下开发一个 Chrome 插件需要哪些文件，以及如何使用 Claude Code 开发，如果觉得有帮助，希望点赞支持一下。

---