tracking-exposed / eu19

2 stars 0 forks source link

Documentation: Getting Started #14

Closed berli0z closed 5 years ago

berli0z commented 5 years ago

I am adding text in markdown format on how to get started. this will end up both in eu19 and tracking-exposed (which doesn't support markdown yet). I am adding some screenshot. I used shutter and mantained the same format. For the sake of readability i suggest to add some lines of css to specify a standard small/medium/large size. something like img[alt=small] { width: 150px; } img[alt=medium] { width: 250px; } img[alt=large] { width: 350px; }

vecna commented 5 years ago

This is closed because now the images are supported as here https://eu19.tracking.exposed/help/images/ ?

berli0z commented 5 years ago

Exactly, and i tought the page was done in february already, i don't know why it wasnt uploaded honestly :/

Installation Guide

This page explains how to install facebook.tracking.exposed web browser extension for both users and developers.

Simple Setup

facebook.tracking.exposed extension works with both Mozilla and Google browsers. Once you know which browser you are using, you can follow the steps below.

Mozilla Firefox

To install the extension on Firefox, open this link.

First, click on "Add to Firefox", then confirm by clicking "Add".

a a

Chromium / Google Chrome

To install on Chromium or Google Chrome, open this link and click "Add", then "Add extension".

screenshot screenshot

Congratulations, facebook.tracking.exposed is now installed and will start working as soon as you open your Facebook feed! If the steps above do not work, keep reading below.

Advanced Setup

This sections describes how to install the extension from our build as zip file. As a first step you should download the last build here.

Set up your browser (for Chromium / Google Chrome)

If you use Chrome or Chromium, you should unzip the folder first. To install the extension insert chrome://extensions in your URL bar as below. Then, enable Developer mode. Click on Load unpacked extension and select the unzipped directory contained in this repo.

screenshot screenshot screenshot

Set up your browser (for Firefox)

As standard practice, Firefox doesn't allow unpacked extension to be loaded. However, it does allow developers to test unpacked extensions temporarily. To accomplish this just enter about:debugging in your URL bar. Then click on Load Temporary Add-on and select the zip file in your Downloads folder.

screenshot screenshot

Forking the Project (for developers)

The third part of the guide describes how to fork and build this extension using git.

This project requires Node 5+. We suggest installing nvm for easy version maintaining. Alternatively, you can install Nodejs from a package, but make sure it's the right version and install npm as well for package management. Please note that this was tested only for ubuntu systems.

Install nvm

On a clean GNU/Linux system, start by installing nvm. It could be useful to update and upgrade your packages too first.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

or follow the instructions here.

Install node and npm

Check the last version of node and then install it through

nvm install x.xx.x
nvm install-latest-npm

Clone with git and move to the directory

git clone https://github.com/tracking-exposed/web-extension.git
cd web-extension/

Build the files and build the extension

The build system uses a simple package.json file to describe the tasks, you can check it out to find out the packages that we rely on to make this extension available or for troubleshooting.

To get started run:

npm install
npm test
npm start

The second line (npm test) is optional, but testing is cool and you should do it anyway. It's also a nice way to check if the installation succeeded. If npm test fails, don't worry and try npm start nonetheless, it might be due to facebook frequent html structure changes or nodejs extensions incompatibility, please report it back to us if this is the case.

npm start will build the application using webpack and watch for changes.

Keep npm start running in the background to take advantage of the autoreload.

It works!

Now you can use the extensions as described in the Advanced section above.

TL;DR

How to replicate the build?

$ npm i ; npm run build:dist ; ls -l dist/extension.zip

vecna commented 5 years ago

it is here since a while: https://eu19.tracking.exposed/page/advanced-use/ but I forget to link it

vecna commented 5 years ago

aligned online! it is linked by individual and researcher