Toggle sidecar or screen mirroring from Control Center in macOS Ventura

toggle-ventura-sidecar.jxa.js

#!/usr/bin/env osascript -l JavaScript

/**
 * -----------------------------------------------------------------------------
 * Activate Sidecar/Screen Mirroring from Control Center
 * -----------------------------------------------------------------------------
 *
 * Created on February 17, 2023 by Stephan Casas
 * Updated on May 18, 2023 by Stephan Casas
 *
 * Options:
 *   - TARGET_DEVICE_NAME
 *     - The name of the sidecar/screen mirroring device to toggle.
 *     - This should be exactly as it's written in screen mirroring menu.
 *     - Include any whitespace characters as given in the menu entry.
 *
 *
 * Notes:
 *   This script was tested on macOS 13 Ventura and may break with future OS
 *   updates.
 */

const TARGET_DEVICE_NAME = 'REPLACE_WITH_YOUR_DEVICE_NAME';

const $attr = Ref();
const $windows = Ref();
const $children = Ref();

function run(_) {
  // Get the current Control Center PID.
  const pid = $.NSRunningApplication.runningApplicationsWithBundleIdentifier(
    'com.apple.controlcenter',
  ).firstObject.processIdentifier;

  // Get the Control Center application.
  const app = $.AXUIElementCreateApplication(pid);

  // Get the Control Center menubar extra children.
  $.AXUIElementCopyAttributeValue(app, 'AXChildren', $children);
  $.AXUIElementCopyAttributeValue($children[0].js[0], 'AXChildren', $children);

  // Locate the Control Center menubar extra (also has Clock, Users, etc.).
  const ccExtra = $children[0].js.find((child) => {
    $.AXUIElementCopyAttributeValue(child, 'AXIdentifier', $attr);
    return $attr[0].js == 'com.apple.menuextra.controlcenter';
  });

  // Open Control Center window and await draw.
  $.AXUIElementPerformAction(ccExtra, 'AXPress');
  if (
    !(() => {
      const timeout = new Date().getTime() + 2000;
      while (true) {
        $.AXUIElementCopyAttributeValue(app, 'AXWindows', $windows);
        if (
          typeof $windows[0] == 'function' &&
          ($windows[0].js.length ?? 0) > 0
        ) {
          return true;
        }
        if (new Date().getTime() > timeout) {
          return false;
        }
        delay(0.1);
      }
    })()
  ) {
    return;
  }

  // Get Control Center window children.
  $.AXUIElementCopyAttributeValue($windows[0].js[0], 'AXChildren', $children);

  // Locate the Control Center modules group.
  const modulesGroup = $children[0].js.find((child) => {
    $.AXUIElementCopyAttributeValue(child, 'AXRole', $attr);
    return $attr[0].js == 'AXGroup';
  });

  // Get the individual modules within the modules group.
  $.AXUIElementCopyAttributeValue(modulesGroup, 'AXChildren', $children);

  // Locate the screen-mirroring module.
  const screenMirroring = $children[0].js.find((child) => {
    $.AXUIElementCopyAttributeValue(child, 'AXIdentifier', $attr);
    return $attr[0].js == 'controlcenter-screen-mirroring';
  });

  // Activate the screen mirroring module and await draw.
  $.AXUIElementPerformAction(
    screenMirroring,
    // Wtf is this action name, Apple??
    'Name:show details\nTarget:0x0\nSelector:(null)',
  );
  if (
    !(() => {
      const timeout = new Date().getTime() + 2000;
      while (true) {
        $.AXUIElementCopyAttributeValue(modulesGroup, 'AXChildren', $children);
        if (
          typeof $children[0] == 'function' &&
          ($children[0].js.length ?? 0) > 0
        ) {
          return true;
        }
        if (new Date().getTime() > timeout) {
          return false;
        }
        delay(0.1);
      }
    })()
  ) {
    return;
  }

  // Get the scroll area containing the device mirroring options.
  const mirroringOptions = $children[0].js.find((child) => {
    $.AXUIElementCopyAttributeValue(child, 'AXRole', $attr);
    return $attr[0].js == 'AXScrollArea';
  });

  // Get all mirroring options.
  $.AXUIElementCopyAttributeValue(mirroringOptions, 'AXChildren', $children);

  // Locate the toggle element for the target mirroring device.
  const toggle = $children[0].js
    .filter((child) => {
      $.AXUIElementCopyAttributeValue(child, 'AXRole', $attr);
      return $attr[0].js == `AXCheckBox`;
    })
    .find((child) => {
      $.AXUIElementCopyAttributeValue(child, 'AXIdentifier', $attr);
      return $attr[0].js == `screen-mirroring-device-${TARGET_DEVICE_NAME}`;
    });

  if (!toggle) {
    console.log(
      'Error: Could not get toggle for target screen-mirroring device.',
    );
    return 1;
  }

  // Press the toggle for the target device.
  $.AXUIElementPerformAction(toggle, 'AXPress');

  // Send ⎋ to dismiss Control Center.
  $.CGEventPost($.kCGHIDEventTap, $.CGEventCreateKeyboardEvent(null, 53, true));
  $.CGEventPost($.kCGHIDEventTap, $.CGEventCreateKeyboardEvent(null, 53, true));

  return 0;
}

