• Contextual Highlighting: Select any text to translate and save it. The extension automatically highlights this word on the current page and any future pages you visit.
• Inline Translation: View translations instantly by hovering over highlighted words.
• Multi-Color Organization: Choose from a customizable color palette when marking words to organize by category, difficulty, or any system you prefer.
• Site-Specific Disabling: Easily disable the extension on specific websites directly from the popup. Great for avoiding interference on sensitive or complex sites.
• Allowlist Mode: In settings, switch to allowlist mode to disable the extension on all sites by default and only enable selected sites.
• Smart Management:
  • Edit: Click the translation label to modify it instantly.
  • Word Action Bubble: Click a highlighted word to open a floating action bubble for delete, recolor, and pronunciation.

• Auto-Translate Mode: Automatically translate selected words using Google Translate API (default).
• Manual Mode: Disable auto-translate in settings to enter your own custom translations via prompt.
• Language Selection: Choose both source and target languages, with auto-detection available for source language.
• Pronunciation Audio Source: Pronunciation uses the Free Dictionary API audio endpoint first, then falls back to browser speech synthesis when no audio is available.

• Settings Page: Centralized configuration for all extension preferences:
  • Extension Theme: Customize the primary color for the UI and default highlights.
  • Color Palette: Add, remove, and manage colors for organizing your vocabulary.
  • Translation Settings: Toggle auto-translate on/off.
  • Factory Reset: Restore all settings to defaults (vocabulary is preserved).
• Quick Tips: Built-in help section in settings to guide you through features.

• Filtering: Toggle between viewing words saved on the Current Page or your Entire History.
• Source Linking: When viewing "All Words", click the link to jump back to the exact page where you originally saved the word.
• Search: Quickly find specific words in your vocabulary list.
• Export: Export your vocabulary list to CSV for study in Anki or Excel.

• Privacy Focused: All data is stored locally in your browser (chrome.storage.local).
• Zero Dependencies: Built with vanilla HTML/CSS/JS for maximum performance.

1. Clone this repository:

   git clone https://github.com/yourusername/mark-my-words.git

2. Open Chrome and navigate to chrome://extensions/.
3. Enable Developer mode in the top right corner.
4. Click Load unpacked.
5. Select the directory where you cloned the repository.

1. Select & Save: Highlight any text on a webpage. A floating "Mark It" button will appear with a color palette.
2. Choose Color (Optional): Click a color dot to mark the word with that specific color, or click the main button to use the default theme color.
3. Translation:
   • With auto-translate enabled (default): The word is automatically translated.
   • With auto-translate disabled: You'll be prompted to enter a custom translation.

1. View List: Click the extension icon to open the popup.
2. Filter: Use the toggle switch to view words from the "Current Page" or "All" pages.
3. Search: Type in the search box to find specific words.
4. Language Settings: Select source and target languages (only visible when auto-translate is enabled).
5. Export: Click the export button to download your vocabulary as CSV.

1. Open Settings: Click the gear icon in the popup header.
2. Customize Theme: Choose your preferred primary color for the extension UI.
3. Manage Colors: Add or remove colors from your marking palette.
4. Translation Mode: Toggle auto-translate on/off based on your preference.
5. Site Mode: Toggle allowlist mode for default-off site behavior.
6. Reset: Use the factory reset button to restore default settings if needed.

• Edit Translation: Click any translation bubble to modify the text.
• Word Actions: Click a highlighted word to open a bubble menu.
• Delete Word: Use the delete button in the bubble menu to remove it from your vocabulary.
• Change Color: Use color dots in the bubble menu to update the word's highlight color (including default color).
• Pronunciation: Use the speaker button in the bubble menu to pronounce the word.
• Hover to View: Hover over any highlighted word to see its translation.

The project is built with vanilla HTML/CSS/JS for maximum performance and zero dependencies.

• manifest.json: Extension configuration (Manifest V3).
• main/:
  • content.js: Handles text selection, highlighting, and DOM manipulation.
  • background.js: Manages translation API calls.
  • styles.css: Shared styles for content injection.
• popup/: Browser action popup UI for vocabulary management.
• settings/: Settings page for extension configuration.

No build step is required! Just edit the files and click the Refresh icon on the extension card in chrome://extensions/ to see changes.

See CHANGELOG.md for version history and release notes.

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License - see the LICENSE file for details.