@bewa/cdp-cli 0.1.0

package/AGENT.md

@@ -0,0 +1,97 @@
+# cdp-cli — AI Assistant Usage Guide
+
+You have access to `cdp-cli`, a CLI tool for interacting with browsers via Chrome DevTools Protocol. Use it to inspect pages, evaluate JS, and diagnose DOM issues during development.
+
+## Commands
+
+```bash
+cdp-cli launch                      # Start browser (auto-detects Chrome/Canary/Chromium)
+cdp-cli launch --extension ./ext    # Start with Chrome extension loaded
+cdp-cli targets                     # List open pages (get target IDs)
+cdp-cli eval <id> "<js>"            # Evaluate JS in page (async auto-awaited)
+cdp-cli eval-file <id> script.js    # Evaluate JS file in page
+cdp-cli reload [id]                 # Reload tab(s) after code changes
+cdp-cli navigate <id> <url>         # Navigate tab to URL
+```
+
+Target IDs are 8-char hex strings from `targets` output. Prefix match with minimum 4 chars.
+
+All output is JSON (one object per line). Errors go to stderr as `{"error":"..."}`.
+
+## When to Use
+
+- **DOM debugging**: content scripts can't find elements, selectors don't match, content is empty
+- **Lazy loading / virtualization**: elements exist but have no rendered content until scrolled into view
+- **Verifying code changes**: reload page and re-evaluate after editing content scripts
+- **Page inspection**: check what's actually in the DOM vs what you expect
+
+## Typical Debug Loop
+
+```bash
+cdp-cli launch                          # 1. Start browser
+# User opens the target page
+cdp-cli targets                         # 2. Find target ID
+cdp-cli eval 8FEE "document.querySelectorAll('.item').length"  # 3. Diagnose
+# Edit code
+cdp-cli reload 8FEE                     # 4. Reload
+cdp-cli eval 8FEE "document.querySelectorAll('.item').length"  # 5. Verify
+```
+
+## Diagnostic Patterns
+
+### Check if elements exist but have empty content (DOM virtualization)
+
+```bash
+cdp-cli eval <id> "
+(() => {
+  const items = document.querySelectorAll('<selector>');
+  return JSON.stringify(Array.from(items).map((el, i) => ({
+    i, hasText: !!el.innerText.trim(), text: el.innerText.substring(0, 80)
+  })));
+})()"
+```
+
+If elements exist with empty text, the page uses DOM virtualization — content only renders in viewport.
+
+### Test selector chains step by step
+
+```bash
+cdp-cli eval <id> "
+JSON.stringify({
+  parent: document.querySelectorAll('parent-selector').length,
+  child: document.querySelectorAll('parent > child').length,
+  target: document.querySelectorAll('parent > child .target').length
+})"
+```
+
+### Scroll element into view and check content
+
+```bash
+cdp-cli eval <id> "
+(async () => {
+  const el = document.querySelectorAll('<selector>')[0];
+  el.scrollIntoView({ behavior: 'instant', block: 'center' });
+  await new Promise(r => setTimeout(r, 1000));
+  return JSON.stringify({ text: el.innerText.substring(0, 500) });
+})()"
+```
+
+## Configuration
+
+Config file `.cdprc.json` in project root (auto-detected):
+
+```json
+{
+  "browser": "canary",
+  "port": 9222,
+  "extensions": ["./my-extension"]
+}
+```
+
+CLI flags override config: `--port`, `--browser`, `--timeout`, `--extension`.
+
+## Important Notes
+
+- `eval` runs in the **page's main world**, not in extension content script isolated worlds. `chrome.runtime` and other extension APIs are not available.
+- To test content script functions, copy the relevant code into the eval expression.
+- After modifying a service worker (background.js), you must reload the extension in `chrome://extensions` — `cdp-cli reload` only reloads page content scripts.