// prettier-ignore
(() => {
ObjC.import('Cocoa'); // yes, it's necessary -- stop telling me it isn't

ObjC.bindFunction('AXUIElementPerformAction', ['int', ['id', 'id']]);
ObjC.bindFunction('AXUIElementCreateApplication', ['id', ['unsigned int']]);
ObjC.bindFunction('AXUIElementCopyAttributeValue',['int', ['id', 'id', 'id*']]);
})();

confirm works on macOS 14 beta7, nice job!

@tylinux Good to know! Thank you for testing! :)

How do we add this to Alfred (for non-technical people)?

@tonydehnke In an existing or new workflow, choose right-click and choose Action → Run Script. Set Language to /usr/bin/osascript (JavaScript). Copy the content of this gist and paste it into the script editor text box. Apply the changes described in the header instructions, and then click Save to commit the workflow node.

Thanks!

Tested in 13.5.1 and it doesn't work in there

Works in Sonoma 14.1.1. Thanks a lot!

Been searching for a couple months of any easy way to get sidecar automated (reliably and quickly) and this works flawlessly, can't thank you enough. Works on Sonoma 14.3 (23D56).

Couldn't get it to work on Ventura 13.6.4 either, although I'm thinking this is because my OS is in another language (Spanish)

The action “Run JavaScript” encountered an error: “Error: TypeError: undefined is not an object (evaluating '$children[0].js[0]')”

@emrecengdev I'll need a little more context to help you troubleshoot. Can you tell me more about your setup? Language, Control Center config, etc.?

Works in Sonoma 14.5. Thanks a lot! This is an amazing work!!!!!!!!

Brilliant work, still working for me also!

Seems to be broken in MacOS Sequiia 15.1 Beta - has anyone else tested it there?

Doesn't work for me either - MacOS Sequiia 15.1

Any fix for 15.1?

Any fix for 15.1?

I tried to fix for 1-2 hours, though i'm not familiar with any of the technologies except javaScript with some help of gpt.
Works for 15.2. Not perfectly though.

