{"id":50387320,"url":"https://github.com/metaory/live-css-queries","last_synced_at":"2026-06-01T20:02:16.393Z","repository":{"id":357903275,"uuid":"1230263813","full_name":"metaory/live-css-queries","owner":"metaory","description":"Live REPL for CSS selectors.","archived":false,"fork":false,"pushed_at":"2026-05-22T07:28:59.000Z","size":246,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-05-22T15:30:22.919Z","etag":null,"topics":["chrome-extension","css","css-selector","css-selectors","developer-tools","javascript","pin","productivity","queryselector","queryselectorall","repl","vanilla-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metaory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-05T20:43:20.000Z","updated_at":"2026-05-22T07:29:03.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/metaory/live-css-queries","commit_stats":null,"previous_names":["metaory/css-selector-repl","metaory/live-css-queries"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/metaory/live-css-queries","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Flive-css-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Flive-css-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Flive-css-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Flive-css-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metaory","download_url":"https://codeload.github.com/metaory/live-css-queries/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Flive-css-queries/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33790933,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-01T02:00:06.963Z","response_time":115,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extension","css","css-selector","css-selectors","developer-tools","javascript","pin","productivity","queryselector","queryselectorall","repl","vanilla-js"],"created_at":"2026-05-30T16:00:22.425Z","updated_at":"2026-06-01T20:02:16.386Z","avatar_url":"https://github.com/metaory.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"icons/icon128.png\" width=\"96\" height=\"96\" alt=\"Live CSS Queries logo\"\u003e\n  \u003ch1\u003eLive CSS Queries\u003c/h1\u003e\n  \u003cp\u003e\u003cstrong\u003eSee live CSS selector results with instant highlights\u003c/strong\u003e\u003c/p\u003e\n  \u003cp\u003eInspect matches in a focused Side Panel while you refine selectors in place\u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n## Why\n\nSelector work on a real DOM is iterative; most DevTools flows are one-shot.\n\n### Existing approaches and their pain points\n\n| Approach | Limitation |\n|---|---|\n| DevTools → **Add style rule** (e.g. `border: 1px solid red`) | Fragile scratch test; DOM edits/typo reset work. No match count/list. |\n| DevTools Console → `document.querySelectorAll(...)` | No on-page marks; grind through `NodeList` in Elements. Re-type each pass. |\n| Inspect → **Copy selector / XPath** | Deep paths; unstable auto-generated `id`s on framework remount. Rarely ship-ready. |\n\n### Core problems\n\n- **Volatile ids** · copied selectors often break across framework remounts.\n- **Brittle paths** · generated chains ≠ the query you maintain in CSS/JS tests.\n- **Single-shot tooling** · little on-page iterate → tighten loop without leaving the DOM.\n\n## What it does\n\nDocked bottom input:\n\n- Highlights on each keystroke; Side Panel lists tag, id, classes, attrs, text snippet (**150** listed, **500** highlighted cap).\n- Row click → scroll + focus.\n- Invalid selectors → inline error; prior state intact until corrected.\n\n## Install (unpacked)\n\n- Chrome → `chrome://extensions`\n- Enable **Developer mode**\n- **Load unpacked** → select this directory\n\n## Usage\n\n`chrome://extensions/shortcuts` · **toolbar icon** (Live CSS Queries + Side Panel)\n\n| Action | Shortcuts label | Default |\n| --- | --- | --- |\n| Live CSS Queries + Side Panel | Toggle Live CSS Queries (+ Side Panel) | Toolbar only — bind on Shortcuts |\n| Input only | Toggle selector input | **Alt+S** |\n\n## Limits\n\n- Side Panel list cap **150**; highlight cap **500** (see above).\n\n## Permissions\n\nMV3: `activeTab`, `scripting`, `sidePanel`; `host_permissions`: `\u003call_urls\u003e`.\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetaory%2Flive-css-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetaory%2Flive-css-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetaory%2Flive-css-queries/lists"}