package/LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to the Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding any notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2026 cdp-cli contributors
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,259 @@
+# cdp-cli Design Document
+
+## Overview
+
+A zero-dependency CLI tool that bridges AI coding assistants (Claude Code, Codex, Gemini CLI, OpenCode, etc.) with browsers via Chrome DevTools Protocol. Purpose: let AI agents **see and interact with** browser pages during development — inspect DOM, evaluate JS, diagnose rendering issues.
+
+**Not** a browser automation framework. Not competing with Puppeteer/Playwright. This is a diagnostic/observation tool optimized for AI consumption.
+
+## Commands
+
+### `cdp-cli launch`
+
+Start a browser with CDP enabled.
+
+```bash
+cdp-cli launch                          # auto-detect browser
+cdp-cli launch --browser chrome         # specific browser
+cdp-cli launch --port 9333              # custom port
+cdp-cli launch --extension ./my-ext     # load Chrome extension
+```
+
+Behavior:
+- If browser already running on target port, print status and exit (no error)
+- Auto-detect browser: canary > chrome > chromium > edge
+- Spawn detached process, wait until CDP port responds, then exit
+- Output: `{"ok":true,"browser":"canary","port":9222,"pid":12345}`
+
+### `cdp-cli targets`
+
+List debuggable page targets.
+
+```bash
+cdp-cli targets
+cdp-cli targets --json                  # explicit JSON (default)
+cdp-cli targets --human                 # human-readable table
+```
+
+Output (JSON, one object per line for easy grep):
+```json
+{"id":"8FEE852A","title":"My Page","url":"https://example.com"}
+{"id":"09A0487E","title":"Settings","url":"chrome-extension://abc/options.html"}
+```
+
+Short IDs (first 8 chars) — sufficient for all other commands.
+
+### `cdp-cli eval <target> <expression>`
+
+Evaluate JavaScript in a page context.
+
+```bash
+cdp-cli eval 8FEE852A "document.title"
+cdp-cli eval 8FEE "document.querySelectorAll('div').length"   # prefix match
+cdp-cli eval 8FEE "(async () => { await fetch('/api'); return 'done'; })()"
+```
+
+Behavior:
+- Target ID prefix-matched (minimum 4 chars)
+- Async expressions auto-awaited (`awaitPromise: true`)
+- String results that are valid JSON get parsed and re-formatted
+- Timeout: 30s default, configurable via `--timeout`
+- Output: the return value, JSON-formatted
+
+Errors:
+```json
+{"error":"ReferenceError: foo is not defined","stack":"..."}
+```
+
+### `cdp-cli eval-file <target> <file>`
+
+Evaluate JS from a file. Alias for reading file + eval.
+
+```bash
+cdp-cli eval-file 8FEE ./diagnose.js
+```
+
+### `cdp-cli reload [target]`
+
+Reload page(s) to pick up code changes.
+
+```bash
+cdp-cli reload 8FEE              # reload specific tab
+cdp-cli reload                   # reload all non-chrome:// tabs
+```
+
+Output:
+```json
+{"reloaded":["8FEE852A"]}
+```
+
+### `cdp-cli navigate <target> <url>`
+
+Navigate a tab to a URL.
+
+```bash
+cdp-cli navigate 8FEE "https://example.com"
+```
+
+### `cdp-cli init`
+
+Generate config and optionally inject AI assistant references.
+
+```bash
+cdp-cli init                    # create .cdprc.json with defaults
+cdp-cli init --agent            # also append reference to CLAUDE.md / .cursorrules
+```
+
+## Configuration
+
+### `.cdprc.json`
+
+```jsonc
+{
+  "browser": "canary",           // canary | chrome | chromium | edge | "/full/path"
+  "port": 9222,
+  "userDataDir": "/tmp/cdp-debug-profile",
+  "extensions": [],              // extension directory paths (resolved relative to .cdprc.json)
+  "launchArgs": [],              // extra args passed to browser
+  "timeout": 30000               // default eval timeout in ms
+}
+```
+
+### Priority
+
+CLI flags > `.cdprc.json` (nearest ancestor) > built-in defaults.
+
+`.cdprc.json` is searched upward from cwd, like `.npmrc`.
+
+### Built-in Defaults
+
+```json
+{
+  "browser": "auto",
+  "port": 9222,
+  "userDataDir": "/tmp/cdp-debug-profile",
+  "extensions": [],
+  "launchArgs": [],
+  "timeout": 30000
+}
+```
+
+## Output Design
+
+**Default: JSON** — one JSON object per logical result. AI agents parse it directly.
+
+**`--human` flag**: switches to human-readable format for manual use.
+
+All errors go to stderr as JSON: `{"error":"message"}`. Exit code 1 on failure.
+
+## Browser Detection
+
+Auto-detect order, per platform:
+
+**macOS:**
+1. Google Chrome Canary → `/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary`
+2. Google Chrome → `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`
+3. Chromium → `/Applications/Chromium.app/Contents/MacOS/Chromium`
+4. Microsoft Edge → `/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge`
+
+**Linux:**
+1. `google-chrome-canary`
+2. `google-chrome` / `google-chrome-stable`
+3. `chromium` / `chromium-browser`
+4. `microsoft-edge`
+
+**Windows:**
+1. `%LOCALAPPDATA%\Google\Chrome SxS\Application\chrome.exe`
+2. `%PROGRAMFILES%\Google\Chrome\Application\chrome.exe`
+3. `%PROGRAMFILES%\Chromium\Application\chrome.exe`
+4. `%PROGRAMFILES(x86)%\Microsoft\Edge\Application\msedge.exe`
+
+Resolved via `fs.existsSync` (macOS/Windows) or `which` (Linux).
+
+## AI Discovery
+
+### `--help` Output
+
+Designed for AI consumption — compact, example-driven:
+
+```
+cdp-cli — Browser DevTools bridge for AI coding assistants
+
+Commands:
+  launch              Start browser with CDP enabled
+  targets             List debuggable pages
+  eval <id> <js>      Evaluate JS in page context
+  eval-file <id> <f>  Evaluate JS file in page context
+  reload [id]         Reload page(s)
+  navigate <id> <url> Navigate to URL
+  init [--agent]      Generate .cdprc.json (--agent: inject AI assistant reference)
+
+Examples:
+  cdp-cli launch
+  cdp-cli targets
+  cdp-cli eval 8FEE "document.querySelectorAll('.item').length"
+  cdp-cli reload
+
+Config: .cdprc.json (searched upward from cwd)
+Flags:  --port, --browser, --timeout, --human, --help, --version
+```
+
+### AGENT.md
+
+Shipped in the npm package. Contains:
+- When to use this tool (DOM debugging, content script issues, page inspection)
+- Command reference with examples
+- Common diagnostic patterns (DOM virtualization, selector debugging, lazy loading)
+- Typical debug loop workflow
+
+Referenced by AI assistants via CLAUDE.md, .cursorrules, etc.
+
+### `init --agent`
+
+Detects which AI config files exist and appends a one-liner:
+
+- `CLAUDE.md` → for Claude Code
+- `.cursorrules` → for Cursor
+- `.github/copilot-instructions.md` → for Copilot
+- `AGENTS.md` → for Codex
+
+Appended content:
+```markdown
+## Browser Debugging
+This project uses `cdp-cli` for browser debugging. Run `cdp-cli --help` for commands, or see `node_modules/@kiss/cdp-cli/AGENT.md` for AI usage guide.
+```
+
+## Project Structure
+
+```
+cdp-cli/
+├── bin/
+│   └── cdp-cli.js              # CLI entry point (shebang)
+├── lib/
+│   ├── browser.js              # Browser detection & launch
+│   ├── cdp.js                  # CDP connection (HTTP + WebSocket)
+│   ├── commands/
+│   │   ├── launch.js
+│   │   ├── targets.js
+│   │   ├── eval.js
+│   │   ├── reload.js
+│   │   ├── navigate.js
+│   │   └── init.js
+│   ├── config.js               # .cdprc.json resolution & merging
+│   ├── output.js               # JSON/human output formatting
+│   └── ws.js                   # Minimal WebSocket client (no deps)
+├── AGENT.md                    # AI assistant usage guide
+├── DESIGN.md                   # This file
+├── README.md                   # Human documentation
+├── LICENSE                     # Apache 2.0
+├── package.json
+└── .cdprc.json.example
+```
+
+## Technical Decisions
+
+- **Zero production dependencies**: HTTP via `node:http`, args via `node:util.parseArgs`, WebSocket via custom minimal implementation
+- **Node >= 18**: for `parseArgs` support
+- **Short target IDs**: first 8 hex chars, prefix-matchable with minimum 4
+- **Stateless**: every command connects, acts, disconnects. No daemon, no session
+- **Cross-platform**: macOS, Linux, Windows browser paths maintained

