-
-
Notifications
You must be signed in to change notification settings - Fork 29
Setup Uli on Windows for Chrome
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 |
- npm : v9.6.7^
- nodejs : v18.17.1^
- Docker: 20.10.7
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.
- Add Credentials for API server - Navigate to the
api-server
folder and create a new file calleddevelopment.env
with the following content. Add this content inside thedevelopment.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
- Change the control characters of
entrypoint.sh
file.
dos2unix entrypoint.sh
- Next, navigate to the
plugin
folder and include the following code in themanifest.json
file. Add this entry to theconnect-src
section within thecontent_security_policy
in themanifest.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';"
},
- 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.
- 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.
- Now, to run the plugin development server, navigate to the
browser-extension/plugin
folder. You'll need to modify theplugin/package.json
file as described below.
- replace the command
cp
withcopy
- replace the front slashes in all the file paths with double back slashes
- 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
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 toExtensions
- 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
Try the steps mentioned in this video to try Uli out
- About Us
- Our Team
- Contributing to Uli
- Code of Conduct
- Internal Communications
- FAQs
- Curated Issues and Proposals for beginners
- Contributing Code
- Monitoring Issues and Triaging
- Helping review PRs
- Helping with QA
- Helping with Translations
- Sponsor Tattle
- 16 Days of Activism
- Mitigating Harms of Digitally Manipulated Images
- Setup Uli on Windows for Chrome
- Setup Uli on Windows for Chrominum Browsers (Brave, Kiwi etc)
- Setup Uli on Windows for Firefox
- Setup Uli on Windows for Firefox for Android
- Setup Uli on Linux for Chrome
- Setup Uli on Linux for Firefox
- Setup Uli on Linux for Firefox for Android
- Setup Uli on Linux for for Chromium Browsers(Kiwi, Brave etc)