147 lines
4.9 KiB
JavaScript
Executable File
147 lines
4.9 KiB
JavaScript
Executable File
#!/usr/bin/env node
|
|
|
|
import puppeteer from "puppeteer-core"
|
|
|
|
const message = process.argv.slice(2).join(" ") || "Select element(s)"
|
|
|
|
const b = await puppeteer.connect({
|
|
browserURL: "http://localhost:9222",
|
|
defaultViewport: null,
|
|
})
|
|
|
|
const p = (await b.pages()).at(-1)
|
|
|
|
if (!p) {
|
|
console.error("✗ No active tab found")
|
|
process.exit(1)
|
|
}
|
|
|
|
// Inject pick() helper into current page
|
|
await p.evaluate(() => {
|
|
if (!window.pick) {
|
|
window.pick = async (message = "Select element(s)") => {
|
|
return new Promise((resolve) => {
|
|
const selections = []
|
|
const selectedElements = new Set()
|
|
|
|
const overlay = document.createElement("div")
|
|
overlay.style.cssText =
|
|
"position:fixed;top:0;left:0;width:100%;height:100%;z-index:2147483647;pointer-events:none"
|
|
|
|
const highlight = document.createElement("div")
|
|
highlight.style.cssText =
|
|
"position:absolute;border:2px solid #3b82f6;background:rgba(59,130,246,0.1);transition:all 0.1s"
|
|
overlay.appendChild(highlight)
|
|
|
|
const banner = document.createElement("div")
|
|
banner.style.cssText =
|
|
"position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1f2937;color:white;padding:12px 24px;border-radius:8px;font:14px sans-serif;box-shadow:0 4px 12px rgba(0,0,0,0.3);pointer-events:auto;z-index:2147483647"
|
|
|
|
const updateBanner = () => {
|
|
banner.textContent = `${message} (${selections.length} selected, Cmd/Ctrl+click to add, Enter to finish, ESC to cancel)`
|
|
}
|
|
updateBanner()
|
|
|
|
document.body.append(banner, overlay)
|
|
|
|
const cleanup = () => {
|
|
document.removeEventListener("mousemove", onMove, true)
|
|
document.removeEventListener("click", onClick, true)
|
|
document.removeEventListener("keydown", onKey, true)
|
|
overlay.remove()
|
|
banner.remove()
|
|
selectedElements.forEach((el) => {
|
|
el.style.outline = ""
|
|
})
|
|
}
|
|
|
|
const onMove = (e) => {
|
|
const el = document.elementFromPoint(e.clientX, e.clientY)
|
|
if (!el || overlay.contains(el) || banner.contains(el)) return
|
|
const r = el.getBoundingClientRect()
|
|
highlight.style.cssText = `position:absolute;border:2px solid #3b82f6;background:rgba(59,130,246,0.1);top:${r.top}px;left:${r.left}px;width:${r.width}px;height:${r.height}px`
|
|
}
|
|
|
|
const buildElementInfo = (el) => {
|
|
const parents = []
|
|
let current = el.parentElement
|
|
while (current && current !== document.body) {
|
|
const parentInfo = current.tagName.toLowerCase()
|
|
const id = current.id ? `#${current.id}` : ""
|
|
const cls = current.className
|
|
? `.${current.className.trim().split(/\s+/).join(".")}`
|
|
: ""
|
|
parents.push(parentInfo + id + cls)
|
|
current = current.parentElement
|
|
}
|
|
|
|
return {
|
|
tag: el.tagName.toLowerCase(),
|
|
id: el.id || null,
|
|
class: el.className || null,
|
|
text: el.textContent?.trim().slice(0, 200) || null,
|
|
html: el.outerHTML.slice(0, 500),
|
|
parents: parents.join(" > "),
|
|
}
|
|
}
|
|
|
|
const onClick = (e) => {
|
|
if (banner.contains(e.target)) return
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
const el = document.elementFromPoint(e.clientX, e.clientY)
|
|
if (!el || overlay.contains(el) || banner.contains(el)) return
|
|
|
|
if (e.metaKey || e.ctrlKey) {
|
|
if (!selectedElements.has(el)) {
|
|
selectedElements.add(el)
|
|
el.style.outline = "3px solid #10b981"
|
|
selections.push(buildElementInfo(el))
|
|
updateBanner()
|
|
}
|
|
} else {
|
|
cleanup()
|
|
const info = buildElementInfo(el)
|
|
resolve(selections.length > 0 ? selections : info)
|
|
}
|
|
}
|
|
|
|
const onKey = (e) => {
|
|
if (e.key === "Escape") {
|
|
e.preventDefault()
|
|
cleanup()
|
|
resolve(null)
|
|
} else if (e.key === "Enter" && selections.length > 0) {
|
|
e.preventDefault()
|
|
cleanup()
|
|
resolve(selections)
|
|
}
|
|
}
|
|
|
|
document.addEventListener("mousemove", onMove, true)
|
|
document.addEventListener("click", onClick, true)
|
|
document.addEventListener("keydown", onKey, true)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
const result = await p.evaluate((msg) => window.pick(msg), message)
|
|
|
|
if (Array.isArray(result)) {
|
|
for (let i = 0; i < result.length; i++) {
|
|
if (i > 0) console.log("")
|
|
for (const [key, value] of Object.entries(result[i])) {
|
|
console.log(`${key}: ${value}`)
|
|
}
|
|
}
|
|
} else if (typeof result === "object" && result !== null) {
|
|
for (const [key, value] of Object.entries(result)) {
|
|
console.log(`${key}: ${value}`)
|
|
}
|
|
} else {
|
|
console.log(result)
|
|
}
|
|
|
|
await b.disconnect()
|