前两天制作了一个能快速帮助用户定位 Gemini 聊天历史的 Chrome 插件 花了两个小时VibeCoding一个Chrome插件，制作过程大概是

通过 AI 查询 Chrome 插件的制作方式，了解基本背景信息让 AI 帮忙生成 Chrome 插件制作的 Prompt将 Prompt 粘贴到 Cursor 里，让 Cursor 完成插件的制作过程修改调试插件直到让插件能正常工作PS: 目前插件已经在 Chrome 应用商店上架了，搜索 Gemini Chat Map，排名第一的同名插件就是我制作的插件，或者直接通过链接访问 https://chromewebstore.google.com/detail/gemini-chat-map/peapdimaigbhkehegmmjjbdjijphohfe?hl=zh-CN&authuser=0

因为平时我用 ChatGPT 用的也比较多，所以也想做一个类似的插件上架，如果是延续老路的话，还是通过上面的制作方式去制作，但是咱们不是有 Skills 了吗？我在想是否可以把这个制作 Chrome 插件 Skill 化，这样至少上面制作过程的前三步就可以省略为：直接对着 Cursor 说我想要制作什么样的插件就好了。

我平时编码使用的工具还是 Cursor，最近 Cursor 的更新也加入了 Skill 的支持，所以我就直接通过 Cursor 来制作和应用我的 Skill 了。

Cursor 的 Setting 界面里面，点击 New 之后，直接在 Agent 窗口里自动填好了一些信息，我们只需要输入想要制作的 Skill 的内容就好了，系统的 Create Skill 的 Skill 会自动帮我们创建好对应的 Skill (听起来有点套娃的感觉)

昨天尝试了一下 Codex 和 Claude Code 也都有类似的功能，应该是为了降低制作 Skill 的门槛，毕竟都是 AI 时代了…

输入很简单的一句话「帮我创建一个专门制作 Chrome 插件的 Skill 」，Cursor 巴拉巴拉一顿输出，最终会在我当前的文件夹下(也就是项目)下生成 .cursor/skills/chrome-extension 的文件夹，文件夹里面的 Skill.md 就是最终创建 Chrome 插件的 Skill.

因为创建 Chrome 插件的 Skill 大概率是要跨项目使用的，所以我要把它从当前项目文件夹移动到用户文件夹下 ~/.cursor/skills/ 目录下，所以最终创建好的 Skill 是位于 ~/.cursor/skills/chrome-extension/SKILL.md 这里。

我在这里并没有太详细的检查 Skill.md 的内容，选择相信 AI 生成的内容，毕竟我也没它懂。

制作好 Skill.md 之后，接下来就是如何使用它，创建了 chatgpt-chat-map 的项目文件夹，用 Cursor 打开之后，输入准备好的 Prompt 如下，这也就是我希望的产品的样子，大白话说给 Cursor 听。

我想要开发一个Chrome 插件，这个插件的作用在于定位像 ChatGPT 这类对话网页中，用户说的每句话的位置，在整体网页右侧展示；当用户点击自己和 AI 对话历史中，自己说过的某句话，网页就滚动到对应的对话的位置。 制作 Gemini Chat Map 的时候给 Cursor 的 Prompt 要复杂的多，因为要提供给 Cursor 足够的上下文内容，这次给的简单了一些，因为制作 Chrome 插件的知识已经预置在 Skill 里面了。

Role

You are an expert Chrome Extension Developer (Manifest V3).

Goal

Create a Chrome Extension called "Gemini Chat Map". The extension adds a navigation sidebar to the right side of the Google Gemini web interface (gemini.google.com). This sidebar lists all prompt messages sent by the User, allowing quick navigation (scroll) to specific parts of the conversation.

Core Features

1. DOM Analysis:

• Detect chat bubbles in the DOM.
• Distinguish between "User" messages and "AI" messages.
• Note: Gemini classes are dynamic/obfuscated. Try to identify user message ..... 回到正题，Cursor 一顿输出，看中间日志已经读到了我们刚制作的 Chrome 插件的 Skill，并成功学会了这个 Skill，最后把项目完整生成出来了。

Cursor 产生的对话最后还说明了如何安装和验证这个插件的工作效果。

随便打开一个 ChatGPT 网页发现右上角已经能展示用户发送的消息列表，当点击的时候也能自由滚动到对应消息位置，基本上已经实现了预期的效果。

验证了这个 Skill 还是能做出来 Chrome 插件雏形的，当然现在这个效果还很粗糙，比如我点击我发的消息之后，我预期的是，对应消息会顶到视窗顶部展示，现在是滚到中间展示了；以及列表的样式不够好看，我还希望它能展示时间信息，增加复制功能之类的，但我已经可以能在现有的基础上再进行调整和修改了。

这篇文章就是个比较简单的实战，因为感觉市面上很多分享 Skill 的，但是好像没有人详细的说明 Skill 从制作到使用的流程，所以我想写一篇文章分享一下，如果觉得有用欢迎转发给朋友们。