CSS Selector Capture Pro

Generate a copiable CSS Selector with a mouseover without Devtool

什麼是CSS Selector Capture Pro？

CSS Selector Capture Pro是由POINT & SHOOT開發的Chrome擴展程式，該擴展的主要功能是“Generate a copiable CSS Selector with a mouseover without Devtool”。

擴展截圖

screenshot
screenshot
screenshot

下載CSS Selector Capture Pro擴展crx文件

下載CSS Selector Capture Pro擴展crx格式的文件，手動將Chrome擴充功能安裝到瀏覽器中，也可以將crx文件分享給朋友，輕鬆安裝Chrome擴充功能。

擴展使用說明

                        Clean, simple and intuitive to use, accompanied with these exclusive features.
✓ Copiable and tweak-able Selector ready to use in CSS/JavaScript
✓ Highlights of elements which match the Selector
✓ Total matches based on the Selector within Viewport context
✓ The choice of Concise or Verbose selector
✓ Minimal interference with the page


≡ How to Use

* User Guide: https://github.com/CharltonC/chrome-css-selector-capture/blob/master/README.md

* Enable the App, Use "CTRL" Key to lock／unlock the selector highlight in position and click the Copy button to copy the selector.

* If needed, click on the selector path to tweak the selector before copying.

* Use "ESC" key to exit the App


≡ Where would this extension be useful

* The extension would typically suit the use of Front End Development, End to End testing such as Selenium as well as Data Scraping where visually identifying a target, matches and getting the CSS selector are needed.

* Lite version also available: https://chrome.google.com/webstore/detail/css-selector-capture-lite/cfjcaifmdcgnnbbnhgmgikdbonflhmaa


≡ Privacy

* The extension does NOT collect any data or send data to third party.


≡ Release

* 2.3.2 (2023.08.24)
  - Upgraded to manifest v3

* 2.3.1 (2021.09.01)
  - Fixed algorithm in v2.3.0

* 2.3.0 (2021.07.15)
  - Optimization for concise selector

* 2.2.0 (2019.03.23)
  - Added a User Guide Link in Extension Icon Popup

* 2.1.0 (2019.03.21)
  - Added a shortcut hotkey (CTRL) for locking toggle of the overlays

* 2.0.0 (2019.02.25)
  - Optimization for concise selector (i.e. shorter)
  - Adjustment of selector background opacity when trigger button for Settings Dialog is on top and user hovers it

* 1.0.3 (2018.10.15)
  - Optimization for selector retrieval

* 1.0.0 (2018.09.29)
  - Initial Release

擴展基本資訊

名稱 CSS Selector Capture Pro CSS Selector Capture Pro
ID cpnkcffhllafbdbljkmhebnpbnlhapmd
官方網址 https://chromewebstore.google.com/detail/css-selector-capture-pro/cpnkcffhllafbdbljkmhebnpbnlhapmd
簡介 Generate a copiable CSS Selector with a mouseover without Devtool
檔案大小 115 KB
安裝次數 11,260
目前版本 2.3.2
更新時間 2023-08-24
上架時間 2019-12-06
評分 5.00/5 共 11 次評分
開發者 POINT & SHOOT
電子郵箱 [email protected]
付費類型 free
擴展官網 https://github.com/CharltonC/chrome-css-selector-capture
說明頁面URL https://github.com/CharltonC/chrome-css-selector-capture/blob/master/README.md
支援的語言 en
manifest.json 
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "manifest_version": 3,
    "name": "CSS Selector Capture Pro",
    "version": "2.3.2",
    "minimum_chrome_version": "88",
    "description": "Generate a copiable CSS Selector with a mouseover without Devtool",
    "author": "Charlton Cheng",
    "offline_enabled": true,
    "permissions": [
        "storage",
        "clipboardWrite"
    ],
    "host_permissions": [
        ""
    ],
    "icons": {
        "16": "common\/icon_16.png",
        "32": "common\/icon_32.png",
        "48": "common\/icon_48.png",
        "128": "common\/icon_128.png"
    },
    "content_scripts": [
        {
            "all_frames": false,
            "run_at": "document_end",
            "matches": [
                "*:\/\/*\/*"
            ],
            "js": [
                "common\/app.min.js",
                "content-script\/main.min.js"
            ]
        }
    ],
    "action": {
        "default_icon": {
            "16": "common\/icon_16.png",
            "24": "common\/icon_24.png",
            "32": "common\/icon_32.png"
        },
        "default_title": "CSS Selector Capture Pro",
        "default_popup": "popup\/index.html"
    },
    "web_accessible_resources": [
        {
            "resources": [
                "common\/app.min.css",
                "common\/shl-app-icomoon.woff"
            ],
            "matches": [
                ""
            ]
        }
    ]
}

相關的擴展

SelectorsHub
SelectorsHub
Selector Finder
Selector Finder
Copy Css Selector
Copy Css Selector
Visual CSS Editor
Visual CSS Editor
Amino: Live CSS Editor
Amino: Live CSS Editor
SelectorGadget
SelectorGadget
Ranorex Selocity
Ranorex Selocity
CSS Selector Tester
CSS Selector Tester
CSS Selector Helper
CSS Selector Helper
CSS Selector Finder for Chrome Devtools
CSS Selector Finder for Chrome Devtools
Find Selector
Find Selector
Element Locator
Element Locator