Thesaurus Rex is a powerful and user-friendly Chrome extension designed to help you quickly access word definitions, use cases, and more. With its intuitive popup interface, you can effortlessly look up words and manage bookmarks for your favorite entries.
You can easily install Thesaurus Rex from the Chrome Web Store:
- Visit the Chrome Web Store page
- Click Add to Chrome.
- Once installed, the Thesaurus Rex icon will appear in your browser toolbar. Click on it to begin using the extension.
- Word Definition Lookup: Quickly find the meaning, part of speech, and pronunciation of any word you highlight on a webpage.
- Synonym Suggestions: Get a list of synonyms for your selected word to enhance your vocabulary.
- Bookmark Your Favorite Words: Save words you want to revisit later in your bookmarks section.
- Sound on Definition: Optionally, enable a sound effect that plays whenever a word's definition is displayed for better engagement.
- Highlight a word: Simply highlight any word on a webpage to activate the extension.
- View Definition: After highlighting the word, click the Thesaurus Rex icon in the browser toolbar to see the definition, synonyms, and other details.
- Bookmark Words: You can easily bookmark words for quick future reference, storing them within the extension.
- Customize Your Settings: Access the settings to toggle options like display button visibility and sound effects.
Thesaurus Rex was built with modern web technologies to ensure speed, reliability, and a smooth user experience:
- React: The popup interface and modal window are built with React, ensuring a dynamic and responsive user interface.
- Vite: For fast development and quick hot-reloading during the development process, I used Vite to bundle and optimize the code.
- Chrome Extension APIs: The extension leverages various Chrome APIs to store user data (bookmarks) locally and interact with the browser.
- Word API Integration: I integrated a powerful external API to fetch word definitions, phonetics, and synonyms. This API enables the extension to pull real-time word data and display it instantly when a user queries a word.
- CSS Transitions: To enhance the UI, smooth transitions and animations are applied when the user interacts with the popup, making for a polished, seamless experience.
The extension’s popup modal is built with React to dynamically display the word definitions and manage the user interface:
- React State Management: React hooks like
useStateanduseEffectmanage the app’s state, including user settings and bookmarks. - Conditional Rendering: The extension intelligently switches between different screens (Settings and Bookmarks) using conditional rendering.
- CSSTransition: React Transition Group is used for smooth transitions and animations when adding or removing bookmarks.
- Chrome Storage API: Bookmarks are stored locally using the
chrome.storage.localAPI. This allows bookmarks to persist between sessions without needing an external database. - Bookmark UI: Bookmarks are displayed in the modal and can be removed easily by clicking the 'X' button next to each word.
The extension fetches word definitions, synonyms, and phonetic data from a reliable word API. The response from the API is parsed and displayed within the popup in an organized manner. Here’s a brief breakdown of how the API is used:
-
Word Lookup: The word selected by the user is sent to the API, which returns a JSON response containing:
- Definition(s)
- Part of speech (noun, verb, etc.)
- Phonetic pronunciation (IPA or audio)
- Synonyms
-
Error Handling: In case the API doesn’t return a result (e.g., for rare or slang words), a fallback message is displayed, notifying the user that no information could be retrieved.
The popup UI is designed to be minimalistic yet informative, showing:
- The word and its definition(s).
- Phonetic transcription and audio (if available).
- A list of synonyms to help the user broaden their vocabulary.
In the Settings screen of the extension, users can toggle:
- Display Button: Show or hide the quick-access button that appears when the user highlights a word.
- Play Sound on Definition: Toggle an audio cue that plays whenever a word’s definition is displayed, enhancing the experience.
- Synonym Suggestions: Plan to implement more advanced synonym filtering based on context.
- Improved UI/UX: Further improvements to make the extension even more intuitive, such as adding a history feature to revisit past lookups.
- Expanded Word Database: Integrating additional word sources for more comprehensive definitions and examples.
If you would like to contribute to Thesaurus Rex, feel free to fork the repository and create a pull request with your suggested improvements. Any contributions to improve functionality, UI/UX, or performance are welcome!
This project is licensed under the MIT License - see the LICENSE file for details.