Introduce options for users to configure permission prompts in Claude, including a YOLO mode to skip all prompts and a method to allowlist specific commands in settings.json. This enhances user control over script execution permissions.
Enhance the server script to accept a `--headless` flag for running the browser in headless mode. Update SKILL.md to document this new feature, improving user guidance on server startup options.
When source code is available, direct selectors are faster, more reliable, and
avoid the overhead of snapshot generation. Update documentation to explicitly
discourage ARIA snapshot usage when code is known.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updated the installation script to check for the claude command in common locations, improving robustness. The script now uses a variable for the claude command, ensuring consistent usage throughout the installation process.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Changed wording to indicate ARIA snapshots are useful when you don't
know the page layout, rather than being the recommended approach for
all AI automation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
The script now checks multiple locations for the claude command:
1. PATH (if available)
2. ~/.claude/local/claude (local installation)
3. /usr/local/bin/claude (global installation)
This fixes the issue where shell aliases aren't available in scripts.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This refactors dev-browser to use Playwright-compatible ARIA snapshots
instead of the custom LLM Tree approach for element discovery.
Changes:
- Add getAISnapshot() - returns YAML accessibility tree with refs
- Add selectSnapshotRef() - gets ElementHandle by ref (e.g., "e5")
- Refs persist on window.__devBrowserRefs across connections
- Remove getLLMTree() and getSelectorForID() from client
- Remove /tree and /selector server endpoints
- Delete src/dom/ directory (8500+ lines removed)
- Update SKILL.md documentation
The ARIA snapshot approach provides:
- Semantic roles (button, link, heading) instead of raw HTML
- Stable refs that survive across script executions
- Compact output focused on interactive elements
- Matches Playwright's internal _snapshotForAI format
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds install-dev.sh to simplify local plugin development by removing
existing marketplace/plugin installations and reinstalling from the
current directory.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Clarifies that page.evaluate() callbacks must use plain JavaScript (not
TypeScript) since they run in the browser, and notes that tsx transpiles
without type-checking so type errors won't prevent execution.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Server now prints "Ready" when fully started
- SKILL.md updated to instruct users to wait for Ready message
- Improved Chromium detection to check for actual chromium directories
rather than just the cache folder existing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Show performance comparison between Dev Browser, Playwright MCP, and
Playwright Skill across time, cost, and turns metrics. Link to the
dev-browser-eval repo for methodology.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit revises the README.md file to provide more detailed descriptions of the Playwright MCP, Direct Playwright scripts, and Dev Browser approaches. The updates clarify the tradeoffs and context efficiency of each method, improving the overall understanding of the plugin's capabilities for developers.
This commit updates the README.md file to provide a comprehensive overview of the Dev Browser plugin, detailing its purpose, unique features, installation steps, and usage examples. The enhancements aim to clarify the plugin's functionality and improve the onboarding experience for developers integrating browser automation into their workflows.
This commit revises the SKILL.md file to clarify the description of browser automation tasks, emphasizing user-triggered actions and providing a more comprehensive list of trigger phrases. Additionally, it updates various code examples and sections to improve readability and usability, ensuring developers have clear guidance on executing scripts and managing browser interactions. These enhancements aim to streamline the developer experience and improve the overall documentation for the dev-browser package.
This commit revises the SKILL.md file to provide clearer instructions on executing scripts inline using heredocs, eliminating the need for temporary file creation for one-off automation tasks. It also emphasizes when to write scripts to the `tmp/` directory and updates various code examples to reflect the new inline execution format. These changes aim to improve developer experience and streamline the automation process.
This commit introduces a new bun.lock file for the browser-skill project, establishing a lockfile version and defining the workspace structure. It includes a comprehensive list of devDependencies such as @types/bun, husky, lint-staged, prettier, and typescript, along with their respective versions. This addition aims to enhance dependency management and ensure consistent installations across development environments.
- Move all source from packages/dev-browser/src to skills/dev-browser/src
- Remove monorepo workspaces configuration
- Add @/* path alias via package.json imports and tsconfig paths
- Update all imports to use @/client.js and @/index.js
- Update SKILL.md and CLAUDE.md documentation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit enhances error handling in the `client.ts` file by introducing more robust checks and clearer error messages. Additionally, the SKILL.md file is updated to reflect these changes, providing developers with better guidance on handling errors during browser automation tasks. These improvements aim to enhance the reliability of the dev-browser package and support developers in troubleshooting issues effectively.
This commit updates the SKILL.md file to clarify the setup process for the dev-browser server, emphasizing automatic installation of Chromium and the creation of necessary directories. Additionally, the start-server.ts script is modified to check for existing Playwright browser installations and install Chromium if not found, improving the user experience. These changes aim to streamline the initial setup and enhance the overall documentation for better developer guidance.
This commit modifies the workspace overrides for the `dev-browser` package in both `package.json` and `bun.lock`, ensuring correct resolution within the workspace. Additionally, the SKILL.md file is significantly updated to improve clarity on setup, script writing, and the overall functionality of the browser automation tool. Key enhancements include clearer instructions, improved examples, and a more structured approach to documenting the automation process. These changes aim to enhance developer experience and usability of the dev-browser features.
This commit revises the SKILL.md file for the dev-browser package, improving the description of browser automation capabilities and providing clearer instructions for setup and script writing. Key changes include a more detailed description of automation tasks, restructured sections for better readability, and updated examples to reflect best practices. These enhancements aim to improve developer understanding and usability of the dev-browser features.
This commit deletes outdated files related to the dev-browser package, including the `TODO.md`, `package.json`, `plugin.json`, and `start-server.ts`, as part of a cleanup effort. Additionally, the marketplace configuration is updated to reflect the new name and email for the owner, along with adjustments to the plugin source and description. These changes streamline the project structure and improve clarity in the marketplace setup.
This commit introduces workspace overrides for the `dev-browser` package in both `package.json` and `bun.lock`. The changes ensure that the `dev-browser` dependency resolves correctly within the workspace, enhancing the development experience. Additionally, the `dev-browser` package's dependency declaration is updated to use a wildcard version, simplifying version management. These updates aim to improve the consistency and reliability of package resolutions across the project.
This commit introduces the `waitForPageLoad` function in the `client.ts` file, which enhances page load handling by checking the document's ready state and monitoring network requests. The SKILL.md file is updated to incorporate this new function, replacing previous loading methods with `waitForPageLoad` in various examples. These changes aim to improve the reliability of page interactions and provide clearer guidance for developers on managing page load states.
This commit updates the `escapeSelector` function in `serialize.ts` to improve CSS selector escaping. It now correctly escapes special characters and handles identifiers that start with digits by converting them to a hex format. These changes enhance the robustness of selector handling in the dev-browser package.
This commit updates the SKILL.md file to change the page load state from "networkidle" to "load" and introduces a timeout to allow dynamic content to finish loading. Additionally, it refines the TypeScript logic in the `index.ts` file by updating the structure of the `PageEntry` interface to include separate maps for CSS selectors and backend node IDs. The selector resolution process is enhanced to prefer backend node IDs for reliability, with fallbacks to CSS selectors when necessary. These changes aim to improve the clarity and functionality of the dev-browser package.
This commit simplifies the DOM extraction process in the `extract.ts` file by removing outdated browser global declarations and replacing the `extractDOMScript` function with a direct reference to `extractDOMScriptSource`. This change enhances the clarity of the code and reduces complexity, making it easier to understand and maintain. Additionally, the extraction logic for processing iframes has been streamlined, ensuring consistent handling of DOM elements across different contexts.
This commit reorganizes the SKILL.md file by removing outdated screenshot examples and introducing a new section on inspecting page state. It adds detailed explanations for taking screenshots and using the LLM tree for structured DOM inspection, along with example code snippets. The documentation now provides clearer guidance on when to use different methods for debugging and interacting with web elements, enhancing usability for developers.
This commit modifies the `getLLMTree` method in the `DevBrowserClient` interface and its implementation to return a string representing the DOM tree instead of the previous `GetLLMTreeResponse` type. This change simplifies the response structure, focusing on the essential data needed for further processing. Additionally, the method now extracts the `tree` property from the response, enhancing clarity and usability in handling the LLM tree data.
This commit deletes the `dump-hn-tree.ts` script and its generated output file `hn-tree.txt` from the dev-browser package. The removal is part of a cleanup effort to eliminate unused or outdated code, streamlining the project and improving maintainability. This change reflects a shift in focus towards more relevant functionalities within the package.
This commit simplifies the TypeScript check step in the CI workflow by consolidating the checks into a single job. The previous separate checks for the root and dev-browser have been merged into one, streamlining the process and improving maintainability. This change aims to enhance the efficiency of the CI pipeline while ensuring consistent type checking across the project.
This commit introduces new functionalities aimed at improving accessibility and testing within the dev-browser package. Key changes include:
- Implementation of methods to retrieve the accessibility tree of the current page, enhancing the ability to interact with web elements for accessibility purposes.
- Addition of new test cases to ensure the reliability and functionality of the accessibility features.
- Updates to existing documentation to reflect the new capabilities and usage guidelines.
These enhancements aim to improve the overall accessibility of web applications and ensure robust testing practices within the dev-browser environment.
This commit enhances the type safety and clarity of various DOM utility functions within the dev-browser package. Key changes include:
- Updated function signatures to use more specific types, such as `BrowserElement`, `BrowserNode`, and `BrowserShadowRoot`, improving type checking and reducing potential runtime errors.
- Added non-null assertions to ensure that the code handles potentially undefined values more safely.
- Refactored test cases to align with the updated function signatures, ensuring consistency and reliability in testing.
These improvements aim to enhance code maintainability and reduce the likelihood of errors during DOM manipulation.
This commit introduces several development tools to improve code quality and maintainability within the dev-browser package. Key changes include:
- Addition of `husky` for managing Git hooks, ensuring that pre-commit checks are enforced.
- Integration of `lint-staged` to run linters on staged files, promoting consistent code style.
- Implementation of `prettier` for automatic code formatting, enhancing readability and reducing style discrepancies.
- Updates to the `package.json` and `bun.lock` files to include the new dependencies and scripts for formatting and linting.
These enhancements aim to streamline the development process and maintain high code quality standards across the project.
This commit introduces new functionalities for extracting the LLM-friendly DOM tree and resolving CSS selectors for elements within the dev-browser package. Key changes include:
- Addition of `getLLMTree` and `getSelectorForID` methods in the `DevBrowserClient` interface for fetching the DOM tree and corresponding selectors.
- Implementation of server endpoints to handle requests for LLM tree extraction and selector resolution, enhancing the API's capabilities.
- Updates to the TypeScript types to support the new functionalities, including `GetLLMTreeResponse` and `GetSelectorResponse`.
- Enhancements to the DOM utility functions to facilitate backend node ID resolution for persistent element identification.
These updates improve the interaction with web pages and enhance the overall usability of the dev-browser package.
This commit refines the DOM serialization and testing capabilities within the dev-browser package. Key updates include:
- Enhancements to the `serializeNode` function for improved handling of various DOM elements.
- Modifications to the `dump-hn-tree` script to better reflect the current serialization format.
- Updates to existing tests to align with the new serialization behavior, ensuring accurate representation of interactive elements.
These changes aim to improve the accuracy and usability of DOM representations, further enhancing the integration with testing frameworks.
This commit introduces significant improvements to the DOM serialization process within the dev-browser package. Key changes include:
- Addition of a new `dump-hn-tree` script for dumping the DOM tree structure.
- Implementation of a flat output format for serialized DOM trees, focusing on meaningful nodes while omitting structural elements.
- Updates to tests to reflect the new serialization behavior, ensuring that only interactive elements are outputted and that text content is preserved.
- Enhancements to the `serializeNode` function to improve handling of scrollable containers and shadow DOM elements.
These updates enhance the usability and accuracy of DOM representation, facilitating better integration with LLM outputs and improving overall testing reliability.
This commit introduces a comprehensive set of features for DOM extraction and manipulation within the dev-browser package. Key additions include:
- New modules for extracting and processing the DOM tree, including visibility and interactivity checks.
- Implementation of compound component generation for complex input types.
- Integration of Playwright for DOM extraction, enabling robust testing capabilities.
- Addition of Vitest configuration and test cases to ensure functionality and reliability of the new features.
These enhancements improve the overall usability and testing framework of the dev-browser, facilitating better interaction with web pages and ensuring accurate representation of the DOM structure.
Sawyer Hood