Add in management addon to configure the main addon (#485)

.eslintrc.js

@@ -27,8 +27,8 @@ module.exports = {
     PROXY_STATE_PROXYAUTHFAILED: false,
     PROXY_STATE_PROXYERROR: false,
     PROXY_STATE_UNAUTHENTICATED: false,
-    PROXY_URL: false,
-    Template: false
+    Template: false,
+    ConfigUtils: false
   },
   parser: "babel-eslint",
   parserOptions: {

.gitignore

@@ -3,3 +3,4 @@
 src/vendor/*
 node_modules/*
 dist/*
+management-src/web-ext-artifacts/*

management-src/_locales/en_US/messages.json

@@ -0,0 +1,8 @@
+{
+  "extensionName": {
+    "message": "Firefox Private Network - Management interface"
+  },
+  "extensionDescription": {
+    "message": "Manage the Firefox Private Network Extension"
+  }
+}

management-src/background.js

@@ -0,0 +1,13 @@
+const EXTENSION_ID = "secure-proxy@mozilla.com";
+function sendMessage(type, value) {
+  return browser.runtime.sendMessage(
+    EXTENSION_ID,
+    { type, value }
+  );
+}
+async function init() {
+  let result = await sendMessage("getCurrentConfig");
+  console.log(result);
+  sendMessage("setDebuggingEnabled", true);
+}
+init();

management-src/manifest.json

@@ -0,0 +1,18 @@
+{
+  "manifest_version": 2,
+  "name": "__MSG_extensionName__",
+  "default_locale": "en_US",
+  "version": "0.1",
+  "author": "Firefox",
+
+  "homepage_url": "https://private-network.firefox.com",
+
+  "description": "__MSG_extensionDescription__",
+
+  "permissions": [
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+}

src/background/external.js

@@ -0,0 +1,30 @@
+import {Component} from "./component.js";
+
+// This component handles message from external extensions
+// It's current use is to accept configuration of the addon
+export class ExternalHandler extends Component {
+  constructor(receiver) {
+    super(receiver);
+
+    browser.runtime.onMessageExternal.addListener(this.handleExternalMessage);
+  }
+
+  async init() {
+    // Nothing to do here
+  }
+
+  // eslint-disable-next-line consistent-return
+  async handleExternalMessage(message) {
+    log("Got external message", message);
+    switch (message.type) {
+      case "getCurrentConfig":
+        return ConfigUtils.getCurrentConfig();
+      case "setDebuggingEnabled":
+        return ConfigUtils.setDebuggingEnabled(message.value);
+      case "setProxyURL":
+        return ConfigUtils.setProxyURL(message.value);
+      default:
+        console.error("unhandled message from external extension");
+    }
+  }
+}

src/background/fxa.js

@@ -36,7 +36,7 @@ export class FxAUtils extends Component {
   }
 
   async init(prefs) {
-    this.proxyURL = new URL(prefs.value.proxyURL || PROXY_URL);
+    this.proxyURL = await ConfigUtils.getProxyURL();
 
     await this.wellKnownData.init(prefs);
 

src/background/main.js

@@ -1,5 +1,6 @@
 import {ConnectionTester} from "./connection.js";
 import {Connectivity} from "./connectivity.js";
+import {ExternalHandler} from "./external.js";
 import {FxAUtils} from "./fxa.js";
 import {Network} from "./network.js";
 import {StorageUtils} from "./storage.js";
@@ -19,6 +20,7 @@ class Main {
     this.observers = new Set();
 
     this.connectivity = new Connectivity(this);
+    this.externalHandler = new ExternalHandler(this);
     this.fxa = new FxAUtils(this);
     this.net = new Network(this);
     this.survey = new Survey(this);
@@ -35,8 +37,6 @@ class Main {
 
   async init() {
     const prefs = await browser.experiments.proxyutils.settings.get({});
-    debuggingMode = prefs.value.debuggingEnabled;
-
     log("init");
 
     // Let's initialize the observers.

src/background/network.js

@@ -13,7 +13,7 @@ export class Network extends Component {
   }
 
   async init(prefs) {
-    const proxyURL = new URL(prefs.value.proxyURL || PROXY_URL);
+    const proxyURL = await ConfigUtils.getProxyURL();
     this.proxyType = proxyURL.protocol === "https:" ? "https" : "http";
     this.proxyPort = proxyURL.port || (proxyURL.protocol === "https:" ? 443 : 80);
     this.proxyHost = proxyURL.hostname;

src/commons/utils.js

@@ -1,8 +1,5 @@
 /* eslint-disable no-unused-vars */
 
-// Proxy configuration
-const PROXY_URL = "https://firefox.factor11.cloudflareclient.com:2486";
-
 // We are loading resources
 const PROXY_STATE_LOADING = "loading";
 
@@ -46,8 +43,45 @@ const FXA_OK = "ok";
 // connecting state. If this succeeds, we go to active state.
 const CONNECTING_HTTP_REQUEST = "http://test.factor11.cloudflareclient.com/";
 
+// Proxy configuration
+const DEFAULT_PROXY_URL = "https://firefox.factor11.cloudflareclient.com:2486";
+
+const ConfigUtils = {
+  async setProxyURL(proxyURL) {
+    await browser.storage.local.set({proxyURL});
+  },
+
+  async getProxyURL() {
+    return new URL(await this.getStorageKey("proxyURL") || DEFAULT_PROXY_URL);
+  },
+
+  async setDebuggingEnabled(debuggingEnabled) {
+    await browser.storage.local.set({debuggingEnabled});
+  },
+
+  async getDebuggingEnabled() {
+    return await this.getStorageKey("debuggingEnabled") || false;
+  },
+
+  async getCurrentConfig() {
+    return {
+      proxyURL: await this.getProxyURL(),
+      debuggingEnabled: await this.getDebuggingEnabled(),
+    };
+  },
+
+  async getStorageKey(key) {
+    let data = await browser.storage.local.get([key]);
+    return data[key];
+  }
+};
+
 // Enable debugging
 let debuggingMode = false;
+// We don't want to block log's from happening so use then()
+ConfigUtils.getDebuggingEnabled().then((debugging) => {
+  debuggingMode = debugging;
+});
 function log(msg, ...rest) {
   if (debuggingMode) {
     console.log("*** secure-proxy *** - " + msg, ...rest);

src/experiments/proxyutils/api.js

@@ -315,10 +315,7 @@ this.proxyutils = class extends ExtensionAPI {
               "proxyutils.settings",
               () => {
                 return {
-                  debuggingEnabled: false,
                   captiveDetect: getStringPrefValue("captivedetect.canonicalURL"),
-                  fxaURL: null,
-                  proxyURL: null,
                 };
               },
               undefined,

src/popup/view.js

@@ -17,7 +17,7 @@ export class View {
     // eslint-disable-next-line verify-await/check
     let view = views.get(name);
     if (!(view instanceof View)) {
-      console.error("Invalid view name: " + name);
+      log("Invalid view name: " + name);
       return;
     }
 
@@ -35,7 +35,7 @@ export class View {
     let introHeading = document.getElementById("introHeading");
     introHeading.textContent = currentView.getTranslation(currentView.syncHeadingText());
 
-    console.log(`Show: ${name}`);
+    log(`Show: ${name}`);
     let template = currentView.syncShow(data);
     if (template && template instanceof Template) {
       footer.addEventListener("click", currentView);
@@ -118,7 +118,7 @@ export class View {
 
   // This method stores a view in the view map.
   static syncRegisterView(view, name) {
-    console.log("Register view: " + name);
+    log("Register view: " + name);
     // eslint-disable-next-line verify-await/check
     views.set(name, view);
   }