function run(_) {
const TARGET_DEVICE_NAME = 'YOUR_DEVICE_NAME'
  const $attr = Ref()
  const $windows = Ref()
  const $children = Ref()

  // Get the current Control Center PID.
  const pid =
    $.NSRunningApplication.runningApplicationsWithBundleIdentifier('com.apple.controlcenter').firstObject
      .processIdentifier

  // Get the Control Center application.
  const app = $.AXUIElementCreateApplication(pid)

  // Get the Control Center menubar extra children.
  $.AXUIElementCopyAttributeValue(app, 'AXChildren', $children)
  $.AXUIElementCopyAttributeValue($children[0].js[0], 'AXChildren', $children)

  // Locate the Control Center menubar extra (also has Clock, Users, etc.).
  const ccExtra = $children[0].js.find((child) => {
    $.AXUIElementCopyAttributeValue(child, 'AXIdentifier', $attr)
    return $attr[0].js == 'com.apple.menuextra.controlcenter'
  })

  // Open Control Center window and await draw.
  $.AXUIElementPerformAction(ccExtra, 'AXPress')
  if (
    !(() => {
      const timeout = new Date().getTime() + 2000
      while (true) {
        $.AXUIElementCopyAttributeValue(app, 'AXWindows', $windows)
        if (typeof $windows[0] == 'function' && ($windows[0].js.length ?? 0) > 0) {
          return true
        }
        if (new Date().getTime() > timeout) {
          return false
        }
        delay(0.1)
      }
    })()
  ) {
    return
  }

  // Get Control Center window children.
  $.AXUIElementCopyAttributeValue($windows[0].js[0], 'AXChildren', $children)

  // Locate the Control Center modules group.
  const modulesGroup = $children[0].js.find((child) => {
    $.AXUIElementCopyAttributeValue(child, 'AXRole', $attr)
    return $attr[0].js == 'AXGroup'
  })

  // Get the individual modules within the modules group.
  $.AXUIElementCopyAttributeValue(modulesGroup, 'AXChildren', $children)

  // Locate the screen-mirroring module.
  const screenMirroring = $children[0].js.find((child) => {
    $.AXUIElementCopyAttributeValue(child, 'AXIdentifier', $attr)
    return $attr[0].js == 'controlcenter-screen-mirroring'
  })

  // Activate the screen mirroring module and await draw.
  $.AXUIElementPerformAction(
    screenMirroring,
    // Wtf is this action name, Apple??
    'Name:show details\nTarget:0x0\nSelector:(null)'
  )
  if (
    !(() => {
      const timeout = new Date().getTime() + 2000
      while (true) {
        $.AXUIElementCopyAttributeValue(modulesGroup, 'AXChildren', $children)
        if (typeof $children[0] == 'function' && ($children[0].js.length ?? 0) > 0) {
          return true
        }
        if (new Date().getTime() > timeout) {
          return false
        }
        delay(0.1)
      }
    })()
  ) {
    return
  }

  // Get the scroll area containing the device mirroring options.
  const mirroringOptions = $children[0].js.find((child) => {
    $.AXUIElementCopyAttributeValue(child, 'AXRole', $attr)
    return $attr[0].js == 'AXScrollArea'
  })

  // Get all mirroring options.
  $.AXUIElementCopyAttributeValue(mirroringOptions, 'AXChildren', $children)

  // First, check if we're in the connected state by looking for "Use As Extended Display"
  const isConnected = $children[0].js.some((child) => {
    $.AXUIElementCopyAttributeValue(child, 'AXRole', $attr)
    if ($attr[0].js !== 'AXCheckBox') return false

    $.AXUIElementCopyAttributeValue(child, 'AXDescription', $attr)
    return $attr[0].js === 'Use As Extended Display'
  })

  if (isConnected) {
    // Look for the disclosure triangle to go back
    const backButton = $children[0].js.find((child) => {
      $.AXUIElementCopyAttributeValue(child, 'AXRole', $attr)
      return $attr[0].js === 'AXDisclosureTriangle'
    })

    if (!backButton) {
      console.log('Error: Could not find back button')
      return 1
    }

    // Click the back button
    $.AXUIElementPerformAction(backButton, 'AXPress')

    // Wait a moment for the UI to update
    delay(0.5)

    // Get the updated children
    $.AXUIElementCopyAttributeValue(mirroringOptions, 'AXChildren', $children)
  }

  // Now look for our device toggle
  const toggle = $children[0].js.find((child) => {
    $.AXUIElementCopyAttributeValue(child, 'AXRole', $attr)
    if ($attr[0].js !== 'AXCheckBox') return false

    $.AXUIElementCopyAttributeValue(child, 'AXDescription', $attr)
    return $attr[0].js === TARGET_DEVICE_NAME
  })

  if (!toggle) {
    console.log('Error: Could not get toggle for target screen-mirroring device.')
    console.log('Target device name:', TARGET_DEVICE_NAME)
    return 1
  }

  // Toggle the device
  $.AXUIElementPerformAction(toggle, 'AXPress')
  return 0
}

// prettier-ignore
(() => {
ObjC.import('Cocoa'); // yes, it's necessary -- stop telling me it isn't

ObjC.bindFunction('AXUIElementPerformAction', ['int', ['id', 'id']]);
ObjC.bindFunction('AXUIElementCreateApplication', ['id', ['unsigned int']]);
ObjC.bindFunction('AXUIElementCopyAttributeValue',['int', ['id', 'id', 'id*']]);
ObjC.bindFunction('AXUIElementCopyAttributeNames', ['int', ['id', 'id*']]);
})();

@phewstaff Thanks a lot for your efforts! I got it fixed as well by your code.

This is amazing! Does anyone have a scrip that turns off mirroring?