https://github.com/bakangmonei/my-first-browser-extension
I created my first browser extension after watching a simple youtube video, Using tailwindcss, and reactjs
https://github.com/bakangmonei/my-first-browser-extension
api react rest-api shadcn-ui tailwindcss
Last synced: about 2 months ago
JSON representation
I created my first browser extension after watching a simple youtube video, Using tailwindcss, and reactjs
- Host: GitHub
- URL: https://github.com/bakangmonei/my-first-browser-extension
- Owner: BakangMonei
- License: mit
- Created: 2024-04-07T12:20:37.000Z (about 2 years ago)
- Default Branch: neizatheedev
- Last Pushed: 2024-04-07T13:37:18.000Z (about 2 years ago)
- Last Synced: 2025-02-09T17:35:16.606Z (over 1 year ago)
- Topics: api, react, rest-api, shadcn-ui, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 217 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Dictionary Extension
This is a browser extension that allows users to search for word definitions and phonetics using an online dictionary API.
## Getting Started
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
### Prerequisites
- Node.js and npm installed on your machine.
### Installation
1. Clone the repository to your local machine:
```
git clone https://github.com/BakangMonei/my-first-browser-extension
```
2. Navigate to the project directory:
```
cd my-first-browser-extension
```
3. Install dependencies:
```
npm i
```
### Development
To run the extension in DevMode:
1. Build the extension:
```
npm run build
```
2. Load the extension in your browser:
- Open your browser (e.g., Chrome, Firefox).
- Navigate to chrome://extensions/ (for Chrome) or about:addons (for Firefox).
- Enable **Developer mode**.
- Click on "Load unpacked" or "Load temporary add-on".
- Select the build directory within your project folder.
3. The extension should now be installed and ready to use in DevMode.
### Usage
Once the extension is installed and enabled, you can use it to search for word definitions:
**1. Typing Word**
- Click on the extension icon in your browser toolbar to open the popup.
- Type a word into the search input field.
- Click the "Search" button or press Enter to search for the word.
- View the results displayed in the popup.
**2. Pronouncing Words**
- Click on the "Listen" icon next to the phonetic transcription of a word.
- The audio pronunciation will be played.
### Built With
**ReactJs:** JavaScript library for building user interfaces.
**Tailwind CSS:** A utility-first CSS framework for rapid UI development.
## Author
Monei Bakang Mothuti