This Chrome extension simplifies employee search by leveraging a local backend to query text selections. It provides employee profiles and charts for singular matches, and displays lists for multiple matches.
chromeEmpl.mp4
- Utilizes a local backend for efficient text search operations.
- Offers streamlined access to employee details and visualizations.
- Rapid response to search requests, enhancing user productivity.
- Intuitive user interface ensures smooth navigation and interaction.
-
Repository Setup:
- Create a new GitHub repository for your Chrome extension.
- Initialize the repository with a README.md file to provide an overview of the project.
-
Project Structure:
- Define the project structure. For example:
/backend /chrome-extension /src /assets /containers /pages /background /content /popup manifest.json README.md /data
- Define the project structure. For example:
-
Manifest File:
- Create a
manifest.json
file to configure the Chrome extension. - Define permissions, background scripts, content scripts, popup pages, etc., as required.
- Create a
-
Background Script:
- Implement the background script to handle text selection events and communicate with the backend.
- Set up message passing between the background script and other components.
-
Content Script:
- Develop the content script responsible for extracting selected text and sending it to the background script. -Added an EventListener that checks if a double-click event occurs on a webpage, and then injects the panel with selected text using ReactDOM
-
Popup Page: -Added a button that, when clicked, creates a panel to the right.
-
Backend Setup:
- Set up a local backend using Node.js to handle employee search queries.
- Implement APIs or routes to receive search queries and return employee data .
- This also includes chart needed API'.
-
Employee Profiles and Charts:
- Design the employee profile format and determine what information to display (e.g., firstName, age, experience,salary, etc.).
- Selected appropriate chart libraries (e.g., react-) for visualizing employee data.
- Develop components to generate and display charts based on employee data.
-
Multiple Matches Handling:
- Determine how to handle scenarios where there are multiple matches for a search query.
- Design and implement a UI to display lists of multiple matches, allowing users to select the desired employee.
- Node.js - Ensure you have Node.js installed on your machine. You can download it from here.
- MongoDB - Install MongoDB and ensure it's running on your machine. You can download it from here.
- Clone the Repository
git clone https://github.dev/akshaj65/EmployeeAnalysis-ChromeExtension.git
-
Backend Installation
Please see the Backend README.md.
-
Client Installation
Please see the Client README.md.