Urban Dictionary Chrome Extension

This Chrome extension allows you to easily look up definitions for slang words and phrases from Urban Dictionary. Inspired by the Google Translate extension, it enables users to select text on a webpage to find the definition or enter a term directly in the popup window.

Features

• Text Selection Lookup: Highlight any slang word or phrase on a webpage and quickly get its definition.
• Popup Input: Open the extension's popup window and manually type any word or phrase to get the definition.
• Clean, modern UI designed with React and TypeScript.

Technologies Used

• React
• TypeScript
• Material UI
• SCSS (modular styles)
• Chrome Extensions API

Folder Structure

urban-dictionary-extension/
├── components/        # Contains reusable React components
├── interfaces/        # TypeScript interfaces for props and types
├── App.tsx            # Main application file
├── index.tsx          # Entry point of the extension
├── App.css            # Global styles
├── Custom.module.scss # Scoped modular styles for components
├── setupTests.ts      # Configuration for testing
├── reportWebVitals.ts # Performance reporting (optional)
└── react-app-env.d.ts # TypeScript environment configuration

Installation

1. Clone the repository:

   git clone https://github.com/your-username/urban-dictionary-extension.git
   cd urban-dictionary-extension

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

4. Load the extension in Chrome:

   • Open chrome://extensions in your browser.
   • Enable Developer Mode (toggle in the top right).
   • Click Load unpacked and select the build/ folder.

Usage

• Selecting Text:

  1. Highlight a word or phrase on any webpage.
  2. Right-click and choose "Define with Urban Dictionary" from the context menu.

• Using the Popup:

  1. Click the extension icon in the Chrome toolbar.
  2. Enter a slang term in the input field.
  3. Press "Search" to see the definition.

Development

To run the extension in development mode:

npm start

This will start a development server. You can make live changes and see updates immediately.

Contributing

Contributions are welcome! If you'd like to contribute:

1. Fork the repository.
2. Create a new branch (feature/your-feature-name).
3. Commit your changes.
4. Push to your branch and submit a pull request.

License

This project is licensed under the MIT License. See LICENSE for details.

Screenshots

Include screenshots of the extension UI (popup and text selection definition lookup) if possible.

---

Feel free to modify this README file to include any additional information specific to your extension!