How I Built My AI-Powered Chrome Extension?
Introduction
Hello all! In this article, I’m excited to share my journey of creating an AI-powered Chrome Extension using ChatGPT. The idea struck me one day as I was driving down the road. I thought, “What if AI could process and enhance any text selected on a webpage? That way, we could obtain valuable insights without ever leaving the page we’re currently browsing.” Despite never having built a Chrome extension before, I embarked on this adventure to bring my idea to life. Surprisingly, the process was more straightforward than I anticipated, and the learning experience was extremely rewarding.
Tools I Used
Once I had some idea of how my extension would look and work, I started learning about Chrome Extensions as I have never built an extension before. Down below you will see all the tools & resources I utilized during the project:
1. Google Chrome API Docs
2. Open AI API Docs
3. YouTube
4. ChatGPT :)
First, I started learning the fundamentals of a Chrome Extension. I checked Google’s official documentation and their sample GitHub repositories to see how the code is organized as well as the code itself.
Then, I integrated ChatGPT API into my JavaScript code using Open AI’s documentation. To be honest, it was a lot simpler and straight-forward than I thought. With a simple API call using fetch it was enough to integrate ChatGPT into my extension.
Last but not least, I decided to publish my extension to the Chrome Web Store. I will provide the link to it at the end of this article. Anyone can use the extension with their Open API key. API Key can be set after clicking on the ‘Settings’ button.
How It Works
Once the extension is installed, any selected block of text can be summarized, bulletized, and elaborated. All a user needs to do is right-click and select the operation they wish to perform. Options are; “summarize”, “key points”, and “elaborate”. Here’s a breakdown for each functionality:
- Summarize: will generate a summary of the selected text.
- Key Points: will generate bullet points that highlight the selected text.
- Elaborate: will generate longer, more descriptive, and detailed context out of the selected text.
Here’s how the menu looks when you make a selection on a webpage:
Once the text is generated by ChatGPT, it will be displayed on the side panel, making it convenient for users to read.
Challenges
The most challenging part of this project was understanding how Chrome Extensions were structured and how certain parts worked. In addition, recently Chrome has switched to Manifest version V3 which also confused me when I was researching the topic. After spending numerous hours, I managed to grasp the fundamentals and apply them to my project. The other thing I struggled with was how Chrome sandboxes certain JS environments. For instance, if you need to call an external API, you have to perform the actions in a service worker that runs in a sandboxed environment. This separation does not allow you to access the webpage DOM when you want to manipulate some HTML elements. There are some ways to do this, however, it is worth noting.
What’s Next?
As I look ahead, I’m excited about the possibilities for expanding the functionality of my extension. I’m currently exploring a few ideas that I believe will enhance user experience.
- Translation Feature: One of the additions I’m considering is a translation tool. Imagine effortlessly translating any selected text into your preferred language with a simple click. This feature would be incredibly useful for users who frequently read content in foreign languages
- Interactive Chat Feature: Another feature is an interactive chat option, where users can engage in a conversation with the AI about the generated summary. This would not only add a more dynamic, GPT-like experience but also allow users to delve deeper into topics, ask follow-up questions, and gain a more comprehensive understanding of the context
Conclusion
If you’ve read this far, thank you. It means a lot. In this short article, I tried to share my experience of building an AI integrated Chrome Extension. I have never built extensions before, however, I’m proud that I made the decision to turn my idea into a reality and all the new things I learned throughout the process. You can try this extension too at this link! That is all for now and see you next time!
