Define wsAddress in .env.[mode] to allow custom URLs

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 URL to staging
server.

.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
 

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'; connect-src 'self' 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

@@ -29,7 +29,9 @@ module.exports = {
     },
     manifest: {
       cspAppender: (manifest) => {
-        let csp = []
+        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'"},