package/bin/cdp-cli.js

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+'use strict';
+
+const { parseArgs } = require('node:util');
+const { version } = require('../package.json');
+
+const COMMANDS = {
+  launch:    () => require('../lib/commands/launch'),
+  targets:   () => require('../lib/commands/targets'),
+  eval:      () => require('../lib/commands/eval'),
+  'eval-file': () => require('../lib/commands/eval'),
+  reload:    () => require('../lib/commands/reload'),
+  navigate:  () => require('../lib/commands/navigate'),
+  init:      () => require('../lib/commands/init'),
+};
+
+const HELP = `cdp-cli v${version} — Browser DevTools bridge for AI coding assistants
+
+Commands:
+  launch              Start browser with CDP enabled
+  targets             List debuggable pages
+  eval <id> <js>      Evaluate JS in page context
+  eval-file <id> <f>  Evaluate JS file in page context
+  reload [id]         Reload page(s)
+  navigate <id> <url> Navigate to URL
+  init [--agent]      Generate .cdprc.json (--agent: inject AI assistant reference)
+
+Examples:
+  cdp-cli launch
+  cdp-cli targets
+  cdp-cli eval 8FEE "document.querySelectorAll('.item').length"
+  cdp-cli reload
+
+Config: .cdprc.json (searched upward from cwd)
+Flags:  --port, --browser, --timeout, --human, --extension, --help, --version`;
+
+function main() {
+  const args = process.argv.slice(2);
+
+  if (args.includes('--version') || args.includes('-v')) {
+    console.log(version);
+    return;
+  }
+
+  if (args.length === 0 || args.includes('--help') || args.includes('-h')) {
+    console.log(HELP);
+    return;
+  }
+
+  const cmd = args[0];
+  const loader = COMMANDS[cmd];
+
+  if (!loader) {
+    console.error(JSON.stringify({ error: `Unknown command: ${cmd}. Run cdp-cli --help for usage.` }));
+    process.exit(1);
+  }
+
+  const mod = loader();
+  // Pass remaining args (after command name)
+  mod.run(args.slice(1)).catch(err => {
+    console.error(JSON.stringify({ error: err.message }));
+    process.exit(1);
+  });
+}
+
+main();