# dom-selector-copy

**Repository Path**: fishep/dom-selector-copy

## Basic Information

- **Project Name**: dom-selector-copy
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-02
- **Last Updated**: 2026-05-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# DOM Selector Copy

一款轻量级 Chrome 扩展，通过 CSS 选择器批量提取页面元素文本内容，一键复制到剪贴板。

## 功能特性

- **CSS 选择器查询** — 支持任意合法 CSS 选择器，批量匹配页面元素
- **实时预览** — 输入选择器时即时高亮匹配元素，所见即所得
- **一键复制** — 将所有匹配元素的文本内容一键复制到剪贴板
- **选择器参考** — 内置常用选择器速查表，点击 `?` 即可查看

## 安装

1. 下载或克隆本仓库
2. 打开 Chrome，进入 `chrome://extensions/`
3. 开启右上角 **开发者模式**
4. 点击 **加载已解压的扩展程序**，选择本仓库目录

## 使用方法

1. 点击浏览器工具栏的扩展图标打开面板
2. 在输入框中输入 CSS 选择器，例如 `.title`、`#content`、`div > p`
3. 点击 **Query** 按钮执行查询，匹配结果会显示在下方文本框中
4. 点击 **Copy All** 一键复制所有结果

### 实时预览

开启输入框右侧的 **预览** 开关后，输入选择器时会实时高亮页面中匹配的元素，方便确认选择范围。

## 支持的选择器示例

| 选择器 | 说明 |
|--------|------|
| `.class` | class 为 class 的元素 |
| `#id` | id 为 id 的元素 |
| `tag` | 所有 `<tag>` 标签 |
| `div p` | div 内部的所有 p |
| `div > p` | div 的直接子 p |
| `a[href]` | 带 href 属性的 a |
| `li:nth-child(2)` | 第 2 个 li |
| `.a, .b` | class 为 a 或 b |

## 技术栈

- Chrome Extension Manifest V3
- 原生 JavaScript，无第三方依赖