A Linkedin AI Extension

ezyZip.mp4

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Tasks
4. 🤸 Quick Start

🤖 Introduction

To build a Chrome extension that runs on LinkedIn and assists users in generating replies to messages. This is a demo extension, so

there's no need to make actual API calls for generating responses.

⚙️ Tech Stack

• React
• Typescript
• TailwindCSS

🔋 Tasks

👉 Show the AI icon when the user focuses on the LinkedIn message input field.

👉 The icon should disappear when the input field is no longer focused.

👉 Display a center-aligned modal when clicking on the icon .

👉 Clicking anywhere outside this modal should close it.

👉 The user can enter any command in the modal's input field.

👉 Clicking on the “Generate” button should just display this dummy response: `Thank you for the opportunity! If you have any more

questions or if there's anything else I can help you with, feel free to ask.`

👉 When the user clicks on the insert button, the generated static text should be inserted properly into the message input field

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• [Typescript]
• npm (Node Package Manager)

Constraints

• You must use WXT Framework for building the extension.

• You must use React with TypeScript.

• You must use Tailwind CSS for styling.

  Code Quality

  Qualities of good code:

  1. Readable

  2. Performant

  3. Failproof

  4. Extensible