safari-mcp 2.8.4 → 2.8.8

package/README.md

@@ -6,19 +6,14 @@
 
 # 🦁 Safari MCP
 
-**The only MCP server for Safari — native browser automation for AI agents.**
+**The browser for your coding agent.**
+
+*Your real Safari, logged in — no Chrome, no heat, no headless.*
 
 [![npm version](https://img.shields.io/npm/v/safari-mcp)](https://www.npmjs.com/package/safari-mcp)
 [![npm downloads](https://img.shields.io/npm/dm/safari-mcp)](https://www.npmjs.com/package/safari-mcp)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![macOS](https://img.shields.io/badge/macOS-only-blue)](https://www.apple.com/macos/)
-[![GitHub stars](https://img.shields.io/github/stars/achiya-automation/safari-mcp?style=social)](https://github.com/achiya-automation/safari-mcp/stargazers)
-
-[![MCP Registry](https://img.shields.io/badge/MCP-Registry-purple?logo=anthropic)](https://registry.modelcontextprotocol.io/)
-[![Glama](https://img.shields.io/badge/Glama-Listed-7c3aed)](https://glama.ai/mcp/servers/g0upg7gyex)
-[![Awesome MCP](https://img.shields.io/badge/Awesome%20MCP-Featured-ff69b4)](https://github.com/punkpeye/awesome-mcp-servers)
-[![Featured on HackerNoon](https://img.shields.io/badge/Featured%20on-HackerNoon-00FE9A?logo=hackernoon&logoColor=black)](https://hackernoon.com/i-had-to-reverse-engineer-react-shadow-dom-and-csp-to-automate-safari-without-chrome)
-[![Featured in CLI-Anything](https://img.shields.io/badge/Featured%20in-CLI--Anything-blueviolet)](https://github.com/HKUDS/CLI-Anything/pull/212)
 
 <a href="vscode:mcp/install?%7B%22safari-mcp%22%3A%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22safari-mcp%22%5D%7D%7D"><img src="https://img.shields.io/badge/VS_Code-Install_Server-0078d4?logo=visual-studio-code&logoColor=white" alt="Install in VS Code"></a>
 <a href="https://insiders.vscode.dev/redirect?url=vscode-insiders:mcp/install?%7B%22safari-mcp%22%3A%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22safari-mcp%22%5D%7D%7D"><img src="https://img.shields.io/badge/VS_Code_Insiders-Install_Server-24bfa5?logo=visual-studio-code&logoColor=white" alt="Install in VS Code Insiders"></a>
@@ -32,19 +27,21 @@
 
 </div>
 
-> **TL;DR:** Use your real Safari with all your logins, cookies, and sessions. No headless browsers, no Chrome, no Puppeteer. Just native AppleScript + JavaScript on macOS — 60% less CPU/heat on Apple Silicon.
+## ❌ Without Safari MCP
+
+Your AI agent needs to browse. So it either:
+
+- **Spins up Chromium via Playwright** — with no logins, no cookies, no sessions
+- **Uses Chrome DevTools MCP** — and melts your fan running a second browser
+- **Relies on headless scrapers** — blocked by Cloudflare, reCAPTCHA, and bot detection
 
-> 📰 **Featured on HackerNoon:** [I Had to Reverse-Engineer React, Shadow DOM, and CSP to Automate Safari Without Chrome](https://hackernoon.com/i-had-to-reverse-engineer-react-shadow-dom-and-csp-to-automate-safari-without-chrome) — the three hardest technical problems behind Safari MCP and the code that solved them.
+## ✅ With Safari MCP
 
-### 🤔 Why not just use Playwright or Chrome DevTools MCP?
+Your AI drives the **Safari you're already logged into** — Gmail, GitHub, Ahrefs, Slack, banking.
 
-| Problem | Safari MCP Solution |
-|---------|-------------------|
-| Chrome DevTools MCP heats up your Mac | Native WebKit — ~60% less CPU |
-| Playwright launches a new browser without your logins | Uses your **real Safari** with all sessions |
-| Puppeteer requires Chrome + debug port | Just AppleScript — no extra browser |
-| Headless browsers can't access your authenticated sessions | Gmail, GitHub, Slack — already logged in |
-| Browser automation steals window focus | Safari stays in background, never interrupts |
+Native WebKit. ~60% less CPU. Background operation. 80 tools. One `npx` command. macOS only.
+
+> 📰 **Featured on HackerNoon:** [I Had to Reverse-Engineer React, Shadow DOM, and CSP to Automate Safari Without Chrome](https://hackernoon.com/i-had-to-reverse-engineer-react-shadow-dom-and-csp-to-automate-safari-without-chrome)
 
 ---
 
@@ -128,23 +125,6 @@ cd safari-mcp && npm install
 
 ---
 
-<div align="center">
-
-### ⭐ Found Safari MCP useful?
-
-**A star takes 2 seconds and helps other macOS developers discover this.**
-
-[![Star on GitHub](https://img.shields.io/github/stars/achiya-automation/safari-mcp?style=for-the-badge&logo=github&color=yellow&label=Star%20this%20repo)](https://github.com/achiya-automation/safari-mcp)
-
-*4,000+ developers install Safari MCP every month. Less than 1% star it.*
-*If it saves you Chrome heat, give it back a click.*
-
-📰 **[Read the deep-dive on HackerNoon →](https://hackernoon.com/i-had-to-reverse-engineer-react-shadow-dom-and-csp-to-automate-safari-without-chrome)**
-
-</div>
-
----
-
 ## Usage Workflow
 
 The recommended pattern for AI agents using Safari MCP:
@@ -170,6 +150,9 @@ The recommended pattern for AI agents using Safari MCP:
 
 ## Tools (80)
 
+<details>
+<summary><b>Click to expand the full tool list — organized by category</b></summary>
+
 ### Navigation (4)
 | Tool | Description |
 |------|-------------|
@@ -341,6 +324,8 @@ The recommended pattern for AI agents using Safari MCP:
 |------|-------------|
 | `safari_run_script` | Run multiple actions in a single call (batch) |
 
+</details>
+
 ---
 
 ## Security
@@ -576,9 +561,22 @@ Your support funds:
 
 ---
 
+## What agents unlock with Safari MCP
+
+When an AI agent drives Safari MCP, it gets things a headless browser can't:
+
+- **Real authenticated sessions** — Gmail, GitHub, Ahrefs, Slack, banking dashboards are all already logged in
+- **Framework-aware form filling** — `safari_fill_and_submit` calls React/Vue/Angular setters natively, no guessing whether `input` events fired
+- **Background operation** — the agent works in parallel while you keep using your Mac
+- **One MCP call per workflow** — `safari_run_script` batches navigation + clicks + extraction into a single roundtrip
+
+The pattern holds across models: **drive the browser the human already trusts** — you inherit logins, cookies, extensions, and the user's exact environment in one step.
+
+---
+
 ## Community
 
-**2,000+ monthly npm downloads** — developers are using Safari MCP to build AI agents on macOS.
+**6,000+ monthly npm downloads** — developers are building AI agents on macOS with Safari MCP.
 
 - [GitHub Discussions](https://github.com/achiya-automation/safari-mcp/discussions) — ask questions, share use cases
 - [Issues](https://github.com/achiya-automation/safari-mcp/issues) — bug reports and feature requests

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "safari-mcp",
-  "version": "2.8.4",
+  "version": "2.8.8",
   "mcpName": "io.github.achiya-automation/safari-mcp",
   "description": "Safari browser automation for AI agents — native macOS, zero Chrome overhead. 80 tools via AppleScript + JavaScript.",
   "type": "module",

package/safari.js

@@ -1742,6 +1742,174 @@ export async function replaceEditorContent({ text }) {
     .replace(/\n/g, '\\n')
     .replace(/\r/g, '');
 
+  // PREFLIGHT: Two-channel Monaco sync — update the model (visual) AND call
+  // the React wrapper's onChange (state). Airtable wraps Monaco in a React
+  // component whose "Finish editing" save reads from React state, not from
+  // the Monaco model. So setValue alone is "visually correct, stale on save".
+  // We walk the React fiber up from .monaco-editor until we find a component
+  // whose memoizedProps contain an `onChange` function + a `value` field,
+  // then call onChange(text) to sync React. Works for Airtable-style embeds
+  // and is a no-op on plain Monaco (VS Code web, GitHub) where setValue
+  // already covers the state.
+  const preflightFirstLine = text.split('\n')[0].slice(0, 20).replace(/'/g, "\\'");
+  const monacoPreflight = await runJS(
+    `(function(){
+      var m = (typeof monaco !== 'undefined') ? monaco : window.monaco;
+      if (!m || !m.editor) return JSON.stringify({kind:'not-monaco'});
+      var hasTextarea = !!document.querySelector('.monaco-editor textarea.inputarea');
+      var models = []; try { models = m.editor.getModels() || []; } catch(e){}
+      if (!models.length) return JSON.stringify({kind:'no-model', hasTextarea: hasTextarea});
+
+      // Locate the React wrapper component that owns this Monaco embed.
+      // Prefer an editable wrapper (isReadOnly !== true); fall back to any
+      // wrapper if only a read-only preview exists (Airtable before Edit).
+      function findFiber(el) {
+        if (!el) return null;
+        var ks = Object.keys(el);
+        for (var j = 0; j < ks.length; j++) {
+          if (ks[j].indexOf('__reactFiber') === 0) return el[ks[j]];
+        }
+        return null;
+      }
+      function findWrapperWithOnChange(fiber) {
+        var c = fiber;
+        for (var i = 0; i < 40 && c; i++) {
+          var p = c.memoizedProps;
+          if (p && typeof p.onChange === 'function' && ('value' in p)) return c;
+          c = c.return;
+        }
+        return null;
+      }
+      var els = document.querySelectorAll('.monaco-editor');
+      var editableWrapper = null, anyWrapper = null;
+      for (var i = els.length - 1; i >= 0; i--) {
+        var f = findFiber(els[i].parentElement);
+        if (!f) continue;
+        var w = findWrapperWithOnChange(f);
+        if (!w) continue;
+        if (!anyWrapper) anyWrapper = w;
+        if (w.memoizedProps.isReadOnly !== true) { editableWrapper = w; break; }
+      }
+      var wrapper = editableWrapper || anyWrapper;
+
+      // Step 1: Monaco model setValue — updates visual + fires onDidChangeModelContent
+      try { models[models.length - 1].setValue('${safeText}'); }
+      catch(e) { return JSON.stringify({kind:'setValue-err', hasTextarea: hasTextarea, err: String(e && e.message)}); }
+
+      // Step 2: Sync React state via wrapper.onChange (if wrapper found).
+      // onChange may be silently guarded (e.g. Airtable's readOnly check).
+      // We only treat sync as real when the wrapper's value prop actually
+      // changes OR a sibling/parent expression state reflects the update
+      // on the next render tick.
+      var reactSynced = false;
+      var reactGuarded = false;
+      if (wrapper) {
+        var prevValue = wrapper.memoizedProps.value;
+        try {
+          wrapper.memoizedProps.onChange('${safeText}');
+          // Re-fetch the fiber's memoizedProps (may have been swapped by React)
+          var after = wrapper.alternate ? wrapper.alternate.memoizedProps : wrapper.memoizedProps;
+          var nowValue = (after && 'value' in after) ? after.value : wrapper.memoizedProps.value;
+          reactSynced = (nowValue !== prevValue);
+          // If value didn't change, onChange was a no-op (guarded by isReadOnly
+          // or permission check). Signal this so caller falls back to native paste.
+          reactGuarded = !reactSynced;
+        } catch(e) { reactSynced = false; reactGuarded = true; }
+      }
+
+      // Step 3: Verify DOM reflects the new content
+      var firstDom = document.querySelector('.monaco-editor .view-line');
+      var domTxt = firstDom ? firstDom.textContent : '';
+      var expected = '${preflightFirstLine}';
+      var domOk = expected.length < 5 || domTxt.indexOf(expected) !== -1;
+
+      return JSON.stringify({
+        kind: 'monaco',
+        domOk: domOk,
+        reactSynced: reactSynced,
+        reactGuarded: reactGuarded,
+        hasWrapper: !!wrapper,
+        editable: !!editableWrapper,
+        hasTextarea: hasTextarea,
+        models: models.length
+      });
+    })()`
+  );
+
+  let mpParsed = null;
+  try { mpParsed = JSON.parse(monacoPreflight); } catch(e) {}
+
+  // Fully synced: Monaco model + React state both updated.
+  if (mpParsed && mpParsed.kind === 'monaco' && mpParsed.domOk && mpParsed.reactSynced) {
+    return 'Monaco(model+react): replaced ' + text.split('\n').length + ' lines';
+  }
+
+  // Plain Monaco embed (no React wrapper) — setValue is sufficient.
+  if (mpParsed && mpParsed.kind === 'monaco' && mpParsed.domOk && !mpParsed.hasWrapper) {
+    return 'Monaco(model): replaced ' + text.split('\n').length + ' lines';
+  }
+
+  // Airtable-style embed where React fiber sync failed (wrapper.onChange was
+  // a no-op, or the site guards writes by permission/readOnly). Fall back to
+  // native clipboard paste via CGEvent: forces readOnly=false first, activates
+  // Safari, focuses the textarea, and sends Cmd+A/Cmd+V targeted to the window.
+  if (mpParsed && mpParsed.kind === 'monaco' && mpParsed.hasTextarea) {
+    const savedFrontApp = await saveFrontmostApp();
+    try {
+      // Step 1: Install editor capture hook (if not already) + try to find visible editable editor
+      await runJS(
+        `(function(){
+          if (!window.__mcpEditorHook) {
+            window.__mcpEditorHook = true;
+            window.__mcpCapturedEditors = [];
+            try { monaco.editor.onDidCreateEditor(function(e){window.__mcpCapturedEditors.push(e);}); } catch(e){}
+          }
+          // Force readOnly=false on all existing editors (harmless if already false)
+          try {
+            (window.__mcpCapturedEditors || []).forEach(function(e){
+              try { if (e.updateOptions) e.updateOptions({readOnly: false}); } catch(_){}
+            });
+          } catch(e){}
+          return 'hook-installed';
+        })()`
+      );
+      // Step 2: Activate Safari to frontmost — required for CGEvent keyboard to reach web content
+      await _helperActivateApp("com.apple.Safari");
+      await new Promise(r => setTimeout(r, 300));
+      // Step 3: Focus Monaco's input textarea
+      await runJS(`(function(){var t=document.querySelector('.monaco-editor textarea.inputarea');if(t){t.focus();return 'focused';}return 'no-textarea';})()`);
+      await new Promise(r => setTimeout(r, 100));
+      // Step 4: Cmd+A + Cmd+V via GLOBAL CGEvent (cghidEventTap) — reaches web content
+      // reliably since Safari is frontmost
+      await _helperNativeKeyboard(0, ["cmd"], 0); // Cmd+A global
+      await new Promise(r => setTimeout(r, 100));
+      // Write clipboard + paste via global CGEvent (not windowed)
+      await _acquireClipboardLock();
+      try {
+        const savedClip = await _saveClipboard();
+        await new Promise((resolve, reject) => {
+          const proc = spawn("pbcopy", [], { stdio: ["pipe", "ignore", "ignore"] });
+          proc.stdin.write(text);
+          proc.stdin.end();
+          proc.on("close", resolve);
+          proc.on("error", reject);
+        });
+        await _helperNativeKeyboard(9, ["cmd"], 0); // Cmd+V global
+        await new Promise(r => setTimeout(r, 200));
+        await _restoreClipboard(savedClip);
+      } finally {
+        _releaseClipboardLock();
+      }
+      await new Promise(r => setTimeout(r, 300));
+      // Restore original front app
+      if (savedFrontApp) await restoreFocusIfStolen(savedFrontApp);
+      return 'Monaco(native-paste): replaced ' + text.split('\n').length + ' lines';
+    } catch(e) {
+      if (savedFrontApp) await restoreFocusIfStolen(savedFrontApp).catch(() => {});
+      // Fall through to remaining editor-type checks
+    }
+  }
+
   const result = await runJS(
     `(function(){
       // Monaco editor (Airtable, VS Code web, GitHub)