Inspiration
After Microsoft acquired Open A.I., they built in the ChatGPT systems to Bing's searches, which allows any user to have a ChatGPT response to any input they put in the search bar. We wanted to replicate this process, but in the Google browser rather than the Bing browser.
What it does
This Google Chrome extension that we created allows for the user to type in any prompt in the Google search bar and have a response given to them that was generated by Open A.I.'s ChatGPT.
How we built it
We built our extension using HTML and Javascript. We had a content script that would always run whenever the tab was on Google Search. This content script would take in the input that the user gave and passes it to a server that calls Open AI's API. This server will then return ChatGPT's response. We then take this response and display it on the right side of Google Search screen for the user.
Challenges we ran into
- Figuring out how to access which areas of the HTML page that we wanted to input our div into and how to manipulate them to our needs.
- Understanding how a background script is able to communicate with the content script that displays everything on the webpage.
- Configuring proper HTTP request headers that comply with security standards.
Accomplishments that we're proud of
- The finished product looks better than we thought it would given our lack of experience with UI design.
- Unintended added features that we thought of during the development process were completed comfortably.
What we learned
We learned about the role and functionality of the Document Object Model, basic UI styling principles and practices, and sending, tailoring, and receiving HTTP requests.
What's next for Built in ChatGPT searches for Google
We eventually want to launch our extension on the Google Chrome extension webstore. This would require hosting our local server in the cloud and adding features that we weren't able to add during the span of HackIllinois.
Built With
- chatgpt-api
- css
- html
- javascript
Log in or sign up for Devpost to join the conversation.