An extension to capture the summary and category of the highlighted text on a webpage
TypeScript
Front Door Labs Assignment
Requirements
Chrome extension: Create a Chrome extension with a popup that includes a button to enable/disable the feature and a list of summaries generated so far. [Did using context menu and react page]
React components: Develop reusable React components for the popup, highlights list, and summary tooltip. Enable sorting and filtering by date and tags in the highlights list. [The list of summaries comes pre-sorted in descending order of priority per tag]
State management: Use React hooks and context API to manage the application state. Ensure that the state is properly typed using TypeScript. [DONE]
TypeScript: Strictly use TypeScript throughout the project and ensure proper typing for all components and functions. [DONE, only used background js currently. Didn't have the time span to convert it to typescript. Rest is purely typescript]
Highlight functionality: Allow users to highlight text on a webpage by selecting it with their mouse when the feature is enabled. Show the summary in the tooltip along with associated tags when a user clicks on a highlight. [Did with right context menu, and provided an easy button feature for easier functionality, highlighting text wasn't covering all edge cases.]
API integration: Integrate the OpenAI API to process the highlighted text and generate a brief summary. Ensure that the API calls are properly handled in the backend. [DONE]
Display the summary: Show the summary in a tooltip when the user hovers over the highlighted text using a custom React component. Ensure that the tooltip is properly positioned and styled. [DONE; display summary + tags]
Backend: Implement a NestJS backend that will handle the API calls to OpenAI and any necessary processing. The backend should be properly tested using Jest and Supertest. [Unit testing done]
Data persistence: Store the user's highlights and summaries using MongoDB. Ensure that the data models are properly typed and that the database calls are properly handled. [DONE using docker mongodb image]
Testing: Write unit tests for your code to ensure the proper functionality of the Chrome extension, with a focus on testing React components and TypeScript typings. Write integration tests for the backend using Jest and Supertest. [Did unit & integration testing for backend]
How to setup?
Backend
In one terminal: cd backend
Run the following:
npm install --no-audit
yarn add
Run the following command to build the node image and setup the MongoDB:
docker-compose -f docker-compose.yaml up --build
Backend will be running on port 8080: http://localhost:8080
To run the test within the same folder: npm run test
Once you have finished using the project, delete all docker images using:
docker-compose -f docker-compose.yaml down
Test Suites: 2 passed, 2 total
Tests: 6 passed, 6 total
Snapshots: 0 total
Time: 48.976 s
Ran all test suites.
Extension
In another terminal: cd frontdoorlabs-extension
Run the following:
npm install --no-audit
yarn add
To build the folder to use it as an extension, run the
following:
npm run build
Once build is done, run the following command:
npm run start
Load Unpack on chrome://extension in your browser. The
video FrontDoor Labs.mov shows detailed manner of how I
implemented.