ifvictr · March 6, 2024 20:23 · Mar 6, 2024 · Sep 1, 2023 · Aug 25, 2023 · Aug 25, 2023
diff --git a/content.js b/content.js
@@ -16,11 +16,14 @@ window.addEventListener('load', () => {
 		// 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 && isMessageHistoryLoaded) {
+			if (
+				isFormLoaded &&
+				(isNewChat || (!isNewChat && isMessageHistoryLoaded))
+			) {
 				observer.disconnect()
-
 				sendMessage(query)
 			}
 		})

diff --git a/README.md b/README.md
@@ -2,6 +2,10 @@
 
 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.

diff --git a/content.js b/content.js
@@ -9,19 +9,21 @@ function sendMessage(message) {
 	sendButton.click()
 }
 
-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 isMessageHistoryLoaded =
-			document.querySelector('div[class^="react-scroll-to-bottom"]') !== null // Needed to be able to send in existing chats
-		if (isFormLoaded && isMessageHistoryLoaded) {
-			observer.disconnect()
+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 isMessageHistoryLoaded =
+				document.querySelector('div[class^="react-scroll-to-bottom"]') !== null // Needed to be able to send in existing chats
+			if (isFormLoaded && isMessageHistoryLoaded) {
+				observer.disconnect()
 
-			sendMessage(query)
-		}
-	})
-	observer.observe(document.body, { childList: true, subtree: true })
-}
+				sendMessage(query)
+			}
+		})
+		observer.observe(document.body, { childList: true, subtree: true })
+	}
+})
diff --git a/content.js b/content.js
@@ -12,7 +12,7 @@ function sendMessage(message) {
 const params = new URLSearchParams(window.location.search)
 const query = params.get('q')
 if (query) {
-	// We can only send after the main page content has loaded
+	// We can only send after the main page content renders
 	const observer = new MutationObserver(() => {
 		const isFormLoaded = document.querySelector('form') !== null
 		const isMessageHistoryLoaded =

diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ The setup for this consists of two parts: creating the Boost and creating the se
 
 ### Creating the Boost
 
-1. Go to `arc://boost/new` and select the "Inject" template.
+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`](https://gist.github.com/ifvictr/61ba480dd85152b740cf14f59b8dc38c#file-content-js).
 4. (Optional) Click on the gear icon on the top-left corner and name the Boost "ChatGPT Search Helper".

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # ChatGPT Search Helper
 
-An Arc Boost that lets you message ChatGPT directly from the Command Bar.
+An Arc Boost that lets you message ChatGPT from the Command Bar.
 
 ## Setup
 

diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ The setup for this consists of two parts: creating the Boost and creating the se
 
 1. Go to `arc://boost/new` 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. Copy the contents of [`content.js`](https://gist.github.com/ifvictr/61ba480dd85152b740cf14f59b8dc38c#file-content-js) and paste it into the Boost editor.
+3. Delete the example code from the Boost editor, then replace it with the contents of [`content.js`](https://gist.github.com/ifvictr/61ba480dd85152b740cf14f59b8dc38c#file-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

diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ The setup for this consists of two parts: creating the Boost and creating the se
 
 1. Go to `arc://boost/new` 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. Copy the contents of `content.js` from this Gist and paste it into the Boost editor.
+3. Copy the contents of [`content.js`](https://gist.github.com/ifvictr/61ba480dd85152b740cf14f59b8dc38c#file-content-js) and paste it into the Boost editor.
 4. (Optional) Click on the gear icon on the top-left corner and name the Boost "ChatGPT Search Helper".
 
 ### Creating the search shortcut

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ An Arc Boost that lets you message ChatGPT directly from the Command Bar.
 
 ## Setup
 
-The setup for this consists of two parts: creating the boost and creating the shortcut.
+The setup for this consists of two parts: creating the Boost and creating the search shortcut.
 
 ### Creating the Boost
 
@@ -13,8 +13,8 @@ The setup for this consists of two parts: creating the boost and creating the sh
 3. Copy the contents of `content.js` from this Gist and paste it into the Boost editor.
 4. (Optional) Click on the gear icon on the top-left corner and name the Boost "ChatGPT Search Helper".
 
-### Creating the shortcut
+### 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 went with "ChatGPT" and "c". Click "Add" afterwards.
-3. It is done! You can start messaging ChatGPT from your Command Bar now.
+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.
diff --git a/README.md b/README.md
@@ -0,0 +1,20 @@
+# ChatGPT Search Helper
+
+An Arc Boost that lets you message ChatGPT directly from the Command Bar.
+
+## Setup
+
+The setup for this consists of two parts: creating the boost and creating the shortcut.
+
+### Creating the Boost
+
+1. Go to `arc://boost/new` 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. Copy the contents of `content.js` from this Gist and paste it into the Boost editor.
+4. (Optional) Click on the gear icon on the top-left corner and name the Boost "ChatGPT Search Helper".
+
+### Creating the 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 went with "ChatGPT" and "c". Click "Add" afterwards.
+3. It is done! You can start messaging ChatGPT from your Command Bar now.
diff --git a/content.js b/content.js
@@ -0,0 +1,27 @@
+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()
+}
+
+const params = new URLSearchParams(window.location.search)
+const query = params.get('q')
+if (query) {
+	// We can only send after the main page content has loaded
+	const observer = new MutationObserver(() => {
+		const isFormLoaded = document.querySelector('form') !== null
+		const isMessageHistoryLoaded =
+			document.querySelector('div[class^="react-scroll-to-bottom"]') !== null // Needed to be able to send in existing chats
+		if (isFormLoaded && isMessageHistoryLoaded) {
+			observer.disconnect()
+
+			sendMessage(query)
+		}
+	})
+	observer.observe(document.body, { childList: true, subtree: true })
+}