New implementation

.vscode/settings.json

@@ -6,6 +6,7 @@
         "files.trimTrailingWhitespace": false,
         "editor.minimap.enabled": false
     },
+    "liveServer.settings.multiRootWorkspaceName": "live-server-web-extension",
     // "liveServer.settings.proxy": {
     //     "enable": true,
     //     "baseUri": "/",

popup/css/style.css

@@ -1,8 +1,6 @@
 @import "button.css";
-
-
-*, 
-*::after, 
+*,
+*::after,
 *::before {
     box-sizing: border-box;
     font-size: 15px;
@@ -26,7 +24,7 @@ body {
     background-color: #d5d5d5;
 }
 
-.header > p {
+.header>p {
     font-size: 12px;
     font-style: italic;
     font-weight: 400;
@@ -40,10 +38,10 @@ body {
     letter-spacing: 0.9px;
     background-color: #d5d5d5;
     display: block;
-    padding: 5px ;
+    padding: 5px;
 }
 
-.footer > p {
+.footer>p {
     font-size: 10px;
     padding: 10px;
 }
@@ -78,10 +76,14 @@ body {
 .hide {
     display: none;
 }
-input:focus, button:focus {
+
+input:focus,
+button:focus {
     outline: none;
 }
-label[for="proxyCheckBox"], input[type="checkbox"] {
+
+label[for="proxyCheckBox"],
+input[type="checkbox"] {
     cursor: pointer;
 }
 
@@ -95,6 +97,11 @@ label[for="proxyCheckBox"], input[type="checkbox"] {
     cursor: pointer;
     user-select: none;
     border: 0px;
+    transition: all 0.3s ease-in-out;
+}
+
+.btn:active {
+    transform: scale(0.8);
 }
 
 .btn-highlight {
@@ -111,4 +118,26 @@ label[for="proxyCheckBox"], input[type="checkbox"] {
     font-size: 10px;
     float: right;
     margin-right: 6px;
+}
+
+#liveServerPort {
+    width: 65%;
+}
+
+#liveServerConnBtn {
+    display: inline-block;
+    width: 34%;
+    vertical-align: bottom;
+    font-size: 12px;
+    margin-right: -5px;
+}
+
+#liveServerConnBtn.connected {
+    background: green;
+    color: #fff
+}
+
+#liveServerConnBtn.not-connected {
+    background: red;
+    color: #fff
 }

popup/popup.html

@@ -31,22 +31,23 @@
         <div class="row">
             <div>
                 <input type="checkbox" id="noProxyCheckBox">
-                <label for="noProxyCheckBox">I don't want proxy setup (recommended)</label>
+                <label for="noProxyCheckBox">No complicated Proxy Setup (recommended)</label>
             </div>
         </div>
 
         <div id="serverSetup">
             <div class="row">
                 <div>
-                    <label class="form-label" for="actualServer">Actual Server Address</label>
+                    <label class="form-label" for="actualServer">Original Server Address</label>
                     <input class="form-control" type="text" id="actualServer" placeholder="http://Your Server Address">
                 </div>
             </div>
 
             <div class="row">
                 <div>
-                    <label class="form-label" for="liveServer">Live Server Address</label>
-                    <input class="form-control" type="text" id="liveServer" placeholder="Eg. http://127.0.0.1:5500/">
+                    <label class="form-label" for="liveServerPort">Live Server Port</label>
+                    <input class="form-control" type="number" id="liveServerPort" value="5500">
+                    <button type="button" class="btn" id="liveServerConnBtn">Test Connection</button>
                     <a class="short-right-label" target="_blank" href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Install Live Server</a>
                 </div>
             </div>
@@ -57,8 +58,9 @@
     </div>
     <div class="footer">
         <a target="_blank" href="https://github.com/ritwickdey/live-server-web-extension">Need Help?</a>
-        <p>NOTE: You need two server. Live Server will give `live` power of your existing server (May be Wamp, XAMPP, IIS
-            or Node.js)</p>
+        <p>NOTE: You need two server. Live Server will give `live` power of your existing server (May be Wamp, XAMPP, IIS or
+            Node.js)
+        </p>
     </div>
     <script src="./popup.js"></script>
 </body>

popup/popup.js

@@ -5,8 +5,9 @@
     const liveReloadCheck = document.getElementById('liveReloadCheck');
     const noProxyCheckBox = document.getElementById('noProxyCheckBox');
     const actualServerAddress = document.getElementById('actualServer');
-    const liveServerAddress = document.getElementById('liveServer');
+    const liveServerPort = document.getElementById('liveServerPort');
     const submitBtn = document.getElementById('submitBtn');
+    const liveServerConnBtn = document.getElementById('liveServerConnBtn');
 
     const serverSetupDiv = document.getElementById('serverSetup');
 
@@ -15,7 +16,8 @@
             isEnable: liveReloadCheck.checked,
             proxySetup: !noProxyCheckBox.checked,
             actualUrl: actualServerAddress.value || '',
-            liveServerUrl: liveServerAddress.value || ''
+            // liveServerUrl: `http://127.0.0.1:${liveServerPort.value}`,
+            liveServerPort: liveServerPort.value
         }
 
         chrome.runtime.sendMessage({
@@ -43,7 +45,7 @@
             liveReloadCheck.checked = data.isEnable || false;
             noProxyCheckBox.checked = !data.proxySetup;
             actualServerAddress.value = data.actualUrl || '';
-            liveServerAddress.value = data.liveServerUrl || '';
+            liveServerPort.value = data.liveServerPort || 5500;
             serverSetupDiv.className =  noProxyCheckBox.checked ? 'show' : 'hide';
         });
     });
@@ -54,10 +56,32 @@
         submitBtn.disabled = true;
     }
 
