Alfred Chrome Extension

Alfred Chrome Extension is a lightweight, personalized chatbot extension for Chrome, built using the Plasmo Framework and powered by Cloudflare AI. This project aims to provide an efficient and scalable solution for integrating user-specific chatbot functionalities directly into the browser.

Working Video

Check out the working demo of the Alfred-Extension on Twitter:

View the video here

---

✨ Features

• Personalized Chatbot: Offers tailored responses based on user-defined data.
• Cloudflare Workers Integration: Ensures secure and scalable backend operations.
• Lightweight and Fast: Built with performance optimization in mind.
• User-Friendly: Easy-to-use interface with seamless Chrome integration.

---

🚀 Installation

Prerequisites

• Node.js (v16 or higher)
• npm or Yarn
• Google Chrome browser

Steps to Install

1. Clone the Repository:

   git clone https://github.com/ManashAnand/Alfred-Extension.git
   cd Alfred-Extension

2. Install Dependencies:

   npm install

3. Run the Development Server:

   npm run dev

4. Build the Extension:

   npm run build

5. Load the Extension in Chrome:

   • Open chrome://extensions/ in your browser.
   • Enable Developer mode.
   • Click Load unpacked and select the build folder.

---

🛠️ Development

Running in Development Mode

To test changes locally, use the following command:

npm run dev

This starts a local development server and watches for file changes.

Deploying to Cloudflare Workers

1. Install the Cloudflare CLI (wrangler):

   npm install -g wrangler

2. Log in to your Cloudflare account:

   wrangler login

3. Deploy the worker:

   npm run deploy

---

📁 Project Structure

Alfred-Extension/
├── .github/workflows/      # GitHub Actions workflows
├── assets/                 # Assets like icons or images
├── background/             # Background scripts for extension
├── components/             # React components for the extension
├── core/                   # Core logic and utilities
├── helper/                 # Helper functions and utilities
├── .gitignore              # Git ignore file
├── .prettierrc.mjs         # Prettier configuration file
├── README.md               # Documentation for the project
├── example.env             # Example environment variables file
├── package.json            # Project dependencies and scripts
├── pnpm-lock.yaml          # Lockfile for pnpm dependencies
├── popup.tsx               # Popup UI for the chatbot
├── postcss.config.js       # PostCSS configuration file
├── style.css               # Global CSS styles
├── tailwind.config.js      # Tailwind CSS configuration
└── tsconfig.json           # TypeScript configuration

---

🤝 Contributing

Contributions are welcome! Here's how you can contribute:

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature

3. Commit your changes:

   git commit -m "Add your feature"

4. Push to the branch:

   git push origin feature/your-feature

5. Create a Pull Request.

---

📜 License

This project is licensed under the MIT License.

---

📞 Support

If you encounter any issues or have questions, feel free to open an issue or reach out.

---

🌟 Acknowledgments

• Plasmo Framework
• Cloudflare Workers