Inspiration
Our group agreed that while news and current event articles were interesting, making time to read and stay up to date was difficult. This extension is compelling because it provides a preview of articles that might be interesting, and encourages social circles to share articles and their thoughts on them in a more efficient way. By simplifying the process of reading and sharing thoughts, our Chrome extension can contribute to a more informed and more thoughtful society.
What it does
This Chrome extension firstly allows users to annotate online articles through highlighting, bolding, leaving comments, etc. directly on the webpage. It also leverages AI tools to summarize/explain portions of text readers might find confusing. The annotations are stored in a database so that on the next reload, users' annotations will reappear on the site. Additionally, these annotations can be shared using access codes which allow others to read another user's annotations on the webpage. Finally, articles can also be transformed into an infographic, customized to both the article and the reader's specific annotations of the article, which is downloadable and exportable to share with others.
How we built it
This extension was built using Javascript. We used webpack to combine background scripts which run in the background and content scripts which run on the webpage. We used HTML to host the page allowing users to login, and export annotations.
Challenges we ran into
Throughout our project, one major hurdle was ensuring that annotations remained correctly placed when users revisited a webpage. Since modifying the page’s content altered its HTML structure, reapplying annotations became inconsistent. To resolve this, we stored the annotated text itself along with its frequency, allowing us to reapply annotations reliably based on text occurrences rather than fragile HTML positioning. Another challenge was overlaying text summaries onto images generated through the DALL-E 3 API. Since the API returns an image URL, we needed a way to download the image before adding text overlays, but we repeatedly faced errors when attempting to do so. We solved this by storing the image in Base64 (X64) format instead of relying on the URL, enabling us to process the image locally, apply text overlays, and ensure proper display and download. By addressing these challenges, we significantly improved the usability and functionality of our project.
Accomplishments that we're proud of
We are proud of building a project that is so usable in everyday life. While projects with seemingly massive implications are incredibly impressive, it is also important to build something that is going to have real-life benefits. Our product does that. This is an extension that I could see myself using all the time, that I could see my friends downloading, and that I could actually imagine taking off. We are proud of finding a way that we could mark noticeable improvements in our lives and the lives of those close to us.
What we learned
Through developing WebScribe, we gained valuable insights into handling dynamic webpage structures, integrating AI tools efficiently, and optimizing user experience. We learned that modifying webpage content for annotations can disrupt HTML structure, requiring a more robust approach like text-based tracking instead of relying on element positioning. We also tackled challenges in processing AI-generated images, realizing that converting them to Base64 format allowed for smoother text overlays. Additionally, working with API integrations for real-time summaries and AI-driven infographics taught us the importance of efficient data handling and seamless UI implementation. Most importantly, this project reinforced the value of iterative problem-solving, user-centric design, and the potential of AI in enhancing digital annotation and content sharing.
What's next for WebScribe
Next for WebScribe, we aim to enhance its capabilities by integrating data analytics and deeper contextual understanding to make annotations even more intelligent and personalized. While our Chrome extension already allows users to annotate webpages, access real-time AI-generated summaries, and create shareable infographics through API integration, we want to take it further by implementing advanced natural language processing (NLP) models to analyze user interactions and provide context-aware recommendations. This includes smarter text highlighting based on relevance, tracking reading patterns, and generating insights on frequently annotated topics. Additionally, we plan to expand WebScribe’s AI-powered tools by incorporating automated summarization improvements, topic clustering, and sentiment analysis to enhance comprehension and engagement. By leveraging AI-driven analytics, we aim to refine content-sharing features, allowing users to generate dynamic, audience-tailored infographics with adaptive visualizations. Our goal is to transform WebScribe into a comprehensive, AI-augmented research and content curation tool that empowers users with deeper insights and seamless collaboration.
Log in or sign up for Devpost to join the conversation.