Setup Uli on Linux for Chrome

Overview

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.

📺 We have a video guide for you as well.

Prerequisites :

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

Local Development Setup

Cloning the Repository and Installation

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

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 ..

Add Credentials for API server

the REST API server for Uli requires certain credentials to be setup in a file named development.env. Run touch browser-extension/development.env to create the file. Open the file and copy-paste the following :

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

The missing values can be ignored for now. You can read the credential guide to fully understand how to fill it. You can also reach out to uli_support@tattle.co.in to get some keys that will work with our sandbox environment.

Start Database and the API server

We will use docker to start a SQL server that will be accessible on port 3306. Run cd browser-extension and docker-compose up db db-gui api-server. This brings up a SQL service and a SQL web GUI service. Run docker ps to verify. Your output should look something like this :

CONTAINER ID   IMAGE                                    COMMAND                  CREATED              STATUS          PORTS                                                                              NAMES
f15a12c199d3   browser-extension_api-server             "/entrypoint.sh node…"   33 seconds ago       Up 32 seconds   0.0.0.0:3000->3000/tcp, :::3000->3000/tcp                                          api-server
f87165bfc8f3   adminer                                  "entrypoint.sh php -…"   About a minute ago   Up 33 seconds   0.0.0.0:8080->8080/tcp, :::8080->8080/tcp                                          browser-extension_db-gui_1
3aacd6a0ff55   mysql                                    "docker-entrypoint.s…"   2 days ago           Up 33 seconds   0.0.0.0:3306->3306/tcp, :::3306->3306/tcp, 33060/tcp                               browser-extension_db_1

To verify if the db gui is working well, visit localhost:8080 and login with the following credentials :

field	value
System	MySQL
Server	db
Username	tattle
Password	tattle_pw
Database	uli_dev

In a new tab, run the following commands to configure and start the api-server

1. docker exec -it api-server npm install
2. docker exec -it api-server npx sequelize-cli db:migrate
3. docker exec -it api-server nodemon index.js

(3) will begin a development server for api-server. Any changes you make to the code withing browser-extension/api-server will cause the server to reload.

Development Server for the extension

Update extension's content_security_policy

Locate the file manifest.json and in the content-security-policy key, add http://localhost:3000 ws://localhost to the connect-src string. Your final content-security-policy field should look like

"content_security_policy": {
        "extension_pages": "default-src 'none'; connect-src http://localhost:3000 ws://localhost; 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';"
},

Start the development server

Run npm run dev:chrome. This should create a directory named dist in the browser-extension/plugin directory. 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 Chrome

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 Chrome/Brave.

Try the steps mentioned in this video to try Uli out