How to trigger a button click in ChatGPT's interface using JS?

Other Questions JavaScript
1

I’m trying to set up a Safari script to do some stuff automatically in ChatGPT. The tricky part is getting it to click the plus icon next to the input box.

I’ve tried the usual JavaScript approach:

let plusIcon = document.querySelector('.some-class-for-plus-icon');
plusIcon.click();

But it’s not working on the ChatGPT page. The button just won’t respond. Any ideas on how to make this work?

I know about the ChatGPT API but that’s not what I need right now. I’m using Safari’s JavaScript feature in AppleScript to run these commands.

Anyone have experience with this? What am I missing here?

2

I’ve encountered similar issues when automating interactions with complex web applications. In ChatGPT’s case, the interface likely uses React or a similar framework, which can complicate direct DOM manipulation. Have you considered using MutationObserver to detect when the plus icon becomes available? This approach might be more reliable:

const observer = new MutationObserver((mutations) => {
  const plusIcon = document.querySelector('.plus-icon-class');
  if (plusIcon) {
    plusIcon.click();
    observer.disconnect();
  }
});

observer.observe(document.body, { childList: true, subtree: true });

This method waits for the icon to appear in the DOM before attempting to click it, which could solve timing-related issues.

3

I’ve dealt with similar challenges when automating web interfaces. One approach that’s worked for me is using JavaScript’s built-in setTimeout function to delay the click action. This gives the page time to fully load and render all elements:

setTimeout(() => {
  const plusButton = document.querySelector('button[aria-label="New chat"]');
  if (plusButton) {
    plusButton.click();
  } else {
    console.log('Button not found');
  }
}, 2000);

This waits 2 seconds before attempting to click the button. You might need to adjust the delay based on your connection speed. Also, make sure you’re using the correct selector - I’ve found that ChatGPT often uses aria-labels for accessibility, which can be more reliable than class names.

4

hey liamj, have u tried using a custom event instead? smth like:

let event = new MouseEvent('click', { bubbles: true });
document.querySelector('.plus-icon-class').dispatchEvent(event);

might work better with chatgpt’s setup. also check if theres any shadow DOM stuff goin on that could be messin with ur selector