{
  "@context": "https://schema.org",
  "@id": "https://aggr.aymericbeaumet.com/items/mariozechner-at/2025-11-02-what-if-you-don-t-need-mcp-at-all/#webpage",
  "@type": [
    "WebPage",
    "ArchiveComponent"
  ],
  "articleBody": "![](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp/media/header.png)\\\nOne chonky MCP server\n\n- [My Browser DevTools Use Cases](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_0)\n- [Problems with Common Browser DevTools for Your Agent](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_1)\n- [Embracing Bash (and Code)](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_2)\n  - [The Start Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_3)\n  - [The Navigate Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_4)\n  - [The Evaluate JavaScript Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_5)\n  - [The Screenshot Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_6)\n- [The Benefits](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_7)\n- [Adding the Pick Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_8)\n- [Adding the Cookies Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_9)\n- [A Contrived Example](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_10)\n- [Making This Reusable Across Agents](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_11)\n- [In Conclusion](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_12)\n\nAfter months of agentic coding frenzy, Twitter is still ablaze with discussions about MCP servers. I previously did some [very light benchmarking](https://mariozechner.at/posts/2025-08-15-mcp-vs-cli/) to see if Bash tools or MCP servers are better suited for a specific task. The TL;DR: both can be efficient if you take care.\n\nUnfortunately, many of the most popular MCP servers are inefficient for a specific task. They need to cover all bases, which means they provide large numbers of tools with lengthy descriptions, consuming significant context.\n\nIt's also hard to extend an existing MCP server. You could check out the source and modify it, but then you'd have to understand the codebase, together with your agent.\n\nMCP servers also aren't composable. Results returned by an MCP server have to go through the agent's context to be persisted to disk or combined with other results.\n\nI'm a simple boy, so I like simple things. Agents can run Bash and write code well. Bash and code are composable. So what's simpler than having your agent just invoke CLI tools and write code? This is nothing new. We've all been doing this since the beginning. I'd just like to convince you that in many situations, you don't need or even want an MCP server.\n\nLet me illustrate this with a common MCP server use case: browser dev tools.\n\n## My Browser DevTools Use Cases\n\nMy use cases are working on web frontends together with my agent, or abusing my agent to become a scrapey little hacker boy so I can scrape all the data in the world. For these two use cases, I only need a minimal set of tools:\n\n- Start the browser, optionally with my default profile so I'm logged in\n- Navigate to a URL, either in the active tab or a new tab\n- Execute JavaScript in the active page context\n- Take a screenshot of the viewport\n\nAnd if my use case requires additional special tooling, I want to quickly have my agent generate that for me and slot it in with the other tools.\n\n## Problems with Common Browser DevTools for Your Agent\n\nPeople will recommend [Playwright MCP](https://github.com/microsoft/playwright-mcp) or [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) for the use cases I illustrated above. Both are fine, but they need to cover all the bases. Playwright MCP has 21 tools using 13.7k tokens (6.8% of Claude's context). Chrome DevTools MCP has 26 tools using 18.0k tokens (9.0%). That many tools will confuse your agent, especially when combined with other MCP servers and built-in tools.\n\nUsing those tools also means you suffer from the composability issue: any output has to go through your agent's context. You can kind of fix this by using sub-agents, but then you rope in all the issues that sub-agents come with.\n\n## Embracing Bash (and Code)\n\nHere's my minimal set of tools, illustrated via the README.md:\n\n```markdown\n# Browser Tools\n\nMinimal CDP tools for collaborative site exploration.\n\n## Start Chrome\n\n\\`\\`\\`bash\n./start.js              # Fresh profile\n./start.js --profile    # Copy your profile (cookies, logins)\n\\`\\`\\`\n\nStart Chrome on `:9222` with remote debugging.\n\n## Navigate\n\n\\`\\`\\`bash\n./nav.js https://example.com\n./nav.js https://example.com --new\n\\`\\`\\`\n\nNavigate current tab or open new tab.\n\n## Evaluate JavaScript\n\n\\`\\`\\`bash\n./eval.js 'document.title'\n./eval.js 'document.querySelectorAll(\"a\").length'\n\\`\\`\\`\n\nExecute JavaScript in active tab (async context).\n\n## Screenshot\n\n\\`\\`\\`bash\n./screenshot.js\n\\`\\`\\`\n\nScreenshot current viewport, returns temp file path.\n```\n\nThis is all I feed to my agent. It's a handful of tools that cover all the bases for my use case. Each tool is a simple Node.js script that uses [Puppeteer Core](https://pptr.dev/). By reading that README, the agent knows the available tools, when to use them, and how to use them via Bash.\n\nWhen I start a session where the agent needs to interact with a browser, I just tell it to read that file in full and that's all it needs to be effective. Let's walk through their implementations to see how little code this actually is.\n\n### The Start Tool\n\nThe agent needs to be able to start a new browser session. For scraping tasks, I often want to use my actual Chrome profile so I'm logged in everywhere. This script either rsyncs my Chrome profile to a temporary folder (Chrome doesn't allow debugging on the default profile), or starts fresh:\n\n```javascript\n#!/usr/bin/env node\n\nimport { spawn, execSync } from \"node:child_process\";\nimport puppeteer from \"puppeteer-core\";\n\nconst useProfile = process.argv[2] === \"--profile\";\n\nif (process.argv[2] && process.argv[2] !== \"--profile\") {\n\tconsole.log(\"Usage: start.ts [--profile]\");\n\tconsole.log(\"\\nOptions:\");\n\tconsole.log(\"  --profile  Copy your default Chrome profile (cookies, logins)\");\n\tconsole.log(\"\\nExamples:\");\n\tconsole.log(\"  start.ts            # Start with fresh profile\");\n\tconsole.log(\"  start.ts --profile  # Start with your Chrome profile\");\n\tprocess.exit(1);\n}\n\n// Kill existing Chrome\ntry {\n\texecSync(\"killall 'Google Chrome'\", { stdio: \"ignore\" });\n} catch {}\n\n// Wait a bit for processes to fully die\nawait new Promise((r) => setTimeout(r, 1000));\n\n// Setup profile directory\nexecSync(\"mkdir -p ~/.cache/scraping\", { stdio: \"ignore\" });\n\nif (useProfile) {\n\t// Sync profile with rsync (much faster on subsequent runs)\n\texecSync(\n\t\t'rsync -a --delete \"/Users/badlogic/Library/Application Support/Google/Chrome/\" ~/.cache/scraping/',\n\t\t{ stdio: \"pipe\" },\n\t);\n}\n\n// Start Chrome in background (detached so Node can exit)\nspawn(\n\t\"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome\",\n\t[\"--remote-debugging-port=9222\", `--user-data-dir=${process.env[\"HOME\"]}/.cache/scraping`],\n\t{ detached: true, stdio: \"ignore\" },\n).unref();\n\n// Wait for Chrome to be ready by attempting to connect\nlet connected = false;\nfor (let i = 0; i < 30; i++) {\n\ttry {\n\t\tconst browser = await puppeteer.connect({\n\t\t\tbrowserURL: \"http://localhost:9222\",\n\t\t\tdefaultViewport: null,\n\t\t});\n\t\tawait browser.disconnect();\n\t\tconnected = true;\n\t\tbreak;\n\t} catch {\n\t\tawait new Promise((r) => setTimeout(r, 500));\n\t}\n}\n\nif (!connected) {\n\tconsole.error(\"✗ Failed to connect to Chrome\");\n\tprocess.exit(1);\n}\n\nconsole.log(`✓ Chrome started on :9222${useProfile ? \" with your profile\" : \"\"}`);\n```\n\nAll the agent needs to know is to use Bash to run the start.js script, either with `--profile` or without.\n\n### The Navigate Tool\n\nOnce the browser is running, the agent needs to navigate to URLs, either in a new tab or the active tab. That's exactly what the navigate tool provides:\n\n```javascript\n#!/usr/bin/env node\n\nimport puppeteer from \"puppeteer-core\";\n\nconst url = process.argv[2];\nconst newTab = process.argv[3] === \"--new\";\n\nif (!url) {\n\tconsole.log(\"Usage: nav.js <url> [--new]\");\n\tconsole.log(\"\\nExamples:\");\n\tconsole.log(\"  nav.js https://example.com       # Navigate current tab\");\n\tconsole.log(\"  nav.js https://example.com --new # Open in new tab\");\n\tprocess.exit(1);\n}\n\nconst b = await puppeteer.connect({\n\tbrowserURL: \"http://localhost:9222\",\n\tdefaultViewport: null,\n});\n\nif (newTab) {\n\tconst p = await b.newPage();\n\tawait p.goto(url, { waitUntil: \"domcontentloaded\" });\n\tconsole.log(\"✓ Opened:\", url);\n} else {\n\tconst p = (await b.pages()).at(-1);\n\tawait p.goto(url, { waitUntil: \"domcontentloaded\" });\n\tconsole.log(\"✓ Navigated to:\", url);\n}\n\nawait b.disconnect();\n```\n\n### The Evaluate JavaScript Tool\n\nThe agent needs to execute JavaScript to read and modify the DOM of the active tab. The JavaScript it writes runs in the page context, so it doesn't have to fuck around with Puppeteer itself. All it needs to know is how to write code using the DOM API, and it sure knows how to do that:\n\n```javascript\n#!/usr/bin/env node\n\nimport puppeteer from \"puppeteer-core\";\n\nconst code = process.argv.slice(2).join(\" \");\nif (!code) {\n\tconsole.log(\"Usage: eval.js 'code'\");\n\tconsole.log(\"\\nExamples:\");\n\tconsole.log('  eval.js \"document.title\"');\n\tconsole.log('  eval.js \"document.querySelectorAll(\\'a\\').length\"');\n\tprocess.exit(1);\n}\n\nconst b = await puppeteer.connect({\n\tbrowserURL: \"http://localhost:9222\",\n\tdefaultViewport: null,\n});\n\nconst p = (await b.pages()).at(-1);\n\nif (!p) {\n\tconsole.error(\"✗ No active tab found\");\n\tprocess.exit(1);\n}\n\nconst result = await p.evaluate((c) => {\n\tconst AsyncFunction = (async () => {}).constructor;\n\treturn new AsyncFunction(`return (${c})`)();\n}, code);\n\nif (Array.isArray(result)) {\n\tfor (let i = 0; i < result.length; i++) {\n\t\tif (i > 0) console.log(\"\");\n\t\tfor (const [key, value] of Object.entries(result[i])) {\n\t\t\tconsole.log(`${key}: ${value}`);\n\t\t}\n\t}\n} else if (typeof result === \"object\" && result !== null) {\n\tfor (const [key, value] of Object.entries(result)) {\n\t\tconsole.log(`${key}: ${value}`);\n\t}\n} else {\n\tconsole.log(result);\n}\n\nawait b.disconnect();\n```\n\n### The Screenshot Tool\n\nSometimes the agent needs to have a visual impression of a page, so naturally we want a screenshot tool:\n\n```javascript\n#!/usr/bin/env node\n\nimport { tmpdir } from \"node:os\";\nimport { join } from \"node:path\";\nimport puppeteer from \"puppeteer-core\";\n\nconst b = await puppeteer.connect({\n\tbrowserURL: \"http://localhost:9222\",\n\tdefaultViewport: null,\n});\n\nconst p = (await b.pages()).at(-1);\n\nif (!p) {\n\tconsole.error(\"✗ No active tab found\");\n\tprocess.exit(1);\n}\n\nconst timestamp = new Date().toISOString().replace(/[:.]/g, \"-\");\nconst filename = `screenshot-${timestamp}.png`;\nconst filepath = join(tmpdir(), filename);\n\nawait p.screenshot({ path: filepath });\n\nconsole.log(filepath);\n\nawait b.disconnect();\n```\n\nThis will take a screenshot of the current viewport of the active tab, write it to a .png file in a temporary directory, and output the file path to the agent, which can then turn around and read it in and use its vision capabilities to \"see\" the image.\n\n## The Benefits\n\nSo how does this compare to the MCP servers I mentioned above? Well, to start, I can pull in the README whenever I need it and don't pay for it in every session. This is very similar to Anthropic's recently introduced skills capabilities. Except it's even more ad hoc and works with any coding agent. All I need to do is instruct my agent to read the README file.\n\nSide note: many folks including myself have used this kind of setup before Anthropic released their skills system. You can see something similar in my [\"Prompts are Code\" blog post](https://mariozechner.at/posts/2025-06-02-prompts-are-code/) or my little [sitegeist.ai](https://sitegeist.ai). [Armin](https://lucumr.pocoo.org/2025/8/18/code-mcps/) has also touched on the power of Bash and code compared to MCPs previously. Anthropic's skills add progressive disclosure (love it) and they make them available to a non-technical audience across almost all their products (also love it).\n\nSpeaking of the README, instead of pulling in 13,000 to 18,000 tokens like the MCP servers mentioned above, this README has a whopping 225 tokens. This efficiency comes from the fact that models know how to write code and use Bash. I'm conserving context space by relying heavily on their existing knowledge.\n\nThese simple tools are also composable. Instead of reading the outputs of an invocation into the context, the agent can decide to save them to a file for later processing, either by itself or by code. The agent can also easily chain multiple invocations in a single Bash command.\n\nIf I find that the output of a tool is not token efficient, I can just change the output format. Something that's hard or impossible to do depending on what MCP server you use.\n\nAnd it's ridiculously easy to add a new tool or modify an existing tool for my needs. Let me illustrate.\n\n## Adding the Pick Tool\n\nWhen the agent and I try to come up with a scraping method for a specific site, it's often more efficient if I'm able to point out DOM elements to it directly by just clicking on them. To make this super easy, I can just build a picker. Here's what I add to the README:\n\n```markdown\n## Pick Elements\n\n\\`\\`\\`bash\n./pick.js \"Click the submit button\"\n\\`\\`\\`\n\nInteractive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish.\n```\n\nAnd here's the code:\n\n```javascript\n#!/usr/bin/env node\n\nimport puppeteer from \"puppeteer-core\";\n\nconst message = process.argv.slice(2).join(\" \");\nif (!message) {\n\tconsole.log(\"Usage: pick.js 'message'\");\n\tconsole.log(\"\\nExample:\");\n\tconsole.log('  pick.js \"Click the submit button\"');\n\tprocess.exit(1);\n}\n\nconst b = await puppeteer.connect({\n\tbrowserURL: \"http://localhost:9222\",\n\tdefaultViewport: null,\n});\n\nconst p = (await b.pages()).at(-1);\n\nif (!p) {\n\tconsole.error(\"✗ No active tab found\");\n\tprocess.exit(1);\n}\n\n// Inject pick() helper into current page\nawait p.evaluate(() => {\n\tif (!window.pick) {\n\t\twindow.pick = async (message) => {\n\t\t\tif (!message) {\n\t\t\t\tthrow new Error(\"pick() requires a message parameter\");\n\t\t\t}\n\t\t\treturn new Promise((resolve) => {\n\t\t\t\tconst selections = [];\n\t\t\t\tconst selectedElements = new Set();\n\n\t\t\t\tconst overlay = document.createElement(\"div\");\n\t\t\t\toverlay.style.cssText =\n\t\t\t\t\t\"position:fixed;top:0;left:0;width:100%;height:100%;z-index:2147483647;pointer-events:none\";\n\n\t\t\t\tconst highlight = document.createElement(\"div\");\n\t\t\t\thighlight.style.cssText =\n\t\t\t\t\t\"position:absolute;border:2px solid #3b82f6;background:rgba(59,130,246,0.1);transition:all 0.1s\";\n\t\t\t\toverlay.appendChild(highlight);\n\n\t\t\t\tconst banner = document.createElement(\"div\");\n\t\t\t\tbanner.style.cssText =\n\t\t\t\t\t\"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\";\n\n\t\t\t\tconst updateBanner = () => {\n\t\t\t\t\tbanner.textContent = `${message} (${selections.length} selected, Cmd/Ctrl+click to add, Enter to finish, ESC to cancel)`;\n\t\t\t\t};\n\t\t\t\tupdateBanner();\n\n\t\t\t\tdocument.body.append(banner, overlay);\n\n\t\t\t\tconst cleanup = () => {\n\t\t\t\t\tdocument.removeEventListener(\"mousemove\", onMove, true);\n\t\t\t\t\tdocument.removeEventListener(\"click\", onClick, true);\n\t\t\t\t\tdocument.removeEventListener(\"keydown\", onKey, true);\n\t\t\t\t\toverlay.remove();\n\t\t\t\t\tbanner.remove();\n\t\t\t\t\tselectedElements.forEach((el) => {\n\t\t\t\t\t\tel.style.outline = \"\";\n\t\t\t\t\t});\n\t\t\t\t};\n\n\t\t\t\tconst onMove = (e) => {\n\t\t\t\t\tconst el = document.elementFromPoint(e.clientX, e.clientY);\n\t\t\t\t\tif (!el || overlay.contains(el) || banner.contains(el)) return;\n\t\t\t\t\tconst r = el.getBoundingClientRect();\n\t\t\t\t\thighlight.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`;\n\t\t\t\t};\n\n\t\t\t\tconst buildElementInfo = (el) => {\n\t\t\t\t\tconst parents = [];\n\t\t\t\t\tlet current = el.parentElement;\n\t\t\t\t\twhile (current && current !== document.body) {\n\t\t\t\t\t\tconst parentInfo = current.tagName.toLowerCase();\n\t\t\t\t\t\tconst id = current.id ? `#${current.id}` : \"\";\n\t\t\t\t\t\tconst cls = current.className\n\t\t\t\t\t\t\t? `.${current.className.trim().split(/\\s+/).join(\".\")}`\n\t\t\t\t\t\t\t: \"\";\n\t\t\t\t\t\tparents.push(parentInfo + id + cls);\n\t\t\t\t\t\tcurrent = current.parentElement;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\ttag: el.tagName.toLowerCase(),\n\t\t\t\t\t\tid: el.id || null,\n\t\t\t\t\t\tclass: el.className || null,\n\t\t\t\t\t\ttext: el.textContent?.trim().slice(0, 200) || null,\n\t\t\t\t\t\thtml: el.outerHTML.slice(0, 500),\n\t\t\t\t\t\tparents: parents.join(\" > \"),\n\t\t\t\t\t};\n\t\t\t\t};\n\n\t\t\t\tconst onClick = (e) => {\n\t\t\t\t\tif (banner.contains(e.target)) return;\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\tconst el = document.elementFromPoint(e.clientX, e.clientY);\n\t\t\t\t\tif (!el || overlay.contains(el) || banner.contains(el)) return;\n\n\t\t\t\t\tif (e.metaKey || e.ctrlKey) {\n\t\t\t\t\t\tif (!selectedElements.has(el)) {\n\t\t\t\t\t\t\tselectedElements.add(el);\n\t\t\t\t\t\t\tel.style.outline = \"3px solid #10b981\";\n\t\t\t\t\t\t\tselections.push(buildElementInfo(el));\n\t\t\t\t\t\t\tupdateBanner();\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tcleanup();\n\t\t\t\t\t\tconst info = buildElementInfo(el);\n\t\t\t\t\t\tresolve(selections.length > 0 ? selections : info);\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst onKey = (e) => {\n\t\t\t\t\tif (e.key === \"Escape\") {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tcleanup();\n\t\t\t\t\t\tresolve(null);\n\t\t\t\t\t} else if (e.key === \"Enter\" && selections.length > 0) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tcleanup();\n\t\t\t\t\t\tresolve(selections);\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tdocument.addEventListener(\"mousemove\", onMove, true);\n\t\t\t\tdocument.addEventListener(\"click\", onClick, true);\n\t\t\t\tdocument.addEventListener(\"keydown\", onKey, true);\n\t\t\t});\n\t\t};\n\t}\n});\n\nconst result = await p.evaluate((msg) => window.pick(msg), message);\n\nif (Array.isArray(result)) {\n\tfor (let i = 0; i < result.length; i++) {\n\t\tif (i > 0) console.log(\"\");\n\t\tfor (const [key, value] of Object.entries(result[i])) {\n\t\t\tconsole.log(`${key}: ${value}`);\n\t\t}\n\t}\n} else if (typeof result === \"object\" && result !== null) {\n\tfor (const [key, value] of Object.entries(result)) {\n\t\tconsole.log(`${key}: ${value}`);\n\t}\n} else {\n\tconsole.log(result);\n}\n\nawait b.disconnect();\n```\n\nWhenever I think it's faster for me to just click on a bunch of DOM elements instead of having the agent figure out the DOM structure, I can just tell it to use the pick tool. It's super efficient and allows me to build scrapers in no time. It's also fantastic to adjust the scraper if the DOM layout of a site changed.\n\nIf you're having trouble following what this tool does, worry not, I will have a video at the end of the blog post where you can see it in action. Before we look at that, let me show you an additional tool.\n\n## Adding the Cookies Tool\n\nDuring one of my recent scraping adventures, I had a need for HTTP-only cookies of that site, so the deterministic scraper could pretend it's me. The Evaluate JavaScript tool cannot handle this as it executes in the page context. But it took not even a minute for me to instruct Claude to create that tool, add it to the readme, and away we went.\n\n![](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp/media/extension.png)\n\nThis is so much easier than adjusting, testing, and debugging an existing MCP server.\n\n## A Contrived Example\n\nLet me illustrate usage of this set of tools with a contrived example. I set out to build a simple Hacker News scraper where I basically pick the DOM elements for the agent, based on which it can then write a minimal Node.js scraper. Here's how that looks in action. I sped up a few sections where Claude was its usual slow self.\n\nReal world scraping tasks would look a bit more involved. Also, there's no point in doing it like this for such a simple site like Hacker News. But you get the idea.\n\nFinal token tally:\n\n![](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp/media/scrape-tokens.png)\n\n## Making This Reusable Across Agents\n\nHere's how I've set things up so I can use this with Claude Code and other agents. I have a folder `agent-tools` in my home directory. I then clone the repositories of individual tools, like the browser tools repository above, into that folder. Then I set up an alias:\n\n```bash\nalias cl=\"PATH=$PATH:/Users/badlogic/agent-tools/browser-tools:<other-tool-dirs> && claude --dangerously-skip-permissions\"\n```\n\nThis way all of the scripts are available to sessions of Claude, but don't pollute my normal environment. I also prefix each script with the full tool name, e.g. `browser-tools-start.js`, to eliminate name collisions. I also add a single sentence to the README telling the agent that all the scripts are globally available. This way, the agent doesn't have to change its working directory just to call a tool script, saving a few tokens here and there, and reducing the chances of the agent getting confused by the constant working directory changes.\n\nFinally, I add the agent tools directory as a working directory to Claude Code via `/add-dir`, so I can use `@README.md` to reference a specific tool's README file and get it into the agent's context. I prefer this to Anthropic's skill auto-discovery, which I found to not work reliably in practice. It also means I save a few more tokens: Claude Code injects all the frontmatter of all skills it can find into the system prompt (or first user message, I forgot, see [https://cchistory.mariozechner.at](https://cchistory.mariozechner.at))\n\n## In Conclusion\n\nBuilding these tools is ridiculously easy, gives you all the freedom you need, and makes you, your agent, and your token usage efficient. You can find the browser tools on [GitHub](https://github.com/badlogic/browser-tools).\n\nThis general principle can apply to any kind of harness that has some kind of code execution environment. Think outside the MCP box and you'll find that this is much more powerful than the more rigid structure you have to follow with MCP.\n\nWith great power comes great responsibility though. You will have to come up with a structure for how you build and maintain those tools yourself. Anthropic's skill system can be one way to do it, though that's less transferable to other agents. Or you follow my setup above.\n\nThis page respects your privacy by not using cookies or similar technologies and by not collecting any personally identifiable information.\n",
  "authors": [],
  "captured_at": "2026-09-27T19:29:15.293681927+00:00",
  "category": "programming",
  "content_html": "<figure class=\"article-figure\"><picture class=\"article-picture article-picture-fallback\" style=\"--image-ratio:16 / 9\"><img src=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp/media/header.png\" alt=\"\" loading=\"eager\" decoding=\"async\" fetchpriority=\"high\" referrerpolicy=\"no-referrer\" class=\"progressive-image\"></picture><figcaption>One chonky MCP server</figcaption></figure>\n<ul>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_0\">My Browser DevTools Use Cases</a></li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_1\">Problems with Common Browser DevTools for Your Agent</a></li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_2\">Embracing Bash (and Code)</a>\n<ul>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_3\">The Start Tool</a></li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_4\">The Navigate Tool</a></li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_5\">The Evaluate JavaScript Tool</a></li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_6\">The Screenshot Tool</a></li>\n</ul>\n</li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_7\">The Benefits</a></li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_8\">Adding the Pick Tool</a></li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_9\">Adding the Cookies Tool</a></li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_10\">A Contrived Example</a></li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_11\">Making This Reusable Across Agents</a></li>\n<li><a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_12\">In Conclusion</a></li>\n</ul>\n<p>After months of agentic coding frenzy, Twitter is still ablaze with discussions about MCP servers. I previously did some <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-08-15-mcp-vs-cli/\">very light benchmarking</a> to see if Bash tools or MCP servers are better suited for a specific task. The TL;DR: both can be efficient if you take care.</p>\n<p>Unfortunately, many of the most popular MCP servers are inefficient for a specific task. They need to cover all bases, which means they provide large numbers of tools with lengthy descriptions, consuming significant context.</p>\n<p>It's also hard to extend an existing MCP server. You could check out the source and modify it, but then you'd have to understand the codebase, together with your agent.</p>\n<p>MCP servers also aren't composable. Results returned by an MCP server have to go through the agent's context to be persisted to disk or combined with other results.</p>\n<p>I'm a simple boy, so I like simple things. Agents can run Bash and write code well. Bash and code are composable. So what's simpler than having your agent just invoke CLI tools and write code? This is nothing new. We've all been doing this since the beginning. I'd just like to convince you that in many situations, you don't need or even want an MCP server.</p>\n<p>Let me illustrate this with a common MCP server use case: browser dev tools.</p>\n<h2>My Browser DevTools Use Cases</h2>\n<p>My use cases are working on web frontends together with my agent, or abusing my agent to become a scrapey little hacker boy so I can scrape all the data in the world. For these two use cases, I only need a minimal set of tools:</p>\n<ul>\n<li>Start the browser, optionally with my default profile so I'm logged in</li>\n<li>Navigate to a URL, either in the active tab or a new tab</li>\n<li>Execute JavaScript in the active page context</li>\n<li>Take a screenshot of the viewport</li>\n</ul>\n<p>And if my use case requires additional special tooling, I want to quickly have my agent generate that for me and slot it in with the other tools.</p>\n<h2>Problems with Common Browser DevTools for Your Agent</h2>\n<p>People will recommend <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/microsoft/playwright-mcp\">Playwright MCP</a> or <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/ChromeDevTools/chrome-devtools-mcp\">Chrome DevTools MCP</a> for the use cases I illustrated above. Both are fine, but they need to cover all the bases. Playwright MCP has 21 tools using 13.7k tokens (6.8% of Claude's context). Chrome DevTools MCP has 26 tools using 18.0k tokens (9.0%). That many tools will confuse your agent, especially when combined with other MCP servers and built-in tools.</p>\n<p>Using those tools also means you suffer from the composability issue: any output has to go through your agent's context. You can kind of fix this by using sub-agents, but then you rope in all the issues that sub-agents come with.</p>\n<h2>Embracing Bash (and Code)</h2>\n<p>Here's my minimal set of tools, illustrated via the README.md:</p>\n<pre><code class=\"language-markdown\"><span class=\"code-snippet\" data-language=\"Markdown\"><span class=\"syntax-text syntax-html syntax-markdown\"><span class=\"syntax-meta syntax-block-level syntax-markdown\"><span class=\"syntax-markup syntax-heading syntax-1 syntax-markdown\"><span class=\"syntax-punctuation syntax-definition syntax-heading syntax-begin syntax-markdown\">#</span> </span><span class=\"syntax-markup syntax-heading syntax-1 syntax-markdown\"><span class=\"syntax-entity syntax-name syntax-section syntax-markdown\">Browser Tools</span><span class=\"syntax-meta syntax-whitespace syntax-newline syntax-markdown\">\n</span></span></span>\n<span class=\"syntax-meta syntax-paragraph syntax-markdown\">Minimal CDP tools for collaborative site exploration.\n\n</span><span class=\"syntax-meta syntax-block-level syntax-markdown\"><span class=\"syntax-markup syntax-heading syntax-2 syntax-markdown\"><span class=\"syntax-punctuation syntax-definition syntax-heading syntax-begin syntax-markdown\">##</span> </span><span class=\"syntax-markup syntax-heading syntax-2 syntax-markdown\"><span class=\"syntax-entity syntax-name syntax-section syntax-markdown\">Start Chrome</span><span class=\"syntax-meta syntax-whitespace syntax-newline syntax-markdown\">\n</span></span></span>\n<span class=\"syntax-meta syntax-paragraph syntax-markdown\"><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span>bash\n./start.js              # Fresh profile\n./start.js --profile    # Copy your profile (cookies, logins)\n<span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span>\n\n</span><span class=\"syntax-meta syntax-paragraph syntax-markdown\">Start Chrome on <span class=\"syntax-markup syntax-raw syntax-inline syntax-markdown\"><span class=\"syntax-punctuation syntax-definition syntax-raw syntax-begin syntax-markdown\">`</span>:9222<span class=\"syntax-punctuation syntax-definition syntax-raw syntax-end syntax-markdown\">`</span></span> with remote debugging.\n\n</span><span class=\"syntax-meta syntax-block-level syntax-markdown\"><span class=\"syntax-markup syntax-heading syntax-2 syntax-markdown\"><span class=\"syntax-punctuation syntax-definition syntax-heading syntax-begin syntax-markdown\">##</span> </span><span class=\"syntax-markup syntax-heading syntax-2 syntax-markdown\"><span class=\"syntax-entity syntax-name syntax-section syntax-markdown\">Navigate</span><span class=\"syntax-meta syntax-whitespace syntax-newline syntax-markdown\">\n</span></span></span>\n<span class=\"syntax-meta syntax-paragraph syntax-markdown\"><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span>bash\n./nav.js <span class=\"syntax-markup syntax-underline syntax-link syntax-markdown\">https://example.com</span>\n./nav.js <span class=\"syntax-markup syntax-underline syntax-link syntax-markdown\">https://example.com</span> --new\n<span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span>\n\n</span><span class=\"syntax-meta syntax-paragraph syntax-markdown\">Navigate current tab or open new tab.\n\n</span><span class=\"syntax-meta syntax-block-level syntax-markdown\"><span class=\"syntax-markup syntax-heading syntax-2 syntax-markdown\"><span class=\"syntax-punctuation syntax-definition syntax-heading syntax-begin syntax-markdown\">##</span> </span><span class=\"syntax-markup syntax-heading syntax-2 syntax-markdown\"><span class=\"syntax-entity syntax-name syntax-section syntax-markdown\">Evaluate JavaScript</span><span class=\"syntax-meta syntax-whitespace syntax-newline syntax-markdown\">\n</span></span></span>\n<span class=\"syntax-meta syntax-paragraph syntax-markdown\"><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span>bash\n./eval.js &#39;document.title&#39;\n./eval.js &#39;document.querySelectorAll(&quot;a&quot;).length&#39;\n<span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span>\n\n</span><span class=\"syntax-meta syntax-paragraph syntax-markdown\">Execute JavaScript in active tab (async context).\n\n</span><span class=\"syntax-meta syntax-block-level syntax-markdown\"><span class=\"syntax-markup syntax-heading syntax-2 syntax-markdown\"><span class=\"syntax-punctuation syntax-definition syntax-heading syntax-begin syntax-markdown\">##</span> </span><span class=\"syntax-markup syntax-heading syntax-2 syntax-markdown\"><span class=\"syntax-entity syntax-name syntax-section syntax-markdown\">Screenshot</span><span class=\"syntax-meta syntax-whitespace syntax-newline syntax-markdown\">\n</span></span></span>\n<span class=\"syntax-meta syntax-paragraph syntax-markdown\"><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span>bash\n./screenshot.js\n<span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span>\n\n</span><span class=\"syntax-meta syntax-paragraph syntax-markdown\">Screenshot current viewport, returns temp file path.\n</span></span></span></code></pre>\n<p>This is all I feed to my agent. It's a handful of tools that cover all the bases for my use case. Each tool is a simple Node.js script that uses <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://pptr.dev/\">Puppeteer Core</a>. By reading that README, the agent knows the available tools, when to use them, and how to use them via Bash.</p>\n<p>When I start a session where the agent needs to interact with a browser, I just tell it to read that file in full and that's all it needs to be effective. Let's walk through their implementations to see how little code this actually is.</p>\n<h3>The Start Tool</h3>\n<p>The agent needs to be able to start a new browser session. For scraping tasks, I often want to use my actual Chrome profile so I'm logged in everywhere. This script either rsyncs my Chrome profile to a temporary folder (Chrome doesn't allow debugging on the default profile), or starts fresh:</p>\n<pre><code class=\"language-javascript\"><span class=\"code-snippet\" data-language=\"JavaScript\"><span class=\"syntax-source syntax-js\"><span class=\"syntax-comment syntax-line syntax-shebang syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">#!</span>/usr/bin/env node\n</span>\n<span class=\"syntax-meta syntax-import syntax-js\"><span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">import</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">spawn</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">execSync</span> <span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span> <span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">from</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>node:child_process<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n<span class=\"syntax-meta syntax-import syntax-js\"><span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">import</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">puppeteer</span> <span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">from</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>puppeteer-core<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">useProfile</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">argv</span><span class=\"syntax-meta syntax-brackets syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-constant syntax-numeric syntax-js\">2</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span> <span class=\"syntax-keyword syntax-operator syntax-comparison syntax-js\">===</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>--profile<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">argv</span><span class=\"syntax-meta syntax-brackets syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-constant syntax-numeric syntax-js\">2</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">&amp;&amp;</span> <span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">argv</span><span class=\"syntax-meta syntax-brackets syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-constant syntax-numeric syntax-js\">2</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span> <span class=\"syntax-keyword syntax-operator syntax-comparison syntax-js\">!==</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>--profile<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>Usage: start.ts [--profile]<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-constant syntax-character syntax-escape syntax-js\">\\n</span>Options:<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>  --profile  Copy your default Chrome profile (cookies, logins)<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-constant syntax-character syntax-escape syntax-js\">\\n</span>Examples:<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>  start.ts            # Start with fresh profile<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>  start.ts --profile  # Start with your Chrome profile<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-process syntax-js\">exit</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-comment syntax-line syntax-double-slash syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">//</span> Kill existing Chrome\n</span><span class=\"syntax-meta syntax-try syntax-js\"><span class=\"syntax-keyword syntax-control syntax-trycatch syntax-js\">try</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">execSync</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>killall &#39;Google Chrome&#39;<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span> <span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">stdio</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>ignore<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span> <span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span> <span class=\"syntax-meta syntax-catch syntax-js\"><span class=\"syntax-keyword syntax-control syntax-trycatch syntax-js\">catch</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span></span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-comment syntax-line syntax-double-slash syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">//</span> Wait a bit for processes to fully die\n</span><span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-meta syntax-instance syntax-constructor syntax-js\"><span class=\"syntax-keyword syntax-operator syntax-word syntax-new syntax-js\">new</span><span class=\"syntax-meta syntax-function-call syntax-constructor syntax-js\"> <span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Promise</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">r</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-support syntax-function syntax-js\">setTimeout</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">r</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-constant syntax-numeric syntax-js\">1000</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-comment syntax-line syntax-double-slash syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">//</span> Setup profile directory\n</span><span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">execSync</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>mkdir -p ~/.cache/scraping<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span> <span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">stdio</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>ignore<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span> <span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">useProfile</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-comment syntax-line syntax-double-slash syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">//</span> Sync profile with rsync (much faster on subsequent runs)\n</span>\t<span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">execSync</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span>\n\t\t<span class=\"syntax-string syntax-quoted syntax-single syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&#39;</span>rsync -a --delete &quot;/Users/badlogic/Library/Application Support/Google/Chrome/&quot; ~/.cache/scraping/<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&#39;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t\t<span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span> <span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">stdio</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>pipe<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span> <span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-comment syntax-line syntax-double-slash syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">//</span> Start Chrome in background (detached so Node can exit)\n</span><span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">spawn</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span>\n\t<span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>/Applications/Google Chrome.app/Contents/MacOS/Google Chrome<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t<span class=\"syntax-meta syntax-sequence syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>--remote-debugging-port=9222<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span>--user-data-dir=</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">env</span><span class=\"syntax-meta syntax-brackets syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>HOME<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">/.cache/scraping<span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t<span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span> <span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">detached</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-constant syntax-language syntax-boolean syntax-true syntax-js\">true</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">stdio</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>ignore<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span> <span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">unref</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-comment syntax-line syntax-double-slash syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">//</span> Wait for Chrome to be ready by attempting to connect\n</span><span class=\"syntax-storage syntax-type syntax-js\">let</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">connected</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-constant syntax-language syntax-boolean syntax-false syntax-js\">false</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n<span class=\"syntax-meta syntax-for syntax-js\"><span class=\"syntax-keyword syntax-control syntax-loop syntax-js\">for</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-storage syntax-type syntax-js\">let</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-constant syntax-numeric syntax-js\">0</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span> <span class=\"syntax-keyword syntax-operator syntax-relational syntax-js\">&lt;</span> <span class=\"syntax-constant syntax-numeric syntax-js\">30</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span><span class=\"syntax-keyword syntax-operator syntax-arithmetic syntax-js\">++</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-try syntax-js\"><span class=\"syntax-keyword syntax-control syntax-trycatch syntax-js\">try</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">browser</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">puppeteer</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">connect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">browserURL</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>http://localhost:9222<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t\t\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">defaultViewport</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">browser</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">disconnect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t<span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">connected</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-constant syntax-language syntax-boolean syntax-true syntax-js\">true</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t<span class=\"syntax-keyword syntax-control syntax-loop syntax-js\">break</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span> <span class=\"syntax-meta syntax-catch syntax-js\"><span class=\"syntax-keyword syntax-control syntax-trycatch syntax-js\">catch</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-meta syntax-instance syntax-constructor syntax-js\"><span class=\"syntax-keyword syntax-operator syntax-word syntax-new syntax-js\">new</span><span class=\"syntax-meta syntax-function-call syntax-constructor syntax-js\"> <span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Promise</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">r</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-support syntax-function syntax-js\">setTimeout</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">r</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-constant syntax-numeric syntax-js\">500</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">connected</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">error</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>✗ Failed to connect to Chrome<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-process syntax-js\">exit</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span>✓ Chrome started on :9222</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">useProfile</span> <span class=\"syntax-keyword syntax-operator syntax-ternary syntax-js\">?</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span> with your profile<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span> <span class=\"syntax-keyword syntax-operator syntax-ternary syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span></span></code></pre>\n<p>All the agent needs to know is to use Bash to run the start.js script, either with <code>--profile</code> or without.</p>\n<h3>The Navigate Tool</h3>\n<p>Once the browser is running, the agent needs to navigate to URLs, either in a new tab or the active tab. That's exactly what the navigate tool provides:</p>\n<pre><code class=\"language-javascript\"><span class=\"code-snippet\" data-language=\"JavaScript\"><span class=\"syntax-source syntax-js\"><span class=\"syntax-comment syntax-line syntax-shebang syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">#!</span>/usr/bin/env node\n</span>\n<span class=\"syntax-meta syntax-import syntax-js\"><span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">import</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">puppeteer</span> <span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">from</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>puppeteer-core<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-support syntax-module syntax-node syntax-js\">url</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">argv</span><span class=\"syntax-meta syntax-brackets syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-constant syntax-numeric syntax-js\">2</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">newTab</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">argv</span><span class=\"syntax-meta syntax-brackets syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-constant syntax-numeric syntax-js\">3</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span> <span class=\"syntax-keyword syntax-operator syntax-comparison syntax-js\">===</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>--new<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-support syntax-module syntax-node syntax-js\">url</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>Usage: nav.js &lt;url&gt; [--new]<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-constant syntax-character syntax-escape syntax-js\">\\n</span>Examples:<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>  nav.js https://example.com       # Navigate current tab<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>  nav.js https://example.com --new # Open in new tab<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-process syntax-js\">exit</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">b</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">puppeteer</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">connect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">browserURL</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>http://localhost:9222<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">defaultViewport</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">newTab</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">p</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">b</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">newPage</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">p</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">goto</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-support syntax-module syntax-node syntax-js\">url</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span> <span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">waitUntil</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>domcontentloaded<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span> <span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>✓ Opened:<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-support syntax-module syntax-node syntax-js\">url</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span> <span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">else</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">p</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">b</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">pages</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">at</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-arithmetic syntax-js\">-</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">p</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">goto</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-support syntax-module syntax-node syntax-js\">url</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span> <span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">waitUntil</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>domcontentloaded<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span> <span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>✓ Navigated to:<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-support syntax-module syntax-node syntax-js\">url</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">b</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">disconnect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span></span></code></pre>\n<h3>The Evaluate JavaScript Tool</h3>\n<p>The agent needs to execute JavaScript to read and modify the DOM of the active tab. The JavaScript it writes runs in the page context, so it doesn't have to fuck around with Puppeteer itself. All it needs to know is how to write code using the DOM API, and it sure knows how to do that:</p>\n<pre><code class=\"language-javascript\"><span class=\"code-snippet\" data-language=\"JavaScript\"><span class=\"syntax-source syntax-js\"><span class=\"syntax-comment syntax-line syntax-shebang syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">#!</span>/usr/bin/env node\n</span>\n<span class=\"syntax-meta syntax-import syntax-js\"><span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">import</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">puppeteer</span> <span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">from</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>puppeteer-core<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">code</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">argv</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">slice</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">2</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">join</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span> <span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">code</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>Usage: eval.js &#39;code&#39;<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-constant syntax-character syntax-escape syntax-js\">\\n</span>Examples:<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-single syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&#39;</span>  eval.js &quot;document.title&quot;<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&#39;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-single syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&#39;</span>  eval.js &quot;document.querySelectorAll(<span class=\"syntax-constant syntax-character syntax-escape syntax-js\">\\&#39;</span>a<span class=\"syntax-constant syntax-character syntax-escape syntax-js\">\\&#39;</span>).length&quot;<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&#39;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-process syntax-js\">exit</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">b</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">puppeteer</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">connect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">browserURL</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>http://localhost:9222<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">defaultViewport</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">p</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">b</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">pages</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">at</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-arithmetic syntax-js\">-</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">p</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">error</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>✗ No active tab found<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-process syntax-js\">exit</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">p</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">evaluate</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">c</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">AsyncFunction</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-storage syntax-type syntax-js\">async</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-variable syntax-language syntax-constructor syntax-js\">constructor</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">return</span> <span class=\"syntax-meta syntax-instance syntax-constructor syntax-js\"><span class=\"syntax-keyword syntax-operator syntax-word syntax-new syntax-js\">new</span><span class=\"syntax-meta syntax-function-call syntax-constructor syntax-js\"> <span class=\"syntax-variable syntax-type syntax-js\">AsyncFunction</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span>return (</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">c</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">)<span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">code</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Array</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">isArray</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-for syntax-js\"><span class=\"syntax-keyword syntax-control syntax-loop syntax-js\">for</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-storage syntax-type syntax-js\">let</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-constant syntax-numeric syntax-js\">0</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span> <span class=\"syntax-keyword syntax-operator syntax-relational syntax-js\">&lt;</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">result</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">length</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span><span class=\"syntax-keyword syntax-operator syntax-arithmetic syntax-js\">++</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span> <span class=\"syntax-keyword syntax-operator syntax-relational syntax-js\">&gt;</span> <span class=\"syntax-constant syntax-numeric syntax-js\">0</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> </span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t<span class=\"syntax-meta syntax-for syntax-js\"><span class=\"syntax-keyword syntax-control syntax-loop syntax-js\">for</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-meta syntax-sequence syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">key</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">value</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span> <span class=\"syntax-keyword syntax-operator syntax-js\">of</span> <span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Object</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">entries</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">result</span><span class=\"syntax-meta syntax-brackets syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">key</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">: </span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">value</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span> <span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">else if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-js\">typeof</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span> <span class=\"syntax-keyword syntax-operator syntax-comparison syntax-js\">===</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>object<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">&amp;&amp;</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span> <span class=\"syntax-keyword syntax-operator syntax-comparison syntax-js\">!==</span> <span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-for syntax-js\"><span class=\"syntax-keyword syntax-control syntax-loop syntax-js\">for</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-meta syntax-sequence syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">key</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">value</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span> <span class=\"syntax-keyword syntax-operator syntax-js\">of</span> <span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Object</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">entries</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">key</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">: </span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">value</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span> <span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">else</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">b</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">disconnect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span></span></code></pre>\n<h3>The Screenshot Tool</h3>\n<p>Sometimes the agent needs to have a visual impression of a page, so naturally we want a screenshot tool:</p>\n<pre><code class=\"language-javascript\"><span class=\"code-snippet\" data-language=\"JavaScript\"><span class=\"syntax-source syntax-js\"><span class=\"syntax-comment syntax-line syntax-shebang syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">#!</span>/usr/bin/env node\n</span>\n<span class=\"syntax-meta syntax-import syntax-js\"><span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">import</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">tmpdir</span> <span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span> <span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">from</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>node:os<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n<span class=\"syntax-meta syntax-import syntax-js\"><span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">import</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">join</span> <span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span> <span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">from</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>node:path<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n<span class=\"syntax-meta syntax-import syntax-js\"><span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">import</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">puppeteer</span> <span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">from</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>puppeteer-core<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">b</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">puppeteer</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">connect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">browserURL</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>http://localhost:9222<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">defaultViewport</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">p</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">b</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">pages</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">at</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-arithmetic syntax-js\">-</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">p</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">error</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>✗ No active tab found<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-process syntax-js\">exit</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">timestamp</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-instance syntax-constructor syntax-js\"><span class=\"syntax-keyword syntax-operator syntax-word syntax-new syntax-js\">new</span><span class=\"syntax-meta syntax-function-call syntax-constructor syntax-js\"> <span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Date</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">toISOString</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">replace</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-regexp syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">/</span><span class=\"syntax-constant syntax-other syntax-character-class syntax-set syntax-regexp\"><span class=\"syntax-punctuation syntax-definition syntax-character-class syntax-regexp\">[</span>:<span class=\"syntax-constant syntax-other syntax-character-class syntax-escape syntax-backslash syntax-regexp\">.</span><span class=\"syntax-punctuation syntax-definition syntax-character-class syntax-regexp\">]</span></span><span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">/</span><span class=\"syntax-keyword syntax-other syntax-js\">g</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>-<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">filename</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span>screenshot-</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">timestamp</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">.png<span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">filepath</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">join</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">tmpdir</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">filename</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">p</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">screenshot</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span> <span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">path</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">filepath</span> <span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">filepath</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">b</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">disconnect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span></span></code></pre>\n<p>This will take a screenshot of the current viewport of the active tab, write it to a .png file in a temporary directory, and output the file path to the agent, which can then turn around and read it in and use its vision capabilities to &quot;see&quot; the image.</p>\n<h2>The Benefits</h2>\n<p>So how does this compare to the MCP servers I mentioned above? Well, to start, I can pull in the README whenever I need it and don't pay for it in every session. This is very similar to Anthropic's recently introduced skills capabilities. Except it's even more ad hoc and works with any coding agent. All I need to do is instruct my agent to read the README file.</p>\n<p>Side note: many folks including myself have used this kind of setup before Anthropic released their skills system. You can see something similar in my <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://mariozechner.at/posts/2025-06-02-prompts-are-code/\">&quot;Prompts are Code&quot; blog post</a> or my little <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://sitegeist.ai\">sitegeist.ai</a>. <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://lucumr.pocoo.org/2025/8/18/code-mcps/\">Armin</a> has also touched on the power of Bash and code compared to MCPs previously. Anthropic's skills add progressive disclosure (love it) and they make them available to a non-technical audience across almost all their products (also love it).</p>\n<p>Speaking of the README, instead of pulling in 13,000 to 18,000 tokens like the MCP servers mentioned above, this README has a whopping 225 tokens. This efficiency comes from the fact that models know how to write code and use Bash. I'm conserving context space by relying heavily on their existing knowledge.</p>\n<p>These simple tools are also composable. Instead of reading the outputs of an invocation into the context, the agent can decide to save them to a file for later processing, either by itself or by code. The agent can also easily chain multiple invocations in a single Bash command.</p>\n<p>If I find that the output of a tool is not token efficient, I can just change the output format. Something that's hard or impossible to do depending on what MCP server you use.</p>\n<p>And it's ridiculously easy to add a new tool or modify an existing tool for my needs. Let me illustrate.</p>\n<h2>Adding the Pick Tool</h2>\n<p>When the agent and I try to come up with a scraping method for a specific site, it's often more efficient if I'm able to point out DOM elements to it directly by just clicking on them. To make this super easy, I can just build a picker. Here's what I add to the README:</p>\n<pre><code class=\"language-markdown\"><span class=\"code-snippet\" data-language=\"Markdown\"><span class=\"syntax-text syntax-html syntax-markdown\"><span class=\"syntax-meta syntax-block-level syntax-markdown\"><span class=\"syntax-markup syntax-heading syntax-2 syntax-markdown\"><span class=\"syntax-punctuation syntax-definition syntax-heading syntax-begin syntax-markdown\">##</span> </span><span class=\"syntax-markup syntax-heading syntax-2 syntax-markdown\"><span class=\"syntax-entity syntax-name syntax-section syntax-markdown\">Pick Elements</span><span class=\"syntax-meta syntax-whitespace syntax-newline syntax-markdown\">\n</span></span></span>\n<span class=\"syntax-meta syntax-paragraph syntax-markdown\"><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span>bash\n./pick.js &quot;Click the submit button&quot;\n<span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span><span class=\"syntax-constant syntax-character syntax-escape syntax-markdown\">\\`</span>\n\n</span><span class=\"syntax-meta syntax-paragraph syntax-markdown\">Interactive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish.\n</span></span></span></code></pre>\n<p>And here's the code:</p>\n<pre><code class=\"language-javascript\"><span class=\"code-snippet\" data-language=\"JavaScript\"><span class=\"syntax-source syntax-js\"><span class=\"syntax-comment syntax-line syntax-shebang syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">#!</span>/usr/bin/env node\n</span>\n<span class=\"syntax-meta syntax-import syntax-js\"><span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">import</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">puppeteer</span> <span class=\"syntax-keyword syntax-control syntax-import-export syntax-js\">from</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>puppeteer-core<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">message</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">argv</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">slice</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">2</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">join</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span> <span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">message</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>Usage: pick.js &#39;message&#39;<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-constant syntax-character syntax-escape syntax-js\">\\n</span>Example:<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-single syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&#39;</span>  pick.js &quot;Click the submit button&quot;<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&#39;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-process syntax-js\">exit</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">b</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">puppeteer</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">connect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">browserURL</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>http://localhost:9222<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">defaultViewport</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">p</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">b</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">pages</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">at</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-arithmetic syntax-js\">-</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">p</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">error</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>✗ No active tab found<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-process syntax-js\">process</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-process syntax-js\">exit</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">1</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-comment syntax-line syntax-double-slash syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-comment syntax-js\">//</span> Inject pick() helper into current page\n</span><span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">p</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">evaluate</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">window</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">pick</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t<span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-support syntax-class syntax-js\">window</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\"><span class=\"syntax-entity syntax-name syntax-function syntax-js\">pick</span></span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> </span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-storage syntax-type syntax-js\">async</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">message</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">message</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t<span class=\"syntax-keyword syntax-control syntax-trycatch syntax-js\">throw</span> <span class=\"syntax-meta syntax-instance syntax-constructor syntax-js\"><span class=\"syntax-keyword syntax-operator syntax-word syntax-new syntax-js\">new</span><span class=\"syntax-meta syntax-function-call syntax-constructor syntax-js\"> <span class=\"syntax-support syntax-class syntax-error syntax-js\">Error</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>pick() requires a message parameter<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\t\t\t<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">return</span> <span class=\"syntax-meta syntax-instance syntax-constructor syntax-js\"><span class=\"syntax-keyword syntax-operator syntax-word syntax-new syntax-js\">new</span><span class=\"syntax-meta syntax-function-call syntax-constructor syntax-js\"> <span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Promise</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">resolve</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">selections</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-sequence syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">selectedElements</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-instance syntax-constructor syntax-js\"><span class=\"syntax-keyword syntax-operator syntax-word syntax-new syntax-js\">new</span><span class=\"syntax-meta syntax-function-call syntax-constructor syntax-js\"> <span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Set</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">overlay</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-function syntax-dom syntax-js\">createElement</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>div<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">overlay</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">style</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">cssText</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span>\n\t\t\t\t\t<span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>position:fixed;top:0;left:0;width:100%;height:100%;z-index:2147483647;pointer-events:none<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">highlight</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-function syntax-dom syntax-js\">createElement</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>div<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">highlight</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">style</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">cssText</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span>\n\t\t\t\t\t<span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>position:absolute;border:2px solid #3b82f6;background:rgba(59,130,246,0.1);transition:all 0.1s<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">overlay</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-function syntax-dom syntax-js\">appendChild</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">highlight</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">banner</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-function syntax-dom syntax-js\">createElement</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>div<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">banner</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">style</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">cssText</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span>\n\t\t\t\t\t<span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>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<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\"><span class=\"syntax-entity syntax-name syntax-function syntax-js\">updateBanner</span></span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> </span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">banner</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">textContent</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">message</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\"> (</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-object syntax-js\">selections</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">length</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\"> selected, Cmd/Ctrl+click to add, Enter to finish, ESC to cancel)<span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">updateBanner</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">body</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">append</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">banner</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">overlay</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\"><span class=\"syntax-entity syntax-name syntax-function syntax-js\">cleanup</span></span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> </span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t<span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">removeEventListener</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>mousemove<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">onMove</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-constant syntax-language syntax-boolean syntax-true syntax-js\">true</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">removeEventListener</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>click<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">onClick</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-constant syntax-language syntax-boolean syntax-true syntax-js\">true</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">removeEventListener</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>keydown<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">onKey</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-constant syntax-language syntax-boolean syntax-true syntax-js\">true</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">overlay</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-function syntax-dom syntax-js\">remove</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">banner</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-function syntax-dom syntax-js\">remove</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">selectedElements</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">forEach</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">el</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">el</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">style</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">outline</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\"><span class=\"syntax-entity syntax-name syntax-function syntax-js\">onMove</span></span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> </span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">e</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">elementFromPoint</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">clientX</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">clientY</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">||</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">overlay</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">contains</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">||</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">banner</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">contains</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> </span><span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">return</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">r</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">el</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">getBoundingClientRect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">highlight</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">style</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">cssText</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span>position:absolute;border:2px solid #3b82f6;background:rgba(59,130,246,0.1);top:</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-object syntax-js\">r</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">top</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">px;left:</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-object syntax-js\">r</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">left</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">px;width:</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-object syntax-js\">r</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">width</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">px;height:</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-object syntax-js\">r</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">height</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">px<span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\"><span class=\"syntax-entity syntax-name syntax-function syntax-js\">buildElementInfo</span></span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> </span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">el</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">parents</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-sequence syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">let</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">current</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">el</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">parentElement</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-meta syntax-while syntax-js\"><span class=\"syntax-keyword syntax-control syntax-loop syntax-js\">while</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">current</span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">&amp;&amp;</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">current</span> <span class=\"syntax-keyword syntax-operator syntax-comparison syntax-js\">!==</span> <span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">body</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">parentInfo</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">current</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">tagName</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">toLowerCase</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">id</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">current</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">id</span> <span class=\"syntax-keyword syntax-operator syntax-ternary syntax-js\">?</span> <span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span>#</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-object syntax-js\">current</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">id</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span> <span class=\"syntax-keyword syntax-operator syntax-ternary syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">cls</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">current</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">className</span>\n\t\t\t\t\t\t\t<span class=\"syntax-keyword syntax-operator syntax-ternary syntax-js\">?</span> <span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span>.</span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-object syntax-js\">current</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">className</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">trim</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">split</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-regexp syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">/</span><span class=\"syntax-constant syntax-other syntax-character-class syntax-escape syntax-backslash syntax-regexp\">\\s</span><span class=\"syntax-keyword syntax-operator syntax-quantifier syntax-regexp\">+</span><span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">/</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">join</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>.<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span>\n\t\t\t\t\t\t\t<span class=\"syntax-keyword syntax-operator syntax-ternary syntax-js\">:</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">parents</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-function syntax-mutator syntax-js\">push</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">parentInfo</span> <span class=\"syntax-keyword syntax-operator syntax-arithmetic syntax-js\">+</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">id</span> <span class=\"syntax-keyword syntax-operator syntax-arithmetic syntax-js\">+</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">cls</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">current</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">current</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">parentElement</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n\t\t\t\t\t<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">return</span> <span class=\"syntax-meta syntax-object-literal syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">tag</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">el</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">tagName</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">toLowerCase</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">id</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">el</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">id</span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">||</span> <span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">class</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">el</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">className</span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">||</span> <span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">text</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">el</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">textContent</span><span class=\"syntax-keyword syntax-operator syntax-ternary syntax-js\">?</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">trim</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">slice</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">0</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-constant syntax-numeric syntax-js\">200</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">||</span> <span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">html</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">el</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">outerHTML</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">slice</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-numeric syntax-js\">0</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-constant syntax-numeric syntax-js\">500</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-object-literal syntax-key syntax-js\">parents</span><span class=\"syntax-punctuation syntax-separator syntax-key-value syntax-js\">:</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">parents</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">join</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span> &gt; <span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span>\n\t\t\t\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\"><span class=\"syntax-entity syntax-name syntax-function syntax-js\">onClick</span></span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> </span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">e</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">banner</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">contains</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">target</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> </span><span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">return</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">preventDefault</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">stopPropagation</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">elementFromPoint</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">clientX</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">clientY</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">||</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">overlay</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">contains</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">||</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">banner</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">contains</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> </span><span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">return</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t\t<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">metaKey</span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">||</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">ctrlKey</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">!</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">selectedElements</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">has</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">selectedElements</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-function syntax-dom syntax-js\">add</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">el</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">style</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">outline</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>3px solid #10b981<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">selections</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-function syntax-mutator syntax-js\">push</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">buildElementInfo</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t\t<span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">updateBanner</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\t\t\t\t\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span> <span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">else</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">cleanup</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">info</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">buildElementInfo</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">el</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">resolve</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">selections</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">length</span> <span class=\"syntax-keyword syntax-operator syntax-relational syntax-js\">&gt;</span> <span class=\"syntax-constant syntax-numeric syntax-js\">0</span> <span class=\"syntax-keyword syntax-operator syntax-ternary syntax-js\">?</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">selections</span> <span class=\"syntax-keyword syntax-operator syntax-ternary syntax-js\">:</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">info</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\t\t\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\"><span class=\"syntax-entity syntax-name syntax-function syntax-js\">onKey</span></span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> </span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">e</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">key</span> <span class=\"syntax-keyword syntax-operator syntax-comparison syntax-js\">===</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>Escape<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">preventDefault</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">cleanup</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">resolve</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span> <span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">else if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">key</span> <span class=\"syntax-keyword syntax-operator syntax-comparison syntax-js\">===</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>Enter<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">&amp;&amp;</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">selections</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">length</span> <span class=\"syntax-keyword syntax-operator syntax-relational syntax-js\">&gt;</span> <span class=\"syntax-constant syntax-numeric syntax-js\">0</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t\t\t\t<span class=\"syntax-variable syntax-other syntax-object syntax-js\">e</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">preventDefault</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">cleanup</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t\t<span class=\"syntax-meta syntax-function-call syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">resolve</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">selections</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\t\t\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n\t\t\t\t<span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">addEventListener</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>mousemove<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">onMove</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-constant syntax-language syntax-boolean syntax-true syntax-js\">true</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">addEventListener</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>click<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">onClick</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-constant syntax-language syntax-boolean syntax-true syntax-js\">true</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t\t<span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">document</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">addEventListener</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>keydown<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">onKey</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-constant syntax-language syntax-boolean syntax-true syntax-js\">true</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n<span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">p</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">evaluate</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-begin syntax-js\">(</span><span class=\"syntax-variable syntax-parameter syntax-function syntax-js\">msg</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-end syntax-js\">)</span><span class=\"syntax-meta syntax-function syntax-declaration syntax-js\"> </span><span class=\"syntax-storage syntax-type syntax-function syntax-arrow syntax-js\">=&gt;</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-dom syntax-js\">window</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">pick</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">msg</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span></span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">message</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\n<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Array</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">isArray</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-for syntax-js\"><span class=\"syntax-keyword syntax-control syntax-loop syntax-js\">for</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-storage syntax-type syntax-js\">let</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span> <span class=\"syntax-keyword syntax-operator syntax-assignment syntax-js\">=</span> <span class=\"syntax-constant syntax-numeric syntax-js\">0</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span> <span class=\"syntax-keyword syntax-operator syntax-relational syntax-js\">&lt;</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">result</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-property syntax-object syntax-js\">length</span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span><span class=\"syntax-keyword syntax-operator syntax-arithmetic syntax-js\">++</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t<span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span> <span class=\"syntax-keyword syntax-operator syntax-relational syntax-js\">&gt;</span> <span class=\"syntax-constant syntax-numeric syntax-js\">0</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> </span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span><span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t<span class=\"syntax-meta syntax-for syntax-js\"><span class=\"syntax-keyword syntax-control syntax-loop syntax-js\">for</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-meta syntax-sequence syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">key</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">value</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span> <span class=\"syntax-keyword syntax-operator syntax-js\">of</span> <span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Object</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">entries</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-object syntax-js\">result</span><span class=\"syntax-meta syntax-brackets syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">i</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">key</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">: </span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">value</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span> <span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">else if</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-keyword syntax-operator syntax-js\">typeof</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span> <span class=\"syntax-keyword syntax-operator syntax-comparison syntax-js\">===</span> <span class=\"syntax-string syntax-quoted syntax-double syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-js\">&quot;</span>object<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-js\">&quot;</span></span> <span class=\"syntax-keyword syntax-operator syntax-logical syntax-js\">&amp;&amp;</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span> <span class=\"syntax-keyword syntax-operator syntax-comparison syntax-js\">!==</span> <span class=\"syntax-constant syntax-language syntax-null syntax-js\">null</span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-for syntax-js\"><span class=\"syntax-keyword syntax-control syntax-loop syntax-js\">for</span> <span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-storage syntax-type syntax-js\">const</span> <span class=\"syntax-meta syntax-sequence syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">[</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">key</span><span class=\"syntax-punctuation syntax-separator syntax-comma syntax-js\">,</span> <span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">value</span><span class=\"syntax-punctuation syntax-section syntax-brackets syntax-js\">]</span></span> <span class=\"syntax-keyword syntax-operator syntax-js\">of</span> <span class=\"syntax-support syntax-class syntax-builtin syntax-js\">Object</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">entries</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-begin syntax-js\">`</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">key</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\">: </span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-begin syntax-js\">${</span></span><span class=\"syntax-meta syntax-template syntax-expression syntax-js\"><span class=\"syntax-source syntax-js syntax-embedded syntax-expression\"><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">value</span></span><span class=\"syntax-punctuation syntax-definition syntax-template-expression syntax-end syntax-js\">}</span></span><span class=\"syntax-string syntax-template syntax-js\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-template syntax-end syntax-js\">`</span></span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n\t</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span> <span class=\"syntax-meta syntax-conditional syntax-js\"><span class=\"syntax-keyword syntax-control syntax-conditional syntax-js\">else</span> <span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">{</span>\n\t<span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-support syntax-type syntax-object syntax-console syntax-js\">console</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-support syntax-function syntax-console syntax-js\">log</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-js\">result</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span><span class=\"syntax-meta syntax-block syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-block syntax-js\">}</span></span></span>\n\n<span class=\"syntax-keyword syntax-control syntax-flow syntax-js\">await</span> <span class=\"syntax-variable syntax-other syntax-object syntax-js\">b</span><span class=\"syntax-punctuation syntax-accessor syntax-js\">.</span><span class=\"syntax-meta syntax-function-call syntax-method syntax-js\"><span class=\"syntax-variable syntax-function syntax-js\">disconnect</span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">(</span></span><span class=\"syntax-meta syntax-group syntax-js\"><span class=\"syntax-punctuation syntax-section syntax-group syntax-js\">)</span></span></span><span class=\"syntax-punctuation syntax-terminator syntax-statement syntax-js\">;</span>\n</span></span></code></pre>\n<p>Whenever I think it's faster for me to just click on a bunch of DOM elements instead of having the agent figure out the DOM structure, I can just tell it to use the pick tool. It's super efficient and allows me to build scrapers in no time. It's also fantastic to adjust the scraper if the DOM layout of a site changed.</p>\n<p>If you're having trouble following what this tool does, worry not, I will have a video at the end of the blog post where you can see it in action. Before we look at that, let me show you an additional tool.</p>\n<h2>Adding the Cookies Tool</h2>\n<p>During one of my recent scraping adventures, I had a need for HTTP-only cookies of that site, so the deterministic scraper could pretend it's me. The Evaluate JavaScript tool cannot handle this as it executes in the page context. But it took not even a minute for me to instruct Claude to create that tool, add it to the readme, and away we went.</p>\n<p><picture class=\"article-picture article-picture-fallback\" style=\"--image-ratio:16 / 9\"><img src=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp/media/extension.png\" alt=\"\" loading=\"lazy\" decoding=\"async\" fetchpriority=\"low\" referrerpolicy=\"no-referrer\" class=\"progressive-image\"></picture></p>\n<p>This is so much easier than adjusting, testing, and debugging an existing MCP server.</p>\n<h2>A Contrived Example</h2>\n<p>Let me illustrate usage of this set of tools with a contrived example. I set out to build a simple Hacker News scraper where I basically pick the DOM elements for the agent, based on which it can then write a minimal Node.js scraper. Here's how that looks in action. I sped up a few sections where Claude was its usual slow self.</p>\n<p>Real world scraping tasks would look a bit more involved. Also, there's no point in doing it like this for such a simple site like Hacker News. But you get the idea.</p>\n<p>Final token tally:</p>\n<p><picture class=\"article-picture article-picture-fallback\" style=\"--image-ratio:16 / 9\"><img src=\"https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp/media/scrape-tokens.png\" alt=\"\" loading=\"lazy\" decoding=\"async\" fetchpriority=\"low\" referrerpolicy=\"no-referrer\" class=\"progressive-image\"></picture></p>\n<h2>Making This Reusable Across Agents</h2>\n<p>Here's how I've set things up so I can use this with Claude Code and other agents. I have a folder <code>agent-tools</code> in my home directory. I then clone the repositories of individual tools, like the browser tools repository above, into that folder. Then I set up an alias:</p>\n<pre><code class=\"language-bash\"><span class=\"code-snippet\" data-language=\"Shell\"><span class=\"syntax-source syntax-shell syntax-bash\"><span class=\"syntax-meta syntax-function-call syntax-shell\"><span class=\"syntax-support syntax-function syntax-alias syntax-shell\">alias</span> <span class=\"syntax-entity syntax-name syntax-function syntax-alias syntax-shell\">cl</span><span class=\"syntax-keyword syntax-operator syntax-assignment syntax-shell\">=</span><span class=\"syntax-string syntax-unquoted syntax-shell\"><span class=\"syntax-string syntax-quoted syntax-double syntax-shell\"><span class=\"syntax-punctuation syntax-definition syntax-string syntax-begin syntax-shell\">&quot;</span>PATH=<span class=\"syntax-meta syntax-group syntax-expansion syntax-parameter syntax-shell\"><span class=\"syntax-punctuation syntax-definition syntax-variable syntax-shell\">$</span><span class=\"syntax-variable syntax-other syntax-readwrite syntax-shell\">PATH</span></span>:/Users/badlogic/agent-tools/browser-tools:&lt;other-tool-dirs&gt; &amp;&amp; claude --dangerously-skip-permissions<span class=\"syntax-punctuation syntax-definition syntax-string syntax-end syntax-shell\">&quot;</span></span></span></span>\n</span></span></code></pre>\n<p>This way all of the scripts are available to sessions of Claude, but don't pollute my normal environment. I also prefix each script with the full tool name, e.g. <code>browser-tools-start.js</code>, to eliminate name collisions. I also add a single sentence to the README telling the agent that all the scripts are globally available. This way, the agent doesn't have to change its working directory just to call a tool script, saving a few tokens here and there, and reducing the chances of the agent getting confused by the constant working directory changes.</p>\n<p>Finally, I add the agent tools directory as a working directory to Claude Code via <code>/add-dir</code>, so I can use <code>@README.md</code> to reference a specific tool's README file and get it into the agent's context. I prefer this to Anthropic's skill auto-discovery, which I found to not work reliably in practice. It also means I save a few more tokens: Claude Code injects all the frontmatter of all skills it can find into the system prompt (or first user message, I forgot, see <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://cchistory.mariozechner.at\">https://cchistory.mariozechner.at</a>)</p>\n<h2>In Conclusion</h2>\n<p>Building these tools is ridiculously easy, gives you all the freedom you need, and makes you, your agent, and your token usage efficient. You can find the browser tools on <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://github.com/badlogic/browser-tools\">GitHub</a>.</p>\n<p>This general principle can apply to any kind of harness that has some kind of code execution environment. Think outside the MCP box and you'll find that this is much more powerful than the more rigid structure you have to follow with MCP.</p>\n<p>With great power comes great responsibility though. You will have to come up with a structure for how you build and maintain those tools yourself. Anthropic's skill system can be one way to do it, though that's less transferable to other agents. Or you follow my setup above.</p>\n<p>This page respects your privacy by not using cookies or similar technologies and by not collecting any personally identifiable information.</p>\n",
  "content_markdown": "![](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp/media/header.png)\\\nOne chonky MCP server\n\n- [My Browser DevTools Use Cases](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_0)\n- [Problems with Common Browser DevTools for Your Agent](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_1)\n- [Embracing Bash (and Code)](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_2)\n  - [The Start Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_3)\n  - [The Navigate Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_4)\n  - [The Evaluate JavaScript Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_5)\n  - [The Screenshot Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_6)\n- [The Benefits](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_7)\n- [Adding the Pick Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_8)\n- [Adding the Cookies Tool](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_9)\n- [A Contrived Example](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_10)\n- [Making This Reusable Across Agents](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_11)\n- [In Conclusion](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp#toc_12)\n\nAfter months of agentic coding frenzy, Twitter is still ablaze with discussions about MCP servers. I previously did some [very light benchmarking](https://mariozechner.at/posts/2025-08-15-mcp-vs-cli/) to see if Bash tools or MCP servers are better suited for a specific task. The TL;DR: both can be efficient if you take care.\n\nUnfortunately, many of the most popular MCP servers are inefficient for a specific task. They need to cover all bases, which means they provide large numbers of tools with lengthy descriptions, consuming significant context.\n\nIt's also hard to extend an existing MCP server. You could check out the source and modify it, but then you'd have to understand the codebase, together with your agent.\n\nMCP servers also aren't composable. Results returned by an MCP server have to go through the agent's context to be persisted to disk or combined with other results.\n\nI'm a simple boy, so I like simple things. Agents can run Bash and write code well. Bash and code are composable. So what's simpler than having your agent just invoke CLI tools and write code? This is nothing new. We've all been doing this since the beginning. I'd just like to convince you that in many situations, you don't need or even want an MCP server.\n\nLet me illustrate this with a common MCP server use case: browser dev tools.\n\n## My Browser DevTools Use Cases\n\nMy use cases are working on web frontends together with my agent, or abusing my agent to become a scrapey little hacker boy so I can scrape all the data in the world. For these two use cases, I only need a minimal set of tools:\n\n- Start the browser, optionally with my default profile so I'm logged in\n- Navigate to a URL, either in the active tab or a new tab\n- Execute JavaScript in the active page context\n- Take a screenshot of the viewport\n\nAnd if my use case requires additional special tooling, I want to quickly have my agent generate that for me and slot it in with the other tools.\n\n## Problems with Common Browser DevTools for Your Agent\n\nPeople will recommend [Playwright MCP](https://github.com/microsoft/playwright-mcp) or [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) for the use cases I illustrated above. Both are fine, but they need to cover all the bases. Playwright MCP has 21 tools using 13.7k tokens (6.8% of Claude's context). Chrome DevTools MCP has 26 tools using 18.0k tokens (9.0%). That many tools will confuse your agent, especially when combined with other MCP servers and built-in tools.\n\nUsing those tools also means you suffer from the composability issue: any output has to go through your agent's context. You can kind of fix this by using sub-agents, but then you rope in all the issues that sub-agents come with.\n\n## Embracing Bash (and Code)\n\nHere's my minimal set of tools, illustrated via the README.md:\n\n```markdown\n# Browser Tools\n\nMinimal CDP tools for collaborative site exploration.\n\n## Start Chrome\n\n\\`\\`\\`bash\n./start.js              # Fresh profile\n./start.js --profile    # Copy your profile (cookies, logins)\n\\`\\`\\`\n\nStart Chrome on `:9222` with remote debugging.\n\n## Navigate\n\n\\`\\`\\`bash\n./nav.js https://example.com\n./nav.js https://example.com --new\n\\`\\`\\`\n\nNavigate current tab or open new tab.\n\n## Evaluate JavaScript\n\n\\`\\`\\`bash\n./eval.js 'document.title'\n./eval.js 'document.querySelectorAll(\"a\").length'\n\\`\\`\\`\n\nExecute JavaScript in active tab (async context).\n\n## Screenshot\n\n\\`\\`\\`bash\n./screenshot.js\n\\`\\`\\`\n\nScreenshot current viewport, returns temp file path.\n```\n\nThis is all I feed to my agent. It's a handful of tools that cover all the bases for my use case. Each tool is a simple Node.js script that uses [Puppeteer Core](https://pptr.dev/). By reading that README, the agent knows the available tools, when to use them, and how to use them via Bash.\n\nWhen I start a session where the agent needs to interact with a browser, I just tell it to read that file in full and that's all it needs to be effective. Let's walk through their implementations to see how little code this actually is.\n\n### The Start Tool\n\nThe agent needs to be able to start a new browser session. For scraping tasks, I often want to use my actual Chrome profile so I'm logged in everywhere. This script either rsyncs my Chrome profile to a temporary folder (Chrome doesn't allow debugging on the default profile), or starts fresh:\n\n```javascript\n#!/usr/bin/env node\n\nimport { spawn, execSync } from \"node:child_process\";\nimport puppeteer from \"puppeteer-core\";\n\nconst useProfile = process.argv[2] === \"--profile\";\n\nif (process.argv[2] && process.argv[2] !== \"--profile\") {\n\tconsole.log(\"Usage: start.ts [--profile]\");\n\tconsole.log(\"\\nOptions:\");\n\tconsole.log(\"  --profile  Copy your default Chrome profile (cookies, logins)\");\n\tconsole.log(\"\\nExamples:\");\n\tconsole.log(\"  start.ts            # Start with fresh profile\");\n\tconsole.log(\"  start.ts --profile  # Start with your Chrome profile\");\n\tprocess.exit(1);\n}\n\n// Kill existing Chrome\ntry {\n\texecSync(\"killall 'Google Chrome'\", { stdio: \"ignore\" });\n} catch {}\n\n// Wait a bit for processes to fully die\nawait new Promise((r) => setTimeout(r, 1000));\n\n// Setup profile directory\nexecSync(\"mkdir -p ~/.cache/scraping\", { stdio: \"ignore\" });\n\nif (useProfile) {\n\t// Sync profile with rsync (much faster on subsequent runs)\n\texecSync(\n\t\t'rsync -a --delete \"/Users/badlogic/Library/Application Support/Google/Chrome/\" ~/.cache/scraping/',\n\t\t{ stdio: \"pipe\" },\n\t);\n}\n\n// Start Chrome in background (detached so Node can exit)\nspawn(\n\t\"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome\",\n\t[\"--remote-debugging-port=9222\", `--user-data-dir=${process.env[\"HOME\"]}/.cache/scraping`],\n\t{ detached: true, stdio: \"ignore\" },\n).unref();\n\n// Wait for Chrome to be ready by attempting to connect\nlet connected = false;\nfor (let i = 0; i < 30; i++) {\n\ttry {\n\t\tconst browser = await puppeteer.connect({\n\t\t\tbrowserURL: \"http://localhost:9222\",\n\t\t\tdefaultViewport: null,\n\t\t});\n\t\tawait browser.disconnect();\n\t\tconnected = true;\n\t\tbreak;\n\t} catch {\n\t\tawait new Promise((r) => setTimeout(r, 500));\n\t}\n}\n\nif (!connected) {\n\tconsole.error(\"✗ Failed to connect to Chrome\");\n\tprocess.exit(1);\n}\n\nconsole.log(`✓ Chrome started on :9222${useProfile ? \" with your profile\" : \"\"}`);\n```\n\nAll the agent needs to know is to use Bash to run the start.js script, either with `--profile` or without.\n\n### The Navigate Tool\n\nOnce the browser is running, the agent needs to navigate to URLs, either in a new tab or the active tab. That's exactly what the navigate tool provides:\n\n```javascript\n#!/usr/bin/env node\n\nimport puppeteer from \"puppeteer-core\";\n\nconst url = process.argv[2];\nconst newTab = process.argv[3] === \"--new\";\n\nif (!url) {\n\tconsole.log(\"Usage: nav.js <url> [--new]\");\n\tconsole.log(\"\\nExamples:\");\n\tconsole.log(\"  nav.js https://example.com       # Navigate current tab\");\n\tconsole.log(\"  nav.js https://example.com --new # Open in new tab\");\n\tprocess.exit(1);\n}\n\nconst b = await puppeteer.connect({\n\tbrowserURL: \"http://localhost:9222\",\n\tdefaultViewport: null,\n});\n\nif (newTab) {\n\tconst p = await b.newPage();\n\tawait p.goto(url, { waitUntil: \"domcontentloaded\" });\n\tconsole.log(\"✓ Opened:\", url);\n} else {\n\tconst p = (await b.pages()).at(-1);\n\tawait p.goto(url, { waitUntil: \"domcontentloaded\" });\n\tconsole.log(\"✓ Navigated to:\", url);\n}\n\nawait b.disconnect();\n```\n\n### The Evaluate JavaScript Tool\n\nThe agent needs to execute JavaScript to read and modify the DOM of the active tab. The JavaScript it writes runs in the page context, so it doesn't have to fuck around with Puppeteer itself. All it needs to know is how to write code using the DOM API, and it sure knows how to do that:\n\n```javascript\n#!/usr/bin/env node\n\nimport puppeteer from \"puppeteer-core\";\n\nconst code = process.argv.slice(2).join(\" \");\nif (!code) {\n\tconsole.log(\"Usage: eval.js 'code'\");\n\tconsole.log(\"\\nExamples:\");\n\tconsole.log('  eval.js \"document.title\"');\n\tconsole.log('  eval.js \"document.querySelectorAll(\\'a\\').length\"');\n\tprocess.exit(1);\n}\n\nconst b = await puppeteer.connect({\n\tbrowserURL: \"http://localhost:9222\",\n\tdefaultViewport: null,\n});\n\nconst p = (await b.pages()).at(-1);\n\nif (!p) {\n\tconsole.error(\"✗ No active tab found\");\n\tprocess.exit(1);\n}\n\nconst result = await p.evaluate((c) => {\n\tconst AsyncFunction = (async () => {}).constructor;\n\treturn new AsyncFunction(`return (${c})`)();\n}, code);\n\nif (Array.isArray(result)) {\n\tfor (let i = 0; i < result.length; i++) {\n\t\tif (i > 0) console.log(\"\");\n\t\tfor (const [key, value] of Object.entries(result[i])) {\n\t\t\tconsole.log(`${key}: ${value}`);\n\t\t}\n\t}\n} else if (typeof result === \"object\" && result !== null) {\n\tfor (const [key, value] of Object.entries(result)) {\n\t\tconsole.log(`${key}: ${value}`);\n\t}\n} else {\n\tconsole.log(result);\n}\n\nawait b.disconnect();\n```\n\n### The Screenshot Tool\n\nSometimes the agent needs to have a visual impression of a page, so naturally we want a screenshot tool:\n\n```javascript\n#!/usr/bin/env node\n\nimport { tmpdir } from \"node:os\";\nimport { join } from \"node:path\";\nimport puppeteer from \"puppeteer-core\";\n\nconst b = await puppeteer.connect({\n\tbrowserURL: \"http://localhost:9222\",\n\tdefaultViewport: null,\n});\n\nconst p = (await b.pages()).at(-1);\n\nif (!p) {\n\tconsole.error(\"✗ No active tab found\");\n\tprocess.exit(1);\n}\n\nconst timestamp = new Date().toISOString().replace(/[:.]/g, \"-\");\nconst filename = `screenshot-${timestamp}.png`;\nconst filepath = join(tmpdir(), filename);\n\nawait p.screenshot({ path: filepath });\n\nconsole.log(filepath);\n\nawait b.disconnect();\n```\n\nThis will take a screenshot of the current viewport of the active tab, write it to a .png file in a temporary directory, and output the file path to the agent, which can then turn around and read it in and use its vision capabilities to \"see\" the image.\n\n## The Benefits\n\nSo how does this compare to the MCP servers I mentioned above? Well, to start, I can pull in the README whenever I need it and don't pay for it in every session. This is very similar to Anthropic's recently introduced skills capabilities. Except it's even more ad hoc and works with any coding agent. All I need to do is instruct my agent to read the README file.\n\nSide note: many folks including myself have used this kind of setup before Anthropic released their skills system. You can see something similar in my [\"Prompts are Code\" blog post](https://mariozechner.at/posts/2025-06-02-prompts-are-code/) or my little [sitegeist.ai](https://sitegeist.ai). [Armin](https://lucumr.pocoo.org/2025/8/18/code-mcps/) has also touched on the power of Bash and code compared to MCPs previously. Anthropic's skills add progressive disclosure (love it) and they make them available to a non-technical audience across almost all their products (also love it).\n\nSpeaking of the README, instead of pulling in 13,000 to 18,000 tokens like the MCP servers mentioned above, this README has a whopping 225 tokens. This efficiency comes from the fact that models know how to write code and use Bash. I'm conserving context space by relying heavily on their existing knowledge.\n\nThese simple tools are also composable. Instead of reading the outputs of an invocation into the context, the agent can decide to save them to a file for later processing, either by itself or by code. The agent can also easily chain multiple invocations in a single Bash command.\n\nIf I find that the output of a tool is not token efficient, I can just change the output format. Something that's hard or impossible to do depending on what MCP server you use.\n\nAnd it's ridiculously easy to add a new tool or modify an existing tool for my needs. Let me illustrate.\n\n## Adding the Pick Tool\n\nWhen the agent and I try to come up with a scraping method for a specific site, it's often more efficient if I'm able to point out DOM elements to it directly by just clicking on them. To make this super easy, I can just build a picker. Here's what I add to the README:\n\n```markdown\n## Pick Elements\n\n\\`\\`\\`bash\n./pick.js \"Click the submit button\"\n\\`\\`\\`\n\nInteractive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish.\n```\n\nAnd here's the code:\n\n```javascript\n#!/usr/bin/env node\n\nimport puppeteer from \"puppeteer-core\";\n\nconst message = process.argv.slice(2).join(\" \");\nif (!message) {\n\tconsole.log(\"Usage: pick.js 'message'\");\n\tconsole.log(\"\\nExample:\");\n\tconsole.log('  pick.js \"Click the submit button\"');\n\tprocess.exit(1);\n}\n\nconst b = await puppeteer.connect({\n\tbrowserURL: \"http://localhost:9222\",\n\tdefaultViewport: null,\n});\n\nconst p = (await b.pages()).at(-1);\n\nif (!p) {\n\tconsole.error(\"✗ No active tab found\");\n\tprocess.exit(1);\n}\n\n// Inject pick() helper into current page\nawait p.evaluate(() => {\n\tif (!window.pick) {\n\t\twindow.pick = async (message) => {\n\t\t\tif (!message) {\n\t\t\t\tthrow new Error(\"pick() requires a message parameter\");\n\t\t\t}\n\t\t\treturn new Promise((resolve) => {\n\t\t\t\tconst selections = [];\n\t\t\t\tconst selectedElements = new Set();\n\n\t\t\t\tconst overlay = document.createElement(\"div\");\n\t\t\t\toverlay.style.cssText =\n\t\t\t\t\t\"position:fixed;top:0;left:0;width:100%;height:100%;z-index:2147483647;pointer-events:none\";\n\n\t\t\t\tconst highlight = document.createElement(\"div\");\n\t\t\t\thighlight.style.cssText =\n\t\t\t\t\t\"position:absolute;border:2px solid #3b82f6;background:rgba(59,130,246,0.1);transition:all 0.1s\";\n\t\t\t\toverlay.appendChild(highlight);\n\n\t\t\t\tconst banner = document.createElement(\"div\");\n\t\t\t\tbanner.style.cssText =\n\t\t\t\t\t\"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\";\n\n\t\t\t\tconst updateBanner = () => {\n\t\t\t\t\tbanner.textContent = `${message} (${selections.length} selected, Cmd/Ctrl+click to add, Enter to finish, ESC to cancel)`;\n\t\t\t\t};\n\t\t\t\tupdateBanner();\n\n\t\t\t\tdocument.body.append(banner, overlay);\n\n\t\t\t\tconst cleanup = () => {\n\t\t\t\t\tdocument.removeEventListener(\"mousemove\", onMove, true);\n\t\t\t\t\tdocument.removeEventListener(\"click\", onClick, true);\n\t\t\t\t\tdocument.removeEventListener(\"keydown\", onKey, true);\n\t\t\t\t\toverlay.remove();\n\t\t\t\t\tbanner.remove();\n\t\t\t\t\tselectedElements.forEach((el) => {\n\t\t\t\t\t\tel.style.outline = \"\";\n\t\t\t\t\t});\n\t\t\t\t};\n\n\t\t\t\tconst onMove = (e) => {\n\t\t\t\t\tconst el = document.elementFromPoint(e.clientX, e.clientY);\n\t\t\t\t\tif (!el || overlay.contains(el) || banner.contains(el)) return;\n\t\t\t\t\tconst r = el.getBoundingClientRect();\n\t\t\t\t\thighlight.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`;\n\t\t\t\t};\n\n\t\t\t\tconst buildElementInfo = (el) => {\n\t\t\t\t\tconst parents = [];\n\t\t\t\t\tlet current = el.parentElement;\n\t\t\t\t\twhile (current && current !== document.body) {\n\t\t\t\t\t\tconst parentInfo = current.tagName.toLowerCase();\n\t\t\t\t\t\tconst id = current.id ? `#${current.id}` : \"\";\n\t\t\t\t\t\tconst cls = current.className\n\t\t\t\t\t\t\t? `.${current.className.trim().split(/\\s+/).join(\".\")}`\n\t\t\t\t\t\t\t: \"\";\n\t\t\t\t\t\tparents.push(parentInfo + id + cls);\n\t\t\t\t\t\tcurrent = current.parentElement;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\ttag: el.tagName.toLowerCase(),\n\t\t\t\t\t\tid: el.id || null,\n\t\t\t\t\t\tclass: el.className || null,\n\t\t\t\t\t\ttext: el.textContent?.trim().slice(0, 200) || null,\n\t\t\t\t\t\thtml: el.outerHTML.slice(0, 500),\n\t\t\t\t\t\tparents: parents.join(\" > \"),\n\t\t\t\t\t};\n\t\t\t\t};\n\n\t\t\t\tconst onClick = (e) => {\n\t\t\t\t\tif (banner.contains(e.target)) return;\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\tconst el = document.elementFromPoint(e.clientX, e.clientY);\n\t\t\t\t\tif (!el || overlay.contains(el) || banner.contains(el)) return;\n\n\t\t\t\t\tif (e.metaKey || e.ctrlKey) {\n\t\t\t\t\t\tif (!selectedElements.has(el)) {\n\t\t\t\t\t\t\tselectedElements.add(el);\n\t\t\t\t\t\t\tel.style.outline = \"3px solid #10b981\";\n\t\t\t\t\t\t\tselections.push(buildElementInfo(el));\n\t\t\t\t\t\t\tupdateBanner();\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tcleanup();\n\t\t\t\t\t\tconst info = buildElementInfo(el);\n\t\t\t\t\t\tresolve(selections.length > 0 ? selections : info);\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tconst onKey = (e) => {\n\t\t\t\t\tif (e.key === \"Escape\") {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tcleanup();\n\t\t\t\t\t\tresolve(null);\n\t\t\t\t\t} else if (e.key === \"Enter\" && selections.length > 0) {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\tcleanup();\n\t\t\t\t\t\tresolve(selections);\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\tdocument.addEventListener(\"mousemove\", onMove, true);\n\t\t\t\tdocument.addEventListener(\"click\", onClick, true);\n\t\t\t\tdocument.addEventListener(\"keydown\", onKey, true);\n\t\t\t});\n\t\t};\n\t}\n});\n\nconst result = await p.evaluate((msg) => window.pick(msg), message);\n\nif (Array.isArray(result)) {\n\tfor (let i = 0; i < result.length; i++) {\n\t\tif (i > 0) console.log(\"\");\n\t\tfor (const [key, value] of Object.entries(result[i])) {\n\t\t\tconsole.log(`${key}: ${value}`);\n\t\t}\n\t}\n} else if (typeof result === \"object\" && result !== null) {\n\tfor (const [key, value] of Object.entries(result)) {\n\t\tconsole.log(`${key}: ${value}`);\n\t}\n} else {\n\tconsole.log(result);\n}\n\nawait b.disconnect();\n```\n\nWhenever I think it's faster for me to just click on a bunch of DOM elements instead of having the agent figure out the DOM structure, I can just tell it to use the pick tool. It's super efficient and allows me to build scrapers in no time. It's also fantastic to adjust the scraper if the DOM layout of a site changed.\n\nIf you're having trouble following what this tool does, worry not, I will have a video at the end of the blog post where you can see it in action. Before we look at that, let me show you an additional tool.\n\n## Adding the Cookies Tool\n\nDuring one of my recent scraping adventures, I had a need for HTTP-only cookies of that site, so the deterministic scraper could pretend it's me. The Evaluate JavaScript tool cannot handle this as it executes in the page context. But it took not even a minute for me to instruct Claude to create that tool, add it to the readme, and away we went.\n\n![](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp/media/extension.png)\n\nThis is so much easier than adjusting, testing, and debugging an existing MCP server.\n\n## A Contrived Example\n\nLet me illustrate usage of this set of tools with a contrived example. I set out to build a simple Hacker News scraper where I basically pick the DOM elements for the agent, based on which it can then write a minimal Node.js scraper. Here's how that looks in action. I sped up a few sections where Claude was its usual slow self.\n\nReal world scraping tasks would look a bit more involved. Also, there's no point in doing it like this for such a simple site like Hacker News. But you get the idea.\n\nFinal token tally:\n\n![](https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp/media/scrape-tokens.png)\n\n## Making This Reusable Across Agents\n\nHere's how I've set things up so I can use this with Claude Code and other agents. I have a folder `agent-tools` in my home directory. I then clone the repositories of individual tools, like the browser tools repository above, into that folder. Then I set up an alias:\n\n```bash\nalias cl=\"PATH=$PATH:/Users/badlogic/agent-tools/browser-tools:<other-tool-dirs> && claude --dangerously-skip-permissions\"\n```\n\nThis way all of the scripts are available to sessions of Claude, but don't pollute my normal environment. I also prefix each script with the full tool name, e.g. `browser-tools-start.js`, to eliminate name collisions. I also add a single sentence to the README telling the agent that all the scripts are globally available. This way, the agent doesn't have to change its working directory just to call a tool script, saving a few tokens here and there, and reducing the chances of the agent getting confused by the constant working directory changes.\n\nFinally, I add the agent tools directory as a working directory to Claude Code via `/add-dir`, so I can use `@README.md` to reference a specific tool's README file and get it into the agent's context. I prefer this to Anthropic's skill auto-discovery, which I found to not work reliably in practice. It also means I save a few more tokens: Claude Code injects all the frontmatter of all skills it can find into the system prompt (or first user message, I forgot, see [https://cchistory.mariozechner.at](https://cchistory.mariozechner.at))\n\n## In Conclusion\n\nBuilding these tools is ridiculously easy, gives you all the freedom you need, and makes you, your agent, and your token usage efficient. You can find the browser tools on [GitHub](https://github.com/badlogic/browser-tools).\n\nThis general principle can apply to any kind of harness that has some kind of code execution environment. Think outside the MCP box and you'll find that this is much more powerful than the more rigid structure you have to follow with MCP.\n\nWith great power comes great responsibility though. You will have to come up with a structure for how you build and maintain those tools yourself. Anthropic's skill system can be one way to do it, though that's less transferable to other agents. Or you follow my setup above.\n\nThis page respects your privacy by not using cookies or similar technologies and by not collecting any personally identifiable information.\n",
  "dateCreated": "2026-09-27T19:29:15.293681927+00:00",
  "date_created": "2025-11-02T00:00:00+00:00",
  "date_modified": "2025-11-02T00:00:00+00:00",
  "date_published": "2025-11-02T00:00:00+00:00",
  "description": "Got Bash and some code interpreter? Skip MCP.",
  "external_url": "https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp",
  "git": {
    "commit": "ebb0941c5c06a2ab2377342d607535262a3e969e",
    "path": "items/mariozechner-at/2025/11/2025-11-02-what-if-you-don-t-need-mcp-at-all.md",
    "permalink": "https://github.com/aymericbeaumet/aggr-instance/blob/ebb0941c5c06a2ab2377342d607535262a3e969e/items/mariozechner-at/2025/11/2025-11-02-what-if-you-don-t-need-mcp-at-all.md"
  },
  "id": "urn:aggr:item:e69ef5915e41191563b43c42bcaf938c68ab3321",
  "isBasedOn": {
    "@id": "https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp"
  },
  "mainEntity": {
    "@id": "https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp",
    "@type": "CreativeWork",
    "archivedAt": {
      "@id": "https://aggr.aymericbeaumet.com/items/mariozechner-at/2025-11-02-what-if-you-don-t-need-mcp-at-all/#webpage"
    },
    "dateModified": "2025-11-02T00:00:00+00:00",
    "datePublished": "2025-11-02T00:00:00+00:00",
    "headline": "What if you don't need MCP at all?",
    "timeRequired": "PT13M",
    "url": "https://mariozechner.at/posts/2025-11-02-what-if-you-dont-need-mcp",
    "wordCount": 2919
  },
  "name": "Archived snapshot: What if you don't need MCP at all?",
  "preview": null,
  "reading_minutes": 13,
  "replicated_at": null,
  "source": "mariozechner-at",
  "source_name": "{ Mario Zechner }",
  "summary": "Got Bash and some code interpreter? Skip MCP.",
  "tags": [],
  "temporalCoverage": "2026-09-27T19:29:15.293681927+00:00",
  "title": "What if you don't need MCP at all?",
  "url": "https://aggr.aymericbeaumet.com/items/mariozechner-at/2025-11-02-what-if-you-don-t-need-mcp-at-all/",
  "word_count": 2919
}