{"id":15711262,"url":"https://github.com/shpingalet007/element-selector","last_synced_at":"2025-05-12T22:02:13.198Z","repository":{"id":169538948,"uuid":"637375525","full_name":"shpingalet007/element-selector","owner":"shpingalet007","description":"Simple web element selector inspired by Chrome DevTools","archived":false,"fork":false,"pushed_at":"2023-07-04T15:36:41.000Z","size":511,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-09T14:46:04.529Z","etag":null,"topics":["chrome-extension","chrome-extension-development","chrome-extensions","dev-tools","developer-tool","developer-tools","devtools"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shpingalet007.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}},"created_at":"2023-05-07T11:18:54.000Z","updated_at":"2025-03-02T11:22:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"7171f8c8-828f-4998-a88e-1671c7753ee0","html_url":"https://github.com/shpingalet007/element-selector","commit_stats":null,"previous_names":["shpingalet007/element-selector"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shpingalet007%2Felement-selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shpingalet007%2Felement-selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shpingalet007%2Felement-selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shpingalet007%2Felement-selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shpingalet007","download_url":"https://codeload.github.com/shpingalet007/element-selector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253830926,"owners_count":21971002,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","chrome-extension-development","chrome-extensions","dev-tools","developer-tool","developer-tools","devtools"],"created_at":"2024-10-03T21:12:20.167Z","updated_at":"2025-05-12T22:02:13.097Z","avatar_url":"https://github.com/shpingalet007.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple web element selector\n\nDid you ever think about the ability to make your custom ⌘ ⇧ C (inspect element) in your extension or tool? Yeah, we did too. And, of course, browsers doesn't provide any API to use it. Fortunately, we were looking for the same solution and finally wrote a small library.\n\n### The benefits\n\n- 🛠 Compatible with `\u003cscript\u003e` and `import()` usage\n- 🪶 Zero-dependent library, only native code\n- ☄️ We use HTML5 Canvas to draw the selection, so it's fast\n- 🍩 We use modern JavaScript, yummy\n- 💫 It's asynchronous, no callbacks needed\n\n## Installation\n\n### Use it with NPM\n\n```\nnpm i element-selector\n```\n\n### Use it with CDN\n\n```\n\u003cscript src=\"//cdn.jsdelivr.net/npm/element-selector@0.1.7/dist/main.js\"\u003e\u003c/script\u003e\n```\n\n## How to use\n\nThere are only 2 public methods\n\n```js\nlet elementSelector = new ElementSelector();\n\n/**\n * Toggle element selector interface\n * - use async/await\n * - use then callback\n */\nlet selectedElement = await elementSelector.togglePrompt();\n\n/**\n * After you don't need it you can\n * destroy canvas and styles objects\n */\nelementSelector.destroy();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshpingalet007%2Felement-selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshpingalet007%2Felement-selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshpingalet007%2Felement-selector/lists"}