feature: added WebSocket support using originList | fix: updated build scripts and rewrote development instructions

README.md

@@ -12,16 +12,21 @@ This extension provides the following features to Hoppscotch:
 
 - [x] Overrides `CORS` restrictions for cross-origin requests (it allows requests against localhost).
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
 > If you want to use the extension anywhere outside [the official Hoppscotch instance](https://hoppscotch.io) you may want to add the domain to the extension's origin list. You can access the origin list by clicking on the extension icon on your browser toolbar.
 
 ### Development
-We use [pnpm](https://pnpm.io) as our package manager. Please install it before proceeding.
 
-- Clone the repo
-- Run `pnpm install`
-- Run `pnpm run build:chrome` or `pnpm run build:firefox` depending on your browser to generate the *dist* folder
-- Install the extension using your browser's install options (a quick Google search will yield the methods)
+1. Install or verify the installation of [pnpm](https://pnpm.io)
+2. Clone the repository
+3. Open the root folder in a [Git Bash](https://www.geeksforgeeks.org/working-on-git-bash/) command-line
+4. Run `pnpm install` to install the necessary packages
+5. Generate the **dist** folder for the target browser
+    1. For Chrome, run `pnpm run build:chrome`
+    2. For Firefox, run `pnpm run build:firefox`
+4. Package and install the extension to the target browser
+    1. For Chrome, follow this [tutorial](https://developer.chrome.com/docs/extensions/get-started/)
+    2. For Firefox, follow this [tutorial](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension)
 
 Hoppscotch is built with the help of an amazing group of people.
 

mergeManifest.js

@@ -3,7 +3,7 @@ const fs = require("fs").promises
 
 module.exports = new Reporter({
   async report({ event }) {
-    const target = process.env.HOPP_EXTENSION_TARGET
+    const target = process.env.HOPP_EXTENSION_TARGET.trim();
 
     if (!target) {
       return

package.json

@@ -4,8 +4,8 @@
   "description": "Provides more features to the Hoppscotch webapp (https://hoppscotch.io/)",
   "scripts": {
     "clean": "rimraf dist .parcel-cache",
-    "build:chrome": "HOPP_EXTENSION_TARGET=CHROME parcel build src/* --dist-dir dist/ --no-optimize && copyfiles icons/* dist",
-    "build:firefox": "HOPP_EXTENSION_TARGET=FIREFOX parcel build src/* --dist-dir dist/ --no-optimize && copyfiles icons/* dist"
+    "build:chrome": "set HOPP_EXTENSION_TARGET=CHROME && parcel build src/* --dist-dir dist/ --no-optimize && copyfiles icons/* dist",
+    "build:firefox": "set HOPP_EXTENSION_TARGET=FIREFOX && parcel build src/* --dist-dir dist/ --no-optimize && copyfiles icons/* dist"
   },
   "author": "Andrew Bastin",
   "license": "MIT",

src/index.ts

@@ -376,10 +376,6 @@ chrome.runtime.onMessage.addListener(
 
 let originList: string[] = []
 
-chrome.storage.sync.get((items) => {
-  originList = JSON.parse(items["originList"])
-})
-
 chrome.storage.onChanged.addListener((changes, _areaName) => {
   if (changes.originList && changes.originList.newValue) {
     originList = JSON.parse(changes.originList.newValue)
@@ -423,10 +419,10 @@ chrome.runtime.onInstalled.addListener(() => {
 chrome.runtime.onMessage.addListener((message, sender) => {
   if (message.type && message.type == "execute_hook" && sender.tab.id) {
     const files =
-      message.origin_type == "VALID_ORIGIN"
-        ? ["hookContent.js"]
-        : ["hookContentInvalidOrigin.js"]
-
+    message.origin_type == "VALID_ORIGIN"
+    ? ["hookContent.js"]
+    : ["hookContentInvalidOrigin.js"]
+    
     chrome.scripting.executeScript({
       target: {
         tabId: sender.tab.id,
@@ -436,3 +432,66 @@ chrome.runtime.onMessage.addListener((message, sender) => {
     })
   }
 })
+
+chrome.storage.sync.get((items) => {
+  let originList: string[];
+  if(!items['originList']){
+    originList = ["https://hoppscotch.io"]
+    }else{
+    originList = JSON.parse(items["originList"])
+    }
+})
+
+
+let activeWebSocket: WebSocket = null;
+
+function connectWebSocket(wsUrl: string | URL) {
+  if (!wsUrl) {
+    console.warn("No WebSocket URL provided.");
+    return;
+  }
+
+  console.log(`Connecting to WebSocket: ${wsUrl}`);
+
+  activeWebSocket = new WebSocket(wsUrl);
+
+  activeWebSocket.onopen = () => console.log("WebSocket Connected:", wsUrl);
+
+  activeWebSocket.onmessage = (event) => console.log("WebSocket Message:", event.data);
+
+  activeWebSocket.onerror = (error) => console.error("WebSocket Error:", error);
+
+  activeWebSocket.onclose = (event) => {
+    console.warn(`WebSocket Closed: Code ${event.code}, Reason: ${event.reason}`);
+  };
+}
+
+// Check for WebSocket URLs in Active Origins
+chrome.storage.sync.get(["originList"], (data) => {
+  const originList = JSON.parse(data.originList || "[]");
+  const wsUrl = originList.find((url: string) => url.startsWith("ws://") || url.startsWith("wss://"));
+
+  if (wsUrl) {
+    connectWebSocket(wsUrl);
+  }
+});
+
+chrome.storage.onChanged.addListener((changes) => {
+  if (changes.originList) {
+    const newOriginList = JSON.parse(changes.originList.newValue || "[]");
+    const wsUrl = newOriginList.find((url: string) => url.startsWith("ws://") || url.startsWith("wss://"));
+
+    // Close the WebSocket if it's removed from the list
+    if (!wsUrl && activeWebSocket) {
+      console.log("Closing connection.");
+      activeWebSocket.close();
+      activeWebSocket = null; 
+    } else if (wsUrl && (!activeWebSocket || activeWebSocket.readyState !== WebSocket.OPEN)) {
+      // If a new WebSocket URL is found, and WebSocket is not open, reconnect
+      if (activeWebSocket) {
+        activeWebSocket.close();
+      }
+      connectWebSocket(wsUrl);
+    }
+  }
+});