CSS Selector Capture Pro(生成一个可复制的CSS选择器) v2.3.2 Chrome扩展插件

CSS Selector Capture Pro 是一款超实用的 Chrome 扩展插件，版本为 v2.3.2，亮点在于能快速生成可复制的 CSS 选择器。我超喜欢它一键生成选择器的功能，在以前做网页样式调试时，手动编写 CSS 选择器特别麻烦，还容易出错，有了这款插件，只需轻点几下，就能精准生成所需选择器，一下子解决了编写选择器耗时费力的问题，大大提高了工作效率。

功能介绍

✓ 可复制和可调整的选择器可在 CSS/JavaScript 中使用
✓ 与选择器匹配的元素的突出显示
✓ 基于视口上下文中选择器的总匹配数
✓ 简洁或详细选择器的选择
✓ 对页面的干扰最小

使用方法

* 用户指南：https://github.com/CharltonC/chrome-css-selector-capture/blob/master/README.md

* 启用应用程序，使用“CTRL”键锁定/解锁选择器突出显示的位置，然后单击复制按钮复制选择器。

* 如果需要，请在复制之前单击选择器路径来调整选择器。

* 使用“ESC”键退出App

这个扩展在哪里有用

* 该扩展通常适合前端开发、端到端测试（例如 Selenium）以及数据抓取（其中需要直观地识别目标、匹配和获取 CSS 选择器）的使用。

* 还提供精简版：https://www.crxsoso.com/webstore/detail/css-selector-capture-lite/cfjcaifmdcgnnbbnhgmgikdbonflhmaa

隐私

* 该扩展程序不会收集任何数据或将数据发送给第三方。

插件安装方法

方法一：.crx文件格式插件安装

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序或直接输入：chrome://extensions/

3.找到自己已经下载好的Chrome离线安装文件xxx.crx，然后将其从资源管理器中拖动到Chrome的扩展管理界面中，这时候用户会发现在扩展管理器的中央部分中会多出一个”拖动以安装“的插件按钮。

4.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去，但是谷歌考虑用户的安全隐私，在用户松开鼠标后还会给予用户一个确认安装的提示。

5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去，安装成功以后该插件会立即显示在浏览器右上角（如果有插件按钮的话），如果没有插件按钮的话，用户还可以通过Chrome扩展管理器找到已经安装的插件。

方法二：文件夹格式插件安装

1.首先用户点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择设置。

2.在打开的谷歌浏览器的扩展管理器最左侧选择扩展程序。

3.勾选开发者模式，点击加载已解压的扩展程序，将文件夹选择即可安装插件。

如果你在安装过程中出现下图中的错误程序包无效 CRX_HEADER_INVALID

可以参考：超详细的Chrome 浏览器/浏览器插件安装教程(全方法) 一文解决

发布

* 2.3.2 (2023.08.24)
- 升级至清单 v3

* 2.3.1 (2021.09.01)
- v2.3.0 中修正了算法

* 2.3.0 (2021.07.15)
- 优化简洁选择器

* 2.2.0 (2019.03.23)
- 在扩展图标弹出窗口中添加了用户指南链接

* 2.1.0 (2019.03.21)
- 添加了用于锁定叠加层切换的快捷热键（CTRL）

* 2.0.0 (2019.02.25)
- 优化简洁选择器（即更短）
- 当设置对话框的触发按钮位于顶部且用户将其悬停时，调整选择器背景不透明度

* 1.0.3 (2018.10.15)
- 优化选择器检索

* 1.0.0 (2018.09.29)
- 初始发行