basementdevs / twitch-better-profile

Twitch Better Profile - A new way to first interact with users on Twitch.

Twitch Better Profile

A browser extension that offers a new way to interact with users on Twitch. This app is designed to provide more detailed information about you on Twitch, making it easier for both viewers and streamers to connect with newcomers.

Firefox | Chrome

Table of Contents

• Introduction
• Prerequisites
  • Backend Installation
  • Frontend Installation
• Usage
• Contributing
• License

Introduction

Twitch Better Profile is a tool built with Rust using Actix and ScyllaDB using the Charybdis driver) for the back-end, and React with Plasmo for the frontend. The project is organized into two main folders:

• extension for the frontend
• api for the backend.

Prerequisites

Ensure you have the following tools installed on your machine:

Backend/API Installation

• Rust and Cargo: Install Rust
• ScyllaDB: Run ScyllaDB with Docker

Frontend/Extension Installation

• pnpm: Install pnpm

You will also need a Twitch Developer account and a Twitch Application.

Note: Set a default OAuth Callback URL when creating your extension.

Usage

Running the Extension

1. Navigate to the extension directory:

   cd extension

2. Create a .env file in the extension directory using the provided .env.example:

   cp .env.example .env

3. Open the .env file and set your Twitch Client ID:

   PLASMO_PUBLIC_TWITCH_CLIENT_ID="your-client-id-here"
   PLASMO_PUBLIC_TWITCH_API_URL="https://api.twitch.tv/helix"
   PLASMO_PUBLIC_API_URL="https://twitch-extension.danielheart.dev"

4. Install the Node.js dependencies using pnpm:

   pnpm install

5. Run the plasmo dev mode with Firefox as the target:

   pnpm dev:firefox

   This will create a server for hot-reload along with a dev extension that you can find at ./extension/build/firefox-mv2-dev.

6. Access the about:debugging (firefox only) and load your extension by selecting the manifest.json file:

   

7. Run the Authentication for the first time, retrieve the redirect_url, and add it to your Twitch App.

   

8. Close the Redirect Tab and try to authenticate again:

   

Contributing

We welcome contributions to improve this project! To contribute, please follow these steps:

1. Fork the repository and clone it to your local machine.

2. Create a new branch for your changes:

   git checkout -b feature/your-feature-name

3. Make your desired changes to the codebase.

4. Test your changes to ensure they work as expected.

5. Commit your changes with a descriptive commit message:

   git commit -m "Add feature/fix: description of your changes"

6. Push your changes to your forked repository:

   git push origin feature/your-feature-name

7. Open a pull request in the original repository and provide a clear description of your changes.

8. Wait for the project maintainers to review and merge your pull request.

Thank you for contributing! Your help is greatly appreciated.

License

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