Browser-Extension

I've finished building an OpenSauced browser extension that connects to the OpenSauced API and performs the following tasks:-

• It fetches the username from the GitHub profile and checks whether the user has an account on the OpenSauced website or not.
• If the user is validated then it renders the button on the profile named View on OpenSauced which has the click functionalities that take you to the OpenSauced profile page.
• If the user is not validated then it renders the button on the profile named Join OpenSauced which has also the click functionalities that take you to the OpenSauced authentication page.
• It also authenticates the user using an auth token and displays a text as You are an authorized user of OpenSauced. Logged in as {username} after verifying the user.

Screenshots

When the user has an OpenSauced account-

When the user has not an OpenSauced account-

When the user auth token is validated, the extension popup looks like this-

Video

OpenSauced.assignment.-.Made.with.Clipchamp.mp4

Run Locally

Clone the project

  git clone https://github.com/Your Username/Browser-Extension.git

Install dependencies

  npm install

Start the server

  npm run dev

Install the Extension

When the build completes, open Chrome or Edge and navigate to chrome://extensions. Make sure to turn on the developer mode switch.

Drag your dist folder into the Extensions Dashboard to install it. Your extension icon will be in the top bar. The icon will be the first letter of the extension's name.

And boom! Extension has been installed.

Resources

• api.opensauced.pizza
• docs.opensauced.pizza
• https://github.com/open-sauced/assets
• crxjs
• vite