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/)

Execute arbitrary JavaScript in the Tauri application's webview. Useful for inspecting state, triggering actions, or debugging frontend behavior. 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')

<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>