Vp-desktop NPM

VP Admin Chrome extension

Overview

We decided to use a chrome extension for the Vision Project Desktop app. The extension is built using React.

Set up

We are using the following pluging to build our dev/prod extension https://github.com/kevincharm/parcel-plugin-web-extension.

This pluging help us to use the manifest file as a entry points.

Environment variables Add .env file to root of project and set

VP_API_URL used tro retrieve study's feed
VP_DESKTOP_SITE for extension to use localhost vision project website
FIRESTORE_API_KEY for firestore database API key
FIRESTORE_AUTH_DOMAIN for firestore database authentication domain
FIRESTORE_PROJECT_ID for firestore Google project
AMT_URL for AMT tag remote url
TIMER_TICK extension timer tick frequency
VALIDATION_INTERVAL to customise the interval between in article validations
SKIP_IN_ARTICLE_VALIDATION for extension to skip in article validation

Manifest

The build is going to use the manifest.local.json or the manifest.development.json and merge those keys into the base manifest (manifest.json).

For Example: If you manifest.development.json looks like

{
  "background": {
    "page": "extension/background/main.development.html",
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["extension/contentScript/extensionId.js"],
      "run_at": "document_end"
    }
  ]
}

and the base manifest looks like:

{
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["extension/contentScript/extensionId.js"],
      "run_at": "document_end"
    }
  ]
}

your build manifest is going to look like:

{
  "background": {
    "page": "extension/background/main.development.html",
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["extension/contentScript/extensionId.js"],
      "run_at": "document_end"
    }
  ]
}

Analytics

We are using Firebase to temporarily store our analytics event. Then, we have a trigger function in Firebase that moves the analytics events to BigQuery (same as the IOS app).

You can find this functions on the same repo as the app functions. https://github.com/playground-xyz/attention/tree/master/firebase-cloud-functions/functions/src

Visualisation Tool

Jira Tasks:

This is a tool designed to debug the eyetracking. The test would be carried out by:

set up the extension using dev environment npm start or npm run dev-watch
calibrate
check short cut here: chrome://extensions/shortcuts
on a web page press shortcut
draw a shape easy to remember with the mouse cursor, make sure you follow the cursor with your eyes as much as possible
go to `chrome-extension:///extension/debug/visualizer/index.html
the red dots should follow the pattern of the blue dot

Build and update WebGazer

We use webgazer for the eye tracking. However, we had to modify it heavily to fix a few bugs and improve the performance.

Probably one of the biggest changes is using face-api for face recognition. As the face api models are not part of the core file, we store them in this repo /js/models/

Build and update WebGazer

Run npm run webgazerbuild. This script is going to generate a new build of webgazer and copy it to the prediction folder

/!\/!\/!\/!\/!\ MAKE SURE TO REMOVE .cache when building for a different environment /!\/!\/!\/!\/!\

Local

Local does not generates ZIP package

To build for local add a .env.local to the VP-DESKTOP folder. Should contain at least:

VP_API_URL=http://localhost:1234

npm i
see "Build and update websgazer" above
npm run start this will use the .env.local file or use the defaults in config.ts
There is a watch set up: npm run dev-watch Make sure bin files have right permissions chmod +x bin/build.sh
Go to chrome://extensions
Load Load unpacked
select the dist folder of the project
go to website directoy
npm i and npm start
navigate to http://localhost:1234/?id=pxyz&d=156-43&fc=1vlXBq8xiVWmzkj2NwWQOtlzo9Xb0rYce_pjRNl-Nj-I&user_id=pxyz and go throug steps.

If you need to change the duration of the task you can edit the d param:

156-43 1 minute
782-15 5 minutes
156-430 10 minutes
234-645 15 minutes
312-860 20 minutes
391-075 25 minutes
469-290 30 minutes

Development

To build for development add a .env.development to the VP-DESKTOP folder. Should contain at least:

VP_API_URL=https://desktop.development.vision-project.co

npm run build

ZIP package generated build/vp-desktop-dev.zip

Production

Production does not contain visualisation tool

To build for production add a .env.production to the VP-DESKTOP folder. Should contain at least:

VP_API_URL=https://desktop.vision-project.co

npm run publish

ZIP package generated build/vp-desktop-prod.zip