Define VUE_APP_WS_ADDRESS from env variable

Primarily this makes it possible to easily redefine server that was
hardcoded in `Vue-IFrame.ts` and `manifest.json`.

As a side effect it is now possible to define `content_security_policy`
based on mode. Production builds no longer include `connect-src` to
staging server and other policies that used to be there for
`vue-remote-devtools`.

.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,9 @@ 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
 

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/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'; object-src 'self';",
   "web_accessible_resources": ["js/rootStyles.js", "iframe.html", "join.html"]
 }

vue.config.js

@@ -27,6 +27,17 @@ module.exports = {
     webpackBundleAnalyzer: {
       openAnalyzer: false,
     },
+    browserExtension: {
+      manifestTransformer: (manifest) => {
+        let connectSrc = "connect-src 'self'";
+        if (["staging", "development"].includes(process.env.NODE_ENV)) {
+          manifest.content_security_policy = manifest.content_security_policy.replace("script-src 'self';", "script-src 'self' 'unsafe-eval';");
+          connectSrc = connectSrc + " http://localhost:8098 ws://localhost:8098";
+        }
+        manifest.content_security_policy = manifest.content_security_policy + " " + connectSrc + " " + process.env.VUE_APP_WS_ADDRESS + ";";
+        return manifest;
+      },
+    },
   },
   filenameHashing: false,
   configureWebpack: {