PERANCANGAN FITUR ANOTASI PADA CHATGPT MENGGUNAKAN EKSTENSI BROWSER

Abstract

The rapid advancement of large language models such as ChatGPT has revolutionized text-based interactions, yet lacks built-in annotation mechanisms for marking, storing, and revisiting critical conversation points. This study designs and implements a browser extension using ReactJS and Tailwind CSS with local storage via IndexedDB, following a five-stage waterfall model encompassing requirements analysis, system design, implementation, testing (black-box and user acceptance), and maintenance. The extension supports CRUD operations on annotations, automatic navigation to annotated text positions, and JSON import/export without disrupting ChatGPT’s original interface. Testing demonstrates full compliance with functional specifications, while a UAT with 11 participants reports average satisfaction scores ≥ 4.55 for usability, UI coherence, and review efficiency, confirming enhanced productivity and learning experience. In conclusion, the extension effectively facilitates critical thinking and collaboration in web-based learning, with future work exploring cross-device synchronization, real-time collaboration, and AI-driven annotation suggestions to further optimize user engagement.