Made the extension and README more friendly

README.md

@@ -2,4 +2,40 @@
 
 [![Project Status: Active](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active) [![GPLv3 license](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0) [![Build Status](https://jenkins.voidtech.de/buildStatus/icon?job=NetflixParty)](https://jenkins.voidtech.de/job/NetflixParty/)
 
-It is better than Teleparty.
+It is better than Teleparty.
+
+# Config File
+
+```
+http.port=6969 //Set the HTTP/WebSocket port
+```
+
+Note: if you want to spin up your own server, you will need to change the resource URL in the JS files.
+
+# Using the Chrome Extension
+
+## Installation
+
+1) `git pull` this repository
+2) Navigate to `chrome://extensions` in Google Chrome
+3) Enable developer mode
+4) Click load unpacked extension
+5) Navigate to the `extension` folder in the files you just downloaded
+6) Chrome should now load the manifest file 
+
+## Usage
+
+1) Go to Netflix and choose something to watch
+2) When the video loads up, slap the Netflix icon and the room menu will open
+3) Set a room colour then smack the create room button
+4) Send the URL in the search bar to people who you want to join the room
+
+## Using the chat
+
+Press `ctrl + i` to open up the user menu. In this menu you can:
+
+- Set a nickname
+- Change your avatar
+- Change your nickname colour
+
+If you want to apply effects to your messages, have a look at the options using the `/help` command.

extension/createroom.js

@@ -1,12 +1,12 @@
-"unsafe-inline";
+const RESOURCE_URL = "netflixparty.voidtech.de"; //Make sure this URL has no protocol. Just the domain.
 
 function showMessage(message) {
     document.getElementById("message").style.display = "block";
     document.getElementById("subtitle").style.display = "none";
     document.getElementById("message").innerHTML = message;
 }
 
-const GatewayServerURL = "wss://netflixparty.voidtech.de/gateway"
+const GatewayServerURL = "wss://" + RESOURCE_URL + "/gateway"
 var Gateway = new WebSocket(GatewayServerURL);
 
 Gateway.onopen = function() {

extension/netflix-party-interface.js

@@ -1,7 +1,4 @@
-"unsafe inline";
-
 function embeddedCode() {
-    "unsafe inline";
     var Globals = {
         LAST_MESSAGE_AUTHOR: "",
         ROOM_COLOUR: "",
@@ -12,7 +9,9 @@ function embeddedCode() {
         CHAT_READY: false
     };
 
-    Globals.GATEWAY = new WebSocket("wss://netflixparty.voidtech.de/gateway");
+    const RESOURCE_URL = "netflixparty.voidtech.de"; //Make sure this URL has no protocol. Just the domain.
+
+    Globals.GATEWAY = new WebSocket("wss://" + RESOURCE_URL + "/gateway");
 
     function getVideoPlayer() {
         var e = window.netflix.appContext.state.playerApp.getAPI().videoPlayer,
@@ -409,7 +408,7 @@ function embeddedCode() {
 
         let newMessage = `<div class="chat-message">`;
         if (Globals.LAST_MESSAGE_AUTHOR !== author) {
-            newMessage += `<img class="user-image" src="${modifiers.includes("system") ? avatar : ("https://netflixparty.voidtech.de/avatar/" + avatar)}">`;
+            newMessage += `<img class="user-image" src="${modifiers.includes("system") ? avatar : ("https://" + RESOURCE_URL + "/avatar/" + avatar)}">`;
             newMessage += `<p class="msg-nickname" style="color:${colour}">${author}</p><br>`;
         }
         newMessage += `<p ${modifiers}>${content}</p></div>`;
@@ -431,11 +430,11 @@ function embeddedCode() {
     }
 
     function displayLocalMessage(message) {
-        addChatMessage({ "author": "System", "colour": Globals.ROOM_COLOUR, "content": message, "modifiers": "system", "avatar": "https://netflixparty.voidtech.de/avatar/default" });
+        addChatMessage({ "author": "System", "colour": Globals.ROOM_COLOUR, "content": message, "modifiers": "system", "avatar": "https://" + RESOURCE_URL + "/avatar/default" });
     }
 
     function setAvatarUrl(avatar) {
-        document.getElementById("avatar-preview").src = "https://netflixparty.voidtech.de/avatar/" + avatar;
+        document.getElementById("avatar-preview").src = "https://" + RESOURCE_URL + "/avatar/" + avatar;
     }
 
     function attachMenuListeners() {
@@ -510,7 +509,7 @@ function embeddedCode() {
                         <input type="color" id="colour-input" value="#ff0000"><br><br>
                     </div>
                     <div class="modal-item">
-                        <img src="https://netflixparty.voidtech.de/avatar/default" id="avatar-preview" class="avatar-preview">
+                        <img src="https://${RESOURCE_URL}/avatar/default" id="avatar-preview" class="avatar-preview">
                         <br>
                         <label for="avatar-options" class="">Choose an avatar:</label><br><br>
                         <select name="avatar-options" id="avatar-input">

extension/popup.js

@@ -1,3 +1,5 @@
+const RESOURCE_URL = "netflixparty.voidtech.de"; //Make sure this URL has no protocol. Just the domain.
+
 function showMessage(message) {
     document.getElementById("user-message").innerHTML = message;
 }
@@ -11,7 +13,7 @@ chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
         } else if (url.pathname == "/watch") {
             window.location.href = "createroom.html";
         }
-    } else if (url.host == "netflixparty.voidtech.de") {
+    } else if (url.host == RESOURCE_URL) {
         showMessage("You don't need to visit this page (although you are more than welcome to!), the chrome extension will do everything for you!");
     }
 });