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.

Prerequisites :

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

Local Development Setup

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

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 [email protected] 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.firefox.json and in the content-security-policy key, add http://localhost:3000 ws://localhost to the connect-src string. Your content-security-policy field should look like

"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';"
}

Edit permissions to allow adding a slur to the crowdsource feature by right-clicking

Add http://localhost/* to the permissions key in the manifest. The update permissions should look like this

    "permissions": [
        "storage",
        "webRequest",
        "contextMenus",
        "https://ogbv-plugin.tattle.co.in/*",
        "http://localhost/*"
    ],

Start the development server

Run npm run dev:firefox. 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 Firefox

To load Uli

• Type about:debugging in the address bar and press Enter.
• Click on This Firefox in the left-hand sidebar. You will now see a Temporary Extensions dropdown.
• Within the "Temporary Extension" dropdown, click on the "Load Temporary Add-on.." button and load any file from the dist folder. This will load the extension into the browser.

Uli is all setup on Firefox.

Try the steps mentioned in this video to try Uli out