-    liveServerAddress.onkeyup = actualServerAddress.onkeyup = () => {
+    liveServerPort.onkeyup = actualServerAddress.onkeyup = () => {
         submitBtn.disabled = false;
         submitBtn.classList.add('btn-highlight');
+        liveServerConnBtn.innerText = 'Test Connection';
+        liveServerConnBtn.classList.remove('connected');
+        liveServerConnBtn.classList.remove('not-connected');
     }
 
+    liveServerConnBtn.onclick = () => {
+        liveServerConnBtn.innerText = "Testing...";
+
+        const ws = new WebSocket(`ws://127.0.0.1:${liveServerPort.value}/ws`)
+        ws.onerror = () =>  {
+            liveServerConnBtn.classList.remove('connected');
+            liveServerConnBtn.classList.add('not-connected');
+            liveServerConnBtn.innerText = "Not Connected"
+            console.log('not connected');
+        }
+        ws.onmessage = () =>  {
+            liveServerConnBtn.classList.add('connected');
+            liveServerConnBtn.classList.remove('not-connected');
+            liveServerConnBtn.innerText = "Connected"
+            console.log('connected');
+            ws.close();
+        }
+    };
+
 
 })();

reload.js

@@ -10,16 +10,16 @@
     function init(data) {
         if (!data.proxySetup) {
             //Correction
-            if (data.liveServerUrl.indexOf('http') !== 0)
-                data.liveServerUrl = 'http' + data.liveServerUrl;
+            // if (data.liveServerUrl.indexOf('http') !== 0)
+            //     data.liveServerUrl = 'http' + data.liveServerUrl;
             if (data.actualUrl.indexOf('http') !== 0)
-                data.actualUrl = 'http' + data.actualUrl;
+                data.actualUrl = 'http://' + data.actualUrl;
             if (!data.actualUrl.endsWith('/'))
                 data.actualUrl = data.actualUrl + '/';
 
-            address = data.liveServerUrl.replace('http', 'ws') + '/ws';
+            // address = data.liveServerUrl.replace('http', 'ws') + '/ws';
         }
-        socket = new WebSocket(address);
+        socket = new WebSocket(`ws://127.0.0.1:${data.liveServerPort}/ws`);
         socket.onmessage = (msg) => {
             reloadWindow(msg, data)
         };