Skip to content

Instantly share code, notes, and snippets.

@ifvictr
Last active March 6, 2024 20:23
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ifvictr/61ba480dd85152b740cf14f59b8dc38c to your computer and use it in GitHub Desktop.
Save ifvictr/61ba480dd85152b740cf14f59b8dc38c to your computer and use it in GitHub Desktop.
An Arc boost that lets you message ChatGPT from the Command Bar.

ChatGPT Search Helper

An Arc Boost that lets you message ChatGPT from the Command Bar.

Demo

Video here: https://twitter.com/ifvictr/status/1695141929535811821

Setup

The setup for this consists of two parts: creating the Boost and creating the search shortcut.

Creating the Boost

  1. Go to arc://boost/new (or enter New Legacy Boost (Advanced) in the Command Bar) and select the "Inject" template.
  2. When asked what you want to boost, select "A specific website" and enter chat.openai.com. Then, click "Create Boost".
  3. Delete the example code from the Boost editor, then replace it with the contents of content.js.
  4. (Optional) Click on the gear icon on the top-left corner and name the Boost "ChatGPT Search Helper".

Creating the search shortcut

  1. Go to arc://settings/searchEngines.
  2. Next to "Site search", click "Add". In the field under "URL with %s in place of query", enter https://chat.openai.com/?q=%s. Choose whatever name and shortcut you like. Personally, I chose "ChatGPT" and "c". Click "Add" afterwards.
  3. It is done! You can now use the shortcut you made to message ChatGPT from your Command Bar.
function sendMessage(message) {
const form = document.querySelector('form')
const textarea = form.querySelector('textarea')
textarea.value = message
textarea.dispatchEvent(new Event('input', { bubbles: true })) // Prevent message from being immediately cleared
const sendButton = form.querySelector('textarea + button')
sendButton.click()
}
window.addEventListener('load', () => {
const params = new URLSearchParams(window.location.search)
const query = params.get('q')
if (query) {
// We can only send after the main page content renders
const observer = new MutationObserver(() => {
const isFormLoaded = document.querySelector('form') !== null
const isNewChat = window.location.pathname === '/'
const isMessageHistoryLoaded =
document.querySelector('div[class^="react-scroll-to-bottom"]') !== null // Needed to be able to send in existing chats
if (
isFormLoaded &&
(isNewChat || (!isNewChat && isMessageHistoryLoaded))
) {
observer.disconnect()
sendMessage(query)
}
})
observer.observe(document.body, { childList: true, subtree: true })
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment