# 选定页面元素借助 AI 生成 vue 组件的Chrome 扩展

**Repository Path**: code_skill/Vibe-Coding-Selector

## Basic Information

- **Project Name**: 选定页面元素借助 AI 生成 vue 组件的Chrome 扩展
- **Description**: 选定元素借助 AI 生成 vue 组件的Chrome 扩展
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-08-24
- **Last Updated**: 2026-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vibe Coding Selector

Language / 语言： [简体中文](#readme-zh) | [English](#readme-en)

<a id="readme-zh"></a>
## 简体中文

Vibe Coding Selector 是一个 Chrome 扩展，用于在真实网页中快速选取元素，并生成可直接交给 AI 的前端改造 Prompt。

### 功能

- 点击扩展图标直接进入网页元素选择模式
- 再次点击扩展图标或按 `ESC` 可退出选择模式
- 红色选中框标记当前悬停元素
- 点击页面元素后自动提取 HTML、全部计算后的 CSS、布局上下文和可访问样式规则
- 同时提取 ARIA/交互属性、表单与链接信息、当前伪类状态、动画过渡和交互状态 CSS
- 自动生成 Vue 组件还原 Prompt 并复制到剪贴板
- 支持中文 / English 界面

### 本地加载（Mac）

1. 打开 Chrome，进入 `chrome://extensions`
2. 开启右上角“开发者模式”
3. 点击“加载已解压的扩展程序”
4. 选择当前项目目录（`manifest.json` 所在目录）

### 使用步骤

1. 打开目标网页
2. 点击浏览器工具栏中的扩展图标，直接进入元素选择模式
3. 将鼠标移动到目标元素，红色选中框会标记当前元素
4. 点击目标元素，HTML/CSS 快照会自动生成 Prompt 并复制到剪贴板
5. 将 Prompt 粘贴到 Codex 中生成独立 Vue 组件

> 说明：Chrome 的 `chrome://`、扩展商店、开发者工具等受限页面不允许注入扩展脚本，这是浏览器安全限制。

### 文件结构

- `manifest.json`：Chrome MV3 配置（action、service worker 和 content script）
- `background.js`：响应扩展图标点击并控制选择模式
- `popup.html` / `popup.css` / `popup.js`：保留的旧版弹窗界面文件，当前入口未使用
- `content.js`：元素高亮、HTML/CSS/交互快照、选择与 Prompt 复制逻辑

[返回顶部](#vibe-coding-selector)

---

<a id="readme-en"></a>
## English

Vibe Coding Selector is a Chrome extension that helps you pick real DOM elements on any page and generate AI-ready frontend modification prompts.

### Features

- Click the extension icon to start picking directly
- Click the extension icon again or press `ESC` to stop picking
- Highlight the current element with a red selection box
- Capture HTML, all computed CSS, layout context, pseudo-elements, and accessible CSS rules
- Capture interaction attributes, current pseudo-class states, and interactive-state CSS rules
- Generate a Vue component restoration prompt and copy it to the clipboard
- Support Chinese / English interface text

### Local Load (Mac)

1. Open Chrome and go to `chrome://extensions`
2. Enable **Developer mode**
3. Click **Load unpacked**
4. Select this project folder (the folder containing `manifest.json`)

### Usage

1. Open your target webpage
2. Click the extension icon to enter element picking mode directly
3. Move over the target element; the red box marks the current element
4. Click the target element to capture HTML/CSS/interaction details and copy the prompt
5. Paste the prompt into Codex to generate an independent Vue component

> Note: Restricted pages such as `chrome://*`, extension store pages, and DevTools do not allow content script injection due to browser security rules.

### File Structure

- `manifest.json`: Chrome MV3 config (action, service worker, and content script)
- `background.js`: handles extension icon clicks and controls picker mode
- `popup.html` / `popup.css` / `popup.js`: legacy popup files retained but no longer used as the entry point
- `content.js`: element highlight, HTML/CSS snapshot, selection, and prompt copy logic

[Back to top](#vibe-coding-selector)