Read With Coffee
The Problem
Users often come across articles, websites, and resources they want to revisit later, but saving them in a quick and organized way can be inefficient. Traditional bookmarking tools often lack space for context, making it hard to remember why a page was saved. This creates friction for users who want a simple way to store links with meaningful titles and notes while browsing.
The Solution
Read With Coffee is a Chrome extension designed to help users quickly save and organize web pages directly from their browser. It allows users to save links manually or capture the current tab, then attach a custom title and note to each saved item. By combining quick bookmarking with lightweight organization, the extension makes it easier for users to revisit saved resources with clear context and purpose.
Tools & Software
HTML | CSS | JavaScript | Google Chrome
Chrome Extension APIs | LocalStorage | manifest.json |Visual Studio Code (VS Code) | Chrome DevTools | Git |GitHub | Canva
JavaScript (Vanilla JS)
-
Handles all logic:
-
Event listeners
-
Local storage
-
DOM manipulation
-
Chrome API usage
HTML (Extension UI)
-
Defines popup structure
-
Inputs (URL, notes, title)
-
Buttons (Save Input, Save Tab, Delete All)
-
Modal for adding tab details
CSS
-
Custom styling
-
Flexbox for layout
-
Modal styling (overlay, centered content)
-
Button styling and hover states
Chrome Extension APIs
-
gets active tab URL
-
Runs inside Chrome extension environment
LocalStorage
-
Stores saved leads (URL, title, note)
-
Persists data between sessions
Google Chrome DevTools
-
Console debugging
-
Inspect popup UI
-
Check errors
Visual Studio Code
-
Syntax highlighting
-
Live editing
-
File management
Controls Extension permissions
-
Controls Popup file
-
Controls Icons
-
Controls Versioning
Next Steps
Next steps for this project include enhancing functionality and improving the overall user experience. This can be done by adding features like editing saved items, search and filtering, and categorization to better organize content. Transitioning from localStorage to chrome.storage will also improve scalability and performance within the extension environment.
Conclusion
Read With Coffee solves a simple but real problem: users often save links without enough context to remember why they mattered later. By allowing users to save a URL or current tab along with a custom title and note, the extension creates a more organized and meaningful bookmarking experience. As a project, it demonstrates frontend development skills with HTML, CSS, JavaScript, and Chrome APIs, but also thoughtful UX decisions around usability, structure, and interaction design.
