Chrome Extension Web Help

A powerful Chrome extension that helps users find and interact with content on web pages. Built with React, TypeScript, and Material-UI, it provides an intuitive way to search for text and interact with clickable elements on any webpage.

Features

• 🔍 Smart Text Search: Quickly find any text on the webpage
• 🎯 Clickable Element Detection: Automatically identifies and helps you interact with buttons and links
• ⚡ Top-Down Search: Prioritizes finding matches from the top of the page
• 🎨 Visual Highlighting:
  • Highlights matches with a blue background and white text
  • Adds a pulsing animation to draw attention
  • Auto-fades after 15 seconds
• 📱 Smart Navigation:
  • "Take Me There" button appears when clickable elements are found
  • Automatically clicks the element for you
• 🔄 Dynamic Content Support: Works with dynamically loaded content
• 🎨 Modern Material UI: Clean and intuitive interface with loading states
• ⚡ Instant Feedback: Real-time search results and error messages
• 🔒 Safe Operation: Works entirely client-side with no data collection

Installation

1. Clone the repository:

git clone https://github.com/Praise-Bah/Chrome-Extension-Web-Help.git
cd Chrome-Extension-Web-Help

2. Install dependencies:

npm install

3. Build the extension:

npm run build

4. Load the extension in Chrome:
   • Open Chrome and navigate to chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the dist folder from your project directory

Usage

1. Click the extension icon in your browser toolbar
2. Enter your search text (minimum 2 characters)
3. Press Enter or click the Search button
4. The extension will:
   • Highlight the first match on the page
   • Scroll to the matched content
   • Show a "Take Me There" button if the match is clickable
5. Click "Take Me There" to automatically click the matched element

Special Features

• Highlight Duration: Highlights automatically fade after 15 seconds
• Continuous Search: You can search for new terms before the previous highlight expires
• Error Handling: Clear messages when:
  • No matches are found
  • The page has restrictions
  • The search text is too short

Supported Clickable Elements

The extension detects various types of clickable elements:

• HTML buttons and links
• Elements with click handlers
• Elements with role="button"
• Elements with cursor: pointer style
• Interactive elements in dynamic content

Development

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Project Structure

src/
├── components/     # React components
├── popup/         # Extension popup UI
├── contentScript/ # Page interaction logic
└── css/          # Styles

Development Commands

• npm run dev - Start development mode
• npm run build - Build production version
• npm run test - Run tests
• npm run lint - Run linting

Known Limitations

The extension may have limited functionality on:

1. Sites with strict Content Security Policy (CSP)
2. Cross-origin iframes
3. Some Single Page Applications (SPAs)
4. Websites that actively prevent content modification

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License

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

Acknowledgments

• Built with Material-UI for the interface
• Uses webextension-polyfill for cross-browser support
• Based on React TypeScript Web Extension Starter