Setup Uli on Windows for Firefox

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.firefox.json file. Add this entry to the connect-src section within the content_security_policy in the manifest.firefox.json file.

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

Your content_security_policy in the manifest.firefox.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:firefox

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 Firefox

Once you run the npm run dev:firefox, 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 Setup by executing about:debugging in the address bar (where you enter url's and do your web searches)
• Next, Click on This Firefox in the left-hand sidebar.
• You will now see a Temporary Extensions dropdown. Within it, click on the Load Temporary Add-on.. button and load any single file from the dist folder. This will load the extension into the browser.
• To see the extension in action, you will have to open a new tab.

Uli is all setup on Firefox.

Try the steps mentioned in this video to try Uli out