# Vibe Coding Selector

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

## Basic Information

- **Project Name**: Vibe Coding Selector
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-16
- **Last Updated**: 2026-04-16

## 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。

### 功能

- 通过扩展弹窗开启页面内悬浮工具条
- 支持“开启并选择 / 仅显示工具条 / 关闭工具条”
- 页面工具条支持输入全局提示词
- 自动或手动开启选择模式，点击页面元素即可加入清单
- 工具条会跟随页面点击位置智能贴边显示
- 支持为每个元素填写修改要求
- 支持每个元素单独复制提示词
- 支持中文 / English 一键切换，弹窗与页面工具条同步生效
- 一键复制整组 Prompt 到剪贴板
- 支持删除单项、清空清单、`ESC` 退出选择模式

### 本地加载（Mac）

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

### 使用步骤

1. 打开目标网页
2. 点击浏览器工具栏中的扩展图标，打开插件弹窗
3. 在弹窗点击“开启工具条并选择”或“仅显示工具条”
4. 在页面右上角工具条中填写全局提示词
5. 点击要改的页面元素，并填写每项修改要求
6. 点击页面工具条里的复制按钮（单项或整组）

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

### 文件结构

- `manifest.json`：Chrome MV3 配置（action popup + content script）
- `popup.html` / `popup.css` / `popup.js`：扩展弹窗开关入口
- `content.js`：页面内工具条、提示词输入、元素高亮、选择与复制逻辑

[返回顶部](#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

- Open an in-page floating toolbar from the extension popup
- Support `Open & Pick / Show Toolbar / Hide Toolbar`
- Support global instruction input in the toolbar
- Enter picker mode and add elements by clicking directly on the page
- Smart edge-aware toolbar positioning near click location
- Add per-element change notes
- Copy prompt per element
- One-click locale switch (`中文 / English`) synced between popup and in-page toolbar
- Copy full prompt set to clipboard in one click
- Remove items, clear list, and exit picker with `ESC`

### 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 open the popup
3. Click `Open & Pick` or `Show Toolbar`
4. Enter a global instruction in the in-page toolbar
5. Click page elements and add per-item change notes
6. Use the toolbar copy actions (single item or full list)

> 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 popup + content script)
- `popup.html` / `popup.css` / `popup.js`: popup entry and controls
- `content.js`: in-page toolbar, prompt input, element highlight, selection, and copy logic

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