rohilsaraf97 / bio-crx

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bionic Reader CRX

Bionic reader extension for chromium browsers.

Tech Stack

React with TypeScript

Webpack 5

Set up dev environment

To deploy this project for development:

  1. Clone this repo:
git clone https://github.com/c-arvind/bionic-reader.git
  1. Install all the dependencies for the client and the server:
cd bionic-reader/client
npm i
cd ../server
npm i
  1. Next, run the following command to build the dist folder:
cd ../client
npm run dev
  1. Now, you must see a folder named dist in your client directory.

  2. Next, run the following command to start the server. Make sure to add a .env file in the server directory with the API key and API host.

cd ../server
npm run dev
  1. Open Google Chrome and click on the extensions icon.

image

  1. Click on it, then click on manage extensions. Now ensure that you have turned on the Developer Mode

image

  1. Click on Load Unpacked. A file selector window should open. Select the previously created dist folder.

  2. The extension should now be visible. While the dev script is running, all changes in made in development can be simultaneously seen on the loaded extension.

Demo

image

Important Resources

Wire framing: Using Excalidraw

Time Management: Using Cuckoo

Gradients: Using Colorhunt and UI Gradients

About


Languages

Language:TypeScript 68.7%Language:JavaScript 16.2%Language:HTML 8.1%Language:CSS 7.1%