Fe 173 browser extension tracking requests (#82)

* feat: add manifest v3 features and toggle

* chore: bump package version

* chore: add more environment variables

.env.sample

@@ -1 +1,4 @@
 IS_FIREFOX=false
+MANIFEST_V2=false
+RUDDERSTACK_STAGING_KEY=1xxxxxxxxxx
+RUDDERSTACK_PRODUCTION_KEY=1xxxxxxxxxx

bin/tag.js

@@ -1,4 +1,4 @@
 #!/usr/bin/env node
 
-const manifest = require(__dirname + '/../src/manifest.chrome.json');
+const manifest = require(__dirname + '/../src/manifest.chrome.v3.json');
 console.log(manifest.version);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "teamweek-button",
   "description": "Browser extensions for Toggl Plan",
-  "version": "2.13.0",
+  "version": "3.0.0",
   "dependencies": {
     "@babel/runtime": "7.7.4",
     "ampersand-collection": "2.0.0",
@@ -39,7 +39,7 @@
     "superagent": "3.7.0",
     "tinycolor2": "1.4.1",
     "to-string-loader": "1.1.6",
-    "uuid": "2.0.1"
+    "uuid": "9.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.7.2",
@@ -109,13 +109,13 @@
   "scripts": {
     "start": "webpack-dashboard -- npm run dev",
     "dev": "webpack --watch",
-    "firefox-dev": "IS_FIREFOX=true npm run dev",
-    "build": "webpack",
+    "firefox-dev": "IS_FIREFOX=true MANIFEST_V2=true npm run dev",
+    "build": "IS_PRODUCTION=true webpack",
     "tag": "/bin/bash bin/tag.sh",
     "chrome": "cd build && web-ext run -t chromium",
     "chrome-release": "rm -rf build tmp && npm run build && mkdir -p tmp && cd build && zip -x *.DS_Store -r ../tmp/tw-button.zip .",
     "firefox": "cd build && web-ext run -t firefox-desktop",
-    "firefox-release": "IS_FIREFOX=true npm run chrome-release",
+    "firefox-release": "IS_FIREFOX=true MANIFEST_V2=true npm run chrome-release",
     "firefox-source": "npm run buildclean && mkdir -p tmp && rm -f tmp/tw-button-source.zip && zip -x *.DS_Store -r tmp/tw-button-source.zip src .babelrc .env .eslintrc.json .nvmrc .prettierrc .stylelintrc.json FIREFOX.md package.json package-lock.json webpack.config.js",
     "lint": "eslint src webpack.config.js --quiet --cache",
     "precommit": "npm run lint",

src/api/config.js

@@ -2,4 +2,17 @@ export default {
   api: {
     host: 'https://api.plan.toggl.com',
   },
+  googleAnalytics: {
+    id: 'UA-133767571-6',
+  },
+  rudderStack: {
+    dataPlaneUrl: 'https://toggl-dataplane.rudderstack.com',
+    key: RUDDERSTACK_KEY,
+  },
+  popup: {
+    width: 625,
+    height: 525,
+    buttonMargin: 20,
+    buttonSize: 20,
+  },
 };

src/api/local_sync.js

@@ -1,6 +1,6 @@
 import * as storage from 'src/utils/storage';
 import find from 'lodash.find';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 
 export default function(namespace) {
   const store = {
@@ -34,7 +34,7 @@ export default function(namespace) {
     },
 
     create(model) {
-      model.id = uuid.v4();
+      model.id = uuidv4();
 
       return this.get()
         .then(models => {

src/background/analytics.js

@@ -1,23 +1,71 @@
-function createQueueFunction() {
-  function ga() {
-    ga.q.push(arguments);
-  }
+import * as storage from 'src/utils/storage';
+import config from 'src/api/config';
+import { toSnakeCase, toSnakeCaseObject } from '../utils/to-snake-case';
 
-  ga.q = [];
-  ga.l = +new Date();
+async function sendGoogleAnalyticsEvent(uid, category, action, fields = {}) {
+  const params = new URLSearchParams({
+    v: 1,
+    tid: config.googleAnalytics.id,
+    uid,
+    t: 'event',
+    ec: category,
+    ea: action,
+    cd1: fields.dimension1,
+    cd2: fields.dimension2,
+  });
+  const url = `https://www.google-analytics.com/collect?${params.toString()}`;
 
-  return ga;
+  try {
+    await fetch(url, {
+      method: 'POST',
+    });
+  } catch (error) {
+    console.warn('googleanalytics.track error:', error);
+  }
 }
 
-window.GoogleAnalyticsObject = 'ga';
-const ga = window.ga = createQueueFunction();
+async function sendRudderStackTrackEvent(uid, event, properties = {}) {
+  const url = `${config.rudderStack.dataPlaneUrl}/v1/track`;
+  const data = {
+    userId: uid,
+    event: toSnakeCase(event),
+    properties: toSnakeCaseObject(properties),
+    timestamp: new Date().toISOString(),
+  };
 
-ga('create', 'UA-63875543-2', 'auto');
-ga('set', 'checkProtocolTask', null);
+  try {
+    await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Basic ${Buffer.from(
+          config.rudderStack.key + ':'
+        ).toString('base64')}`,
+      },
+      body: JSON.stringify(data),
+    });
+  } catch (error) {
+    console.warn('rudderanalytics.track error:', error);
+  }
+}
 
 chrome.runtime.onMessage.addListener(function(data) {
-  if (data.type !== 'track_event') {
-    return;
+  if (data.type === 'track_event') {
+    storage
+      .get('me')
+      .then(({ me: { id } }) =>
+        sendGoogleAnalyticsEvent(
+          id.toString(),
+          data.category,
+          data.action,
+          data.fields
+        )
+      );
+  }
+
+  if (['task_created'].includes(data.type)) {
+    storage.get('me').then(({ me: { id } }) => {
+      sendRudderStackTrackEvent(id.toString(), data.type, data.properties);
+    });
   }
-  ga('send', 'event', data.category, data.action, data.fields);
 });

src/background/browser_action.js

@@ -1,13 +1,14 @@
-import { POPUP_WIDTH, POPUP_HEIGHT } from 'src/background/util/popup_window';
+import config from 'src/api/config';
+import { addOnExtensionClickListener, createURL } from './util';
 
-chrome.browserAction.onClicked.addListener(function() {
+addOnExtensionClickListener(function() {
   chrome.windows.getCurrent({}, win => {
     chrome.windows.create({
-      url: chrome.extension.getURL('popup.html?name='),
-      width: POPUP_WIDTH,
-      height: POPUP_HEIGHT,
+      url: createURL({ name: '' }),
+      width: config.popup.width,
+      height: config.popup.height,
       top: 120,
-      left: win.width - POPUP_WIDTH - 20,
+      left: win.width - config.popup.width - 20,
       type: 'popup',
     });
   });

src/background/context_menu.js

@@ -1,6 +1,6 @@
 import TaskModel from 'src/models/task_model';
 import * as analytics from 'src/utils/analytics';
-import { openPopupWindow } from 'src/background/util/popup_window';
+import { openPopupWindow } from 'src/background/util';
 
 chrome.contextMenus.create({
   id: 'context-add',

src/background/injector.js

@@ -1,5 +1,6 @@
 import CustomDomainCollection from 'src/models/custom_domain_collection';
 import assets from './injected_assets.json';
+import { executeScript, insertCSS } from './util';
 
 const injector = {
   initialize() {
@@ -34,11 +35,11 @@ const injector = {
 
   injectTab(tab, service) {
     assets[service].scripts.forEach(file => {
-      chrome.tabs.executeScript(tab, { file });
+      executeScript(tab, file);
     });
 
     assets[service].styles.forEach(file => {
-      chrome.tabs.insertCSS(tab, { file });
+      insertCSS(tab, file);
     });
   },
 };

src/background/popups.js

@@ -1,4 +1,4 @@
-import { openPopupWindow } from 'src/background/util/popup_window';
+import { openPopupWindow } from 'src/background/util';
 
 chrome.runtime.onMessage.addListener(function(data) {
   if (data.type !== 'open_popup') {

src/background/util/index.js

@@ -0,0 +1,91 @@
+import qs from 'querystring';
+import config from 'src/api/config';
+
+const POPUP_WIDTH = config.popup.width;
+const POPUP_HEIGHT = config.popup.height;
+const BUTTON_MARGIN = config.popup.buttonMargin;
+const BUTTON_SIZE = config.popup.buttonSize;
+
+export function openPopupWindow(data) {
+  const position = calculatePosition(data);
+  const url = createURL(data.params);
+
+  chrome.windows.create({
+    url,
+    left: Math.round(position.x),
+    top: Math.round(position.y),
+    width: config.popup.width,
+    height: config.popup.height,
+    type: 'popup',
+  });
+}
+
+export function getIsManifestV2() {
+  return MANIFEST_V2 === 'true' ? true : false;
+}
+
+export function createURL(params = {}) {
+  const query = qs.stringify(params);
+
+  return getIsManifestV2()
+    ? chrome.extension.getURL('popup.html?' + query)
+    : chrome.runtime.getURL('popup.html?' + query);
+}
+
+export function addOnExtensionClickListener(callback) {
+  if (getIsManifestV2()) {
+    chrome.browserAction.onClicked.addListener(callback);
+    return;
+  }
+
+  chrome.action.onClicked.addListener(callback);
+}
+
+export function executeScript(tabId, file) {
+  if (getIsManifestV2()) {
+    chrome.tabs.executeScript(tabId, { file });
+    return;
+  }
+
+  chrome.scripting.executeScript({
+    files: [file],
+    target: { tabId },
+  });
+}
+
+export function insertCSS(tabId, file) {
+  if (getIsManifestV2()) {
+    chrome.tabs.insertCSS(tabId, { file });
+    return;
+  }
+
+  chrome.scripting.insertCSS({
+    files: [file],
+    target: { tabId },
+  });
+}
+
+function calculatePosition(data) {
+  if (data.anchor === 'screen') {
+    return {
+      x: (data.screen.width - POPUP_WIDTH) / 2,
+      y: (data.screen.height - POPUP_HEIGHT) / 2,
+    };
+  } else if (data.anchor === 'element') {
+    return {
+      x:
+        data.element.x > data.screen.width / 2
+          ? data.element.x - POPUP_WIDTH - BUTTON_MARGIN
+          : data.element.x + BUTTON_SIZE + BUTTON_MARGIN,
+      y:
+        data.element.y > data.screen.height / 2
+          ? data.element.y - POPUP_HEIGHT + BUTTON_SIZE
+          : data.element.y,
+    };
+  } else if (data.anchor === 'window') {
+    return {
+      x: data.window.x + (data.window.width - POPUP_WIDTH) / 2,
+      y: data.window.y + (data.window.height - POPUP_HEIGHT) / 2,
+    };
+  }
+}

src/bootloader/github/github.less

@@ -1,3 +1,4 @@
 .tw-button {
-  vertical-align: -2px;
+  vertical-align: -4px;
+  margin-left: 4px;
 }