Skip to content
Development
Command

/exec-js

Execute JavaScript code in the Tauri app's webview context

From plugin
claude-command-suite
1.4k199 skills89 agents199 commands
$ npx -y skills add qdhenry/Claude-Command-Suite --agent claude-code

Command definition

exec-js.md
name: rust:tauri:exec-js
description: Execute JavaScript code in the Tauri app's webview context
allowed-tools: mcp__tauri-mcp__execute_js
author: Quintin Henry (https://github.com/qdhenry/)

<objective> Execute arbitrary JavaScript in the Tauri application's webview. Useful for inspecting state, triggering actions, or debugging frontend behavior. </objective>

<instructions> Execute JavaScript in the Tauri app: **$ARGUMENTS**

Arguments format: `[process_id] [javascript_code]`

  • `process_id`: Required - the process ID from `/tauri:launch`
  • `javascript_code`: Required - JavaScript to execute in the webview

Process

1. **Parse Arguments** Extract process_id and JavaScript code from $ARGUMENTS.

2. **Execute the Code** Use `mcp__tauri-mcp__execute_js` with:

  • `process_id`: Target process
  • `javascript_code`: The JS to run

3. **Return Results**

  • Display the return value
  • Show any console output or errors
  • Format objects/arrays as pretty JSON

Usage Examples

# Get current URL/route
/tauri:exec-js 12345 window.location.href

# Check React state (if using React)
/tauri:exec-js 12345 document.querySelector('[data-testid="project-list"]').textContent

# Get localStorage data
/tauri:exec-js 12345 JSON.stringify(localStorage)

# Check DOM element exists
/tauri:exec-js 12345 !!document.querySelector('.task-card')

# Get current theme
/tauri:exec-js 12345 document.documentElement.classList.contains('dark')

# Trigger a click
/tauri:exec-js 12345 document.querySelector('button[data-action="refresh"]').click()

# Call Tauri invoke directly
/tauri:exec-js 12345 window.__TAURI__.invoke('get_projects')

</instructions>

<output_format>

=== JavaScript Execution ===
Process: [PID]

--- Code ---
[the executed code]

--- Result ---
[formatted return value]

--- Console Output ---
[any console.log output if captured]

</output_format>

<common_snippets> **State Inspection:**

// Get all data attributes on body
Object.fromEntries([...document.body.attributes].map(a => [a.name, a.value]))

// Find all buttons with text
[...document.querySelectorAll('button')].map(b => b.textContent.trim())

// Get form values
Object.fromEntries(new FormData(document.querySelector('form')))

**Debug Helpers:**

// Log React component tree (if React DevTools installed)
window.__REACT_DEVTOOLS_GLOBAL_HOOK__

// Check for errors in DOM
document.querySelectorAll('[data-error], .error, .text-red-500').length

// Get current route (React Router)
window.location.pathname

**UI Interaction:**

// Simulate user typing
document.querySelector('input').value = 'test'
document.querySelector('input').dispatchEvent(new Event('input', {bubbles: true}))

// Click and wait
document.querySelector('button').click()

</common_snippets>

<security_note> JavaScript execution has full access to the webview context. Use carefully:

  • Avoid executing untrusted code
  • Be aware of side effects (clicks, form submissions, etc.)
  • This bypasses normal UI interaction patterns

</security_note>

Read more
@qdhenry
Ships withclaude-command-suite

A comprehensive development toolkit designed following Anthropic's Claude Code Best Practices for AI-assisted software development.

1.4k12 skills89 agents
Get the whole plugin

Stars on GitHub

Momentum

stars in total
1.4k
Star history of qdhenry/Claude-Command-Suite on GitHub, a chart by star-history.com

Other commands on claude-command-suite.

More commands from other plugins.

build
Auto-invoked

build

Command

Implement tasks incrementally — build, test, verify, commit. Add "auto" to run the whole plan in one approved pass.

@addyosmani@addyosmaniInstall Command