{"id":21493514,"url":"https://github.com/alienkevin/html-element-picker","last_synced_at":"2025-07-15T19:30:57.366Z","repository":{"id":38361888,"uuid":"179868086","full_name":"AlienKevin/html-element-picker","owner":"AlienKevin","description":"Pick and highlight any HTML element on a page using only Vanilla JS (highly configurable)","archived":false,"fork":false,"pushed_at":"2023-04-30T20:18:48.000Z","size":586,"stargazers_count":44,"open_issues_count":5,"forks_count":10,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-10T10:06:57.996Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://alienkevin.github.io/html-element-picker/docs/index.html#html-element-picker","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/AlienKevin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2019-04-06T17:57:25.000Z","updated_at":"2024-08-23T12:04:43.000Z","dependencies_parsed_at":"2024-06-21T05:42:54.052Z","dependency_job_id":"2cdba99e-003b-4028-be74-732e196b0928","html_url":"https://github.com/AlienKevin/html-element-picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlienKevin%2Fhtml-element-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlienKevin%2Fhtml-element-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlienKevin%2Fhtml-element-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlienKevin%2Fhtml-element-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlienKevin","download_url":"https://codeload.github.com/AlienKevin/html-element-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226064547,"owners_count":17568034,"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":[],"created_at":"2024-11-23T15:43:11.982Z","updated_at":"2024-11-23T15:43:12.432Z","avatar_url":"https://github.com/AlienKevin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html-element-picker\n**Pick and highlight any HTML element on a page using only Vanilla JS. Hovered elements are automatically highlighted in the color you want. Tested in Chrome, Firefox, and Opera, does not work in IE.**\n\n# Installation\n## NPM\n`npm install html-element-picker`\n\n## CDN\nAppend the one of the following scripts at the end of `body` tag\n\n**jsDelivr**\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/html-element-picker@latest\"\u003e\u003c/script\u003e\n```\n**Unpkg**\n```html\n\u003cscript src=\"https://unpkg.com/html-element-picker@latest\"\u003e\u003c/script\u003e\n```\n\n# Update\nBecause of the usual 24-hour cache by CDN providers, you should replace the @latest tag with @(the latest version number) for immediate update to the latest version. It's always the safest to use the current stable version @1.0.4.\n\n# Support\nSee the [html-element-picker API documentation](https://alienkevin.github.io/html-element-picker/docs/index.html).\n\n# Usage\nAfter importing html-element-picker, instantiate the ElementPicker class with optional configurations.\n```js\nnew ElementPicker(options);\n```\nThe default configurations are\n```js\n{\ncontainer: document.body,\nselectors: \"*\",\nbackground: \"rgba(153, 235, 255, 0.5)\",\nborderWidth: 5,\ntransition: \"all 150ms ease\",\nignoreElements: [document.body],\naction: {}\n}\n```\n## container (HTMLElement)\n`container` is the boundary of the element picker. No highlights will be shown on mouse hover outside the container. Defaults to the document body.\n## selectors (String)\n`selectors` serve as the filter for the element picker. Only elements matching the CSS rule specified in the `selectors` string will be highlighted. Defaults to accepting all elements (\"*\", star operator).\n## background (String)\n`background` specifies the background color of the higlight when an element is hovered. You should always set a **transparent** color using `\"rgba(...)\"` or `\"hsla(...)\"` so as not to block the hovered element. Same as setting `elementPicker.hoverBox.style.background`. Defaults to light blue.\n## borderWidth (Integer)\n`borderWidth` indicates the width of the highlight box border (in **px**) that covers the hovered element. Pass in a positive value to enlarge the highlight box and a negative to decrease the size (smaller than the hovered element). Zero means no border or same size as the hovered element. Defaults to 5px.\n## transition (String)\n`transition` specifies the animation when the highlight box transfer to another hovered element. Same as setting `elementPicker.hoverBox.style.transition`. Pass in `\"\"` (empty string) to disable transition. Defaults to `\"all 150ms ease\"`.\n## ignoreElements (Array of HTMLElement)\n`ignoreElements` lists the elements to **not** highlight when being hovered over. Add, remove, modify elements in this property same as a normal array (`push`, `pop`, etc). The order of elements does not matter. Defaults to the document body.\n## action (Object with two properties)\n`action` indicates a callback function to run when an event is triggered and **the target element is being picked up by the element picker**, meaning only elements that are accepted by the picker will trigger the callback. `trigger` is a `String` with possible event names such as `\"click\"`, `\"dblclick\"`, `\"mouseover\"`, etc. `callback` is a function given a `target` parameter when triggered which contains the hovered element. Sample `callback` functions are:\n```js\n(function (target) {\n    target.remove();\n})\n```\n```js\n(function (target) {\n    target.style.fontSize = \"50px\"; \n})\n```\n```js\n(function (target) {\n    target.classList.toggle(\"highlight\");\n})\n```\nA full `action` option can look like:\n```js\naction: {\n    trigger: \"click\",\n    callback: (function (target) {\n        target.classList.toggle(\"highlight\");\n    })\n}\n```\nYou must **surround the `callback` function with parentheses** just like Immediately Invoked Function Expressions (IIFEs). Defaults to no action (empty Object).\n\n## Dynamic Update\nAll of the above options can be **dynamically** updated in Javascript at runtime. Element picker will respond immediately to any configuration change.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falienkevin%2Fhtml-element-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falienkevin%2Fhtml-element-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falienkevin%2Fhtml-element-picker/lists"}