Dynamically generate manifest.json

.env

@@ -1,2 +1,3 @@
 VUE_APP_TITLE=Jelly-Party
-VUE_APP_MODE=production
+VUE_APP_MODE=production
+VUE_APP_WS_ADDRESS=wss://ws.jelly-party.com:8080

.env.staging

@@ -1,3 +1,4 @@
 NODE_ENV=development
 VUE_APP_TITLE=STAGE-BUILD
-VUE_APP_MODE=staging
+VUE_APP_MODE=staging
+VUE_APP_WS_ADDRESS=wss://staging.jelly-party.com:8080

README.md

@@ -15,7 +15,10 @@ Note that you'll connect to the staging server (`staging.jelly-party.com`) inste
 
 ## Contribute using your own server [advanced]
 
-Please head to the [Jelly-Party-Server](https://github.com/seandlg/jelly-party-server) repository and spin up a server instance. You must set up your custom domain and you'll need to tweak both Jelly-Party-Extension and Jelly-Party-Server.
+Please head to the [Jelly-Party-Server](https://github.com/seandlg/jelly-party-server) repository and spin up a server instance. You must set up your custom domain. You'll need to tweak Jelly-Party-Server.
+
+To use your server by the browser extension define environment variable `VUE_APP_WS_ADDRESS`. You could save it in a new file `.env.local` or `.env.[mode].local`. For more information see [Vue CLI Modes and Environment Variables](https://cli.vuejs.org/guide/mode-and-env.html).
+
 
 ### Compile and minify for production
 

package.json

@@ -19,6 +19,7 @@
     "bootstrap-vue": "^2.17.3",
     "clipboard": "^2.0.6",
     "core-js": "^3.6.4",
+    "csp-generator": "^1.0.2",
     "lib-jitsi-meet-dist": "^2.1.3",
     "lodash-es": "^4.17.15",
     "loglevel": "^1.7.0",
@@ -60,6 +61,12 @@
     "typescript": "^3.9.7",
     "vue-svg-loader": "^0.16.0",
     "vue-template-compiler": "^2.6.12",
-    "webextension-polyfill-ts": "^0.17.0"
+    "webextension-polyfill-ts": "^0.17.0",
+    "copy-webpack-plugin": "^4.5.2"
+  },
+  "vuePlugins": {
+    "service": [
+      "src/helpers/manifest.js"
+    ]
   }
 }

src/apps/sidebar/Vue-IFrame/Vue-IFrame.ts

@@ -200,14 +200,7 @@ export class JellyParty {
     store.dispatch("options/setLastPartyId", finalPartyId);
     // Set the magic link
     this.updateMagicLink();
-    let wsAddress = "";
-    switch (this.rootState.appMode) {
-      case "staging":
-        wsAddress = "wss://staging.jelly-party.com:8080";
-        break;
-      default:
-        wsAddress = "wss://ws.jelly-party.com:8080";
-    }
+    const wsAddress = process.env.VUE_APP_WS_ADDRESS ?? "wss://ws.jelly-party.com:8080";
     log.debug(`Jelly-Party: Connecting to ${wsAddress}`);
     this.ws = new WebSocket(wsAddress);
     store.dispatch("setConnectingToServer", true);

src/helpers/manifest.js

@@ -0,0 +1,43 @@
+/* eslint @typescript-eslint/no-var-requires: "off" */
+const CopyPlugin = require('copy-webpack-plugin')
+const CPS = require('csp-generator');
+
+function cspAppender(entries, manifest) {
+  const csp = new CPS(manifest['content_security_policy'] ? manifest['content_security_policy'] : "");
+  entries.forEach(function(entry) {
+    csp.append(entry.key, entry.value)
+  })
+  manifest['content_security_policy'] = csp.generate();
+  return manifest;
+}
+
+function cspAppenderWrapper(func, manifest) {
+  return cspAppender(func(manifest), manifest);
+}
+
+function applyTransformer(transformer, content) {
+  let manifest = JSON.parse(content);
+  manifest = transformer(manifest);
+  return JSON.stringify(manifest, null, 2)
+}
+
+function transformer(options) {
+  if (options.pluginOptions && options.pluginOptions.manifest && options.pluginOptions.manifest.cspAppender) {
+    return applyTransformer.bind(null, cspAppenderWrapper.bind(null, options.pluginOptions.manifest.cspAppender))
+  }
+}
+
+module.exports = (api, options) => {
+  const patterns = [
+    {
+      from: 'src/manifest.json',
+      to: 'manifest.json',
+      transform: transformer(options)
+    }
+  ]
+  api.chainWebpack(webpackConfig => {
+    webpackConfig
+      .plugin('copy-manifest')
+        .use(CopyPlugin, [patterns])
+  })
+}

public/manifest.json → src/manifest.json

@@ -29,6 +29,6 @@
     "128": "images/logo/128x128.png"
   },
   "manifest_version": 2,
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; connect-src 'self' http://localhost:8098 ws://localhost:8098 wss://staging.jelly-party.com:8080 wss://ws.jelly-party.com:8080; object-src 'self'",
+  "content_security_policy": "script-src 'self'; connect-src 'self'; object-src 'self'",
   "web_accessible_resources": ["js/rootStyles.js", "iframe.html", "join.html"]
 }

vue.config.js

@@ -27,6 +27,21 @@ module.exports = {
     webpackBundleAnalyzer: {
       openAnalyzer: false,
     },
+    manifest: {
+      cspAppender: (manifest) => {
+        let csp = [
+          {key: 'connect-src', value: process.env.VUE_APP_WS_ADDRESS}
+        ];
+        if (["staging", "development"].includes(process.env.NODE_ENV)) {
+          csp = csp.concat([
+            {key: 'script-src', value: "'unsafe-eval'"},
+            {key: 'connect-src', value: "http://localhost:8098"},
+            {key: 'connect-src', value: "ws://localhost:8098"}
+          ]);
+        }
+        return csp;
+      }
+    }
   },
   filenameHashing: false,
   configureWebpack: {