Add basic extension add-on framework. (#2155)

There are a lot of things we can do to create more extension points,
but this at least provides a starting point which already opens up a
lot of possiblities.

Fixes #2143
Fixes #2144

Author: mrstegeman

package-lock.json

@@ -51,6 +51,7 @@
     "express-ws": "^4.0.0",
     "find": "^0.3.0",
     "gateway-addon": "https://github.com/mozilla-iot/gateway-addon-node",
+    "glob-to-regexp": "^0.4.1",
     "http-proxy": "^1.17.0",
     "ip-regex": "^4.1.0",
     "jsonwebtoken": "^8.5.1",

package.json

@@ -48,6 +48,7 @@ class AddonManager extends EventEmitter {
     this.notifiers = new Map();
     this.devices = {};
     this.outlets = {};
+    this.extensions = {};
     this.deferredAdd = null;
     this.deferredRemove = null;
     this.addonsLoaded = false;
@@ -226,6 +227,27 @@ class AddonManager extends EventEmitter {
       (n) => n.getPackageName() === packageId);
   }
 
+  /**
+   * @method getExtensions
+   * @returns Returns a Map of the loaded extensions. The dictionary
+   *          key corresponds to the extension ID.
+   */
+  getExtensions() {
+    return this.extensions;
+  }
+
+  /**
+   * @method getExtensionsByPackageId
+   * @returns Returns a Map of loaded extensions with the given package ID.
+   */
+  getExtensionsByPackageId(packageId) {
+    if (this.extensions.hasOwnProperty(packageId)) {
+      return this.extensions[packageId];
+    }
+
+    return {};
+  }
+
   /**
    * @method getDevice
    * @returns Returns the device with the indicated id.
@@ -602,6 +624,17 @@ class AddonManager extends EventEmitter {
       throw new Error(`Add-on not enabled: ${manifest.id}`);
     }
 
+    if (manifest.content_scripts && manifest.web_accessible_resources) {
+      this.extensions[manifest.id] = {
+        extensions: manifest.content_scripts,
+        resources: manifest.web_accessible_resources,
+      };
+    }
+
+    if (!manifest.exec && config.get('ipc.protocol') !== 'inproc') {
+      return;
+    }
+
     const errorCallback = (packageId, err) => {
       console.error(`Failed to load add-on ${packageId}:`, err);
     };
@@ -843,6 +876,10 @@ class AddonManager extends EventEmitter {
       return Promise.resolve();
     }
 
+    if (this.extensions.hasOwnProperty(packageId)) {
+      delete this.extensions[packageId];
+    }
+
     const plugin = this.getPlugin(packageId);
     let pluginProcess = {};
     if (plugin) {

src/addon-manager.js

@@ -129,9 +129,11 @@ function validateManifestJson(manifest) {
     version: '',
   };
 
-  if (config.get('ipc.protocol') !== 'inproc') {
-    // If we're not using in-process plugins, then we also need the exec
-    // keyword to exist.
+  if (config.get('ipc.protocol') !== 'inproc' &&
+      // eslint-disable-next-line max-len
+      manifest.gateway_specific_settings.webthings.primary_type !== 'extension') {
+    // If we're not using in-process plugins, and this is not an extension,
+    // then we also need the exec keyword to exist.
     manifestTemplate.gateway_specific_settings.webthings.exec = '';
   }
 
@@ -429,6 +431,8 @@ function loadManifestJson(packageId) {
     version: manifest.version,
     primary_type: manifest.gateway_specific_settings.webthings.primary_type,
     exec: manifest.gateway_specific_settings.webthings.exec,
+    content_scripts: manifest.content_scripts,
+    web_accessible_resources: manifest.web_accessible_resources,
     enabled: false,
   };
 

src/addon-utils.js

@@ -36,6 +36,7 @@ exports.LOGS_PATH = '/logs';
 exports.PUSH_PATH = '/push';
 exports.PING_PATH = '/ping';
 exports.PROXY_PATH = '/proxy';
+exports.EXTENSIONS_PATH = '/extensions';
 // Remember we end up in the build/* directory so these paths looks slightly
 // different than you might expect.
 exports.STATIC_PATH = path.join(__dirname, '../static');

src/constants.js

@@ -0,0 +1,61 @@
+'use strict';
+
+const AddonManager = require('../addon-manager');
+const UserProfile = require('../user-profile');
+const express = require('express');
+const fs = require('fs');
+const globToRegExp = require('glob-to-regexp');
+const jwtMiddleware = require('../jwt-middleware');
+const path = require('path');
+
+const auth = jwtMiddleware.middleware();
+const ExtensionsController = express.Router();
+
+ExtensionsController.get('/', auth, (request, response) => {
+  const map = {};
+  for (const [key, value] of Object.entries(AddonManager.getExtensions())) {
+    map[key] = value.extensions;
+  }
+  response.status(200).json(map);
+});
+
+ExtensionsController.get('/:extensionId/*', (request, response) => {
+  const extensionId = request.params.extensionId;
+  const relPath = request.path.split('/').slice(2).join('/');
+
+  // make sure the extension is installed and enabled
+  const extensions = AddonManager.getExtensions();
+  if (!extensions.hasOwnProperty(extensionId)) {
+    response.status(404).send();
+    return;
+  }
+
+  // make sure the requested resource is listed in the extension's
+  // web_accessible_resources array
+  let matched = false;
+  const resources = extensions[extensionId].resources;
+  for (let resource of resources) {
+    resource = globToRegExp(resource);
+    if (resource.test(relPath)) {
+      matched = true;
+      break;
+    }
+  }
+
+  if (!matched) {
+    response.status(404).send();
+    return;
+  }
+
+  // make sure the file actually exists
+  const fullPath = path.join(UserProfile.addonsDir, extensionId, relPath);
+  if (!fs.existsSync(fullPath)) {
+    response.status(404).send();
+    return;
+  }
+
+  // finally, send the file
+  response.sendFile(fullPath);
+});
+
+module.exports = ExtensionsController;

src/controllers/extensions_controller.js

@@ -56,6 +56,8 @@ const Router = {
     // First look for a static file
     const staticHandler = express.static(Constants.BUILD_STATIC_PATH);
     app.use(Constants.UPLOADS_PATH, express.static(UserProfile.uploadsDir));
+    app.use(Constants.EXTENSIONS_PATH, nocache,
+            require('./controllers/extensions_controller'));
     app.use((request, response, next) => {
       if (request.path === '/' && request.accepts('html')) {
         // We need this to hit RootController.

src/router.js

@@ -249,6 +249,10 @@ h1, h2, h3, h4, h5, h6 {
   z-index: 0;
 }
 
+#menu-button.menu-shown {
+  z-index: 1000;
+}
+
 #menu-button {
   background: no-repeat center/100% url('../optimized-images/menu.svg');
 }

static/css/app.css

@@ -11,6 +11,7 @@
   background-color: #5288af;
   margin: 0;
   transition: transform 0.25s ease;
+  z-index: 1000;
 }
 
 #main-menu.hidden {
@@ -105,6 +106,7 @@
   height: 100%;
   width: 100%;
   animation: show-scrim 0.25s ease 0s;
+  z-index: 999;
 }
 
 #menu-scrim.hidden {

static/css/menu.css

@@ -408,8 +408,17 @@ const API = {
       return res.json();
     });
   },
+
+  getExtensions: function() {
+    return fetch('/extensions', {
+      headers: this.headers(),
+    }).then((res) => {
+      return res.json();
+    });
+  },
 };
 
+// Elevate this to the window level.
 window.API = API;
 
 module.exports = API;