Setup Uli on Windows for Chrominum Browsers (Brave, Kiwi etc)

Overview

The source code for Uli's browser extension is contained within the browser-extension directory. You can read our learning guide to know more about the various components that make up the browser extension.

The code is primarily broken into two folders, plugin and api-server.

Directory	Description
plugin	code for browser extension - essentially the frontend
api-server	a rest server for storing user preferences and archived tweets - essentially the backend

Prerequisites :

• npm : v9.6.7^
• nodejs : v18.17.1^
• Docker: 20.10.7

Cloning the Repository and Installation

Clone the repository and navigate to the browser-extension folder.

git clone https://github.com/tattle-made/Uli.git
cd Uli/browser-extension/

Next, install all the necessary packages in the api-server and plugin folders.

cd api-server && npm install
cd ..
cd plugin && npm install
cd ..

We've completed step 1 – Uli is cloned, and all the required browser extension libraries are now installed.

Step 2 - Basic Setup

1. Add Credentials for API server - Navigate to the api-server folder and create a new file called development.env with the following content. Add this content inside the development.env file.

NODE_ENV=development
AWS_BUCKET_NAME=XXXXXXXXXXX
SERVICE_AWS_ACCESS_KEY_ID=XXXXXXXXXX
SERVICE_AWS_SECRET_ACCESS_KEY=XXXXXXX
DB_HOST=db
DB_USERNAME=tattle
DB_PASSWORD=tattle_pw
DB_FIELD_ENCRYPTION_KEY=very-secure-key

2. Change the control characters of entrypoint.sh file.

dos2unix entrypoint.sh

3. Next, navigate to the plugin folder and include the following code in the manifest.json file. Add this entry to the connect-src section within the content_security_policy in the manifest.json file.

http://localhost:3000 ws://localhost

Your content_security_policy in the manifest.json should now look like this.

    "content_security_policy": {
        "extension_pages": "default-src 'none'; connect-src http://localhost:3000 ws://localhost https://ogbv-plugin.tattle.co.in/ https://uli-media.tattle.co.in/; font-src https://fonts.gstatic.com; object-src 'none'; script-src 'self'; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; img-src https://uli-media.tattle.co.in/; base-uri 'none'; form-action 'none'; frame-ancestors 'none'; report-uri 'none';"
    },

Step 3 - Starting the Development Server

1. Now to begin the backend development server for coding, run the following command in the terminal within the browser-extension folder.

docker-compose up

You should now see database migration in the logs.

2. Next, we have to start the backend server.

docker exec -it api-server nodemon index.js

You can also manually access the api-server container within Docker Desktop. Inside the container's terminal, run the command nodemon index.js after navigating to the api-server in Docker Desktop.

3. Now, to run the plugin development server, navigate to the browser-extension/plugin folder. You'll need to modify the plugin/package.json file as described below.

• replace the command cp with copy
• replace the front slashes in all the file paths with double back slashes

4. Now run the following command to begin local plugin development.

npm run dev:chrome

This command will create a -p and a dist folder The dist directory should now have the following structure.

dist/
    background.js
    content-script.js
    content-script.js.map
    icon16.png
    icon32.png
    manifest.json
    options.html
    options.js
    options.js.map

Load Uli on Chrominum

Once you run the npm run dev:chrome, a dist folder will be created. This folder contains the unreleased extension. Load it in your browser to see the extension in action and develop it further.

To load Uli

• Go to Settings and then navigate to Extensions
• Next, Enable the Developer mode in the Extensions
• Once that is done, you will see a button labelled Load Unpacked
• Click on the button and load the plugin/dist folder.

Uli is all setup on Chrominum

Try the steps mentioned in this video to try Uli out