refactor: move from network strategies to generic interceptor service (#3242)

packages/hoppscotch-common/locales/en.json

@@ -249,6 +249,7 @@
     "no_duration": "No duration",
     "no_results_found": "No matches found",
     "page_not_found": "This page could not be found",
+    "proxy_error": "Proxy error",
     "script_fail": "Could not execute pre-request script",
     "something_went_wrong": "Something went wrong",
     "test_script_fail": "Could not execute post-request script"

packages/hoppscotch-common/src/components.d.ts

@@ -92,6 +92,7 @@ declare module '@vue/runtime-core' {
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
     HoppSmartPlaceholder: typeof import('@hoppscotch/ui')['HoppSmartPlaceholder']
     HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
+    HoppSmartRadio: typeof import('@hoppscotch/ui')['HoppSmartRadio']
     HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
     HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
@@ -160,6 +161,8 @@ declare module '@vue/runtime-core' {
     RealtimeLog: typeof import('./components/realtime/Log.vue')['default']
     RealtimeLogEntry: typeof import('./components/realtime/LogEntry.vue')['default']
     RealtimeSubscription: typeof import('./components/realtime/Subscription.vue')['default']
+    SettingsExtension: typeof import('./components/settings/Extension.vue')['default']
+    SettingsProxy: typeof import('./components/settings/Proxy.vue')['default']
     SmartAccentModePicker: typeof import('./components/smart/AccentModePicker.vue')['default']
     SmartAnchor: typeof import('./../../hoppscotch-ui/src/components/smart/Anchor.vue')['default']
     SmartAutoComplete: typeof import('./../../hoppscotch-ui/src/components/smart/AutoComplete.vue')['default']

packages/hoppscotch-common/src/components/app/Interceptor.vue

@@ -8,91 +8,41 @@
         {{ t("settings.interceptor_description") }}
       </p>
     </div>
-    <HoppSmartRadioGroup
+
-      v-model="interceptorSelection"
+    <div>
-      :radios="interceptors"
-    />
       <div
-      v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
+        v-for="interceptor in interceptors"
-      class="flex space-x-2"
+        :key="interceptor.interceptorID"
+        class="flex flex-col"
       >
-      <HoppButtonSecondary
+        <HoppSmartRadio
-        to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+          :value="interceptor.interceptorID"
-        blank
+          :label="unref(interceptor.name(t))"
-        :icon="IconChrome"
+          :selected="interceptorSelection === interceptor.interceptorID"
-        label="Chrome"
+          @change="interceptorSelection = interceptor.interceptorID"
-        outline
-        class="!flex-1"
         />
-      <HoppButtonSecondary
+
-        to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+        <component
-        blank
+          :is="interceptor.selectorSubtitle"
-        :icon="IconFirefox"
+          v-if="interceptor.selectorSubtitle"
-        label="Firefox"
-        outline
-        class="!flex-1"
         />
       </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import IconChrome from "~icons/brands/chrome"
-import IconFirefox from "~icons/brands/firefox"
-import { computed } from "vue"
-import { applySetting, toggleSetting } from "~/newstore/settings"
-import { useSetting } from "@composables/settings"
 import { useI18n } from "@composables/i18n"
-import { useReadonlyStream } from "@composables/stream"
+import { useService } from "dioc/vue"
-import { extensionStatus$ } from "~/newstore/HoppExtension"
+import { Ref, unref } from "vue"
+import { InterceptorService } from "~/services/interceptor.service"
 
 const t = useI18n()
 
-const PROXY_ENABLED = useSetting("PROXY_ENABLED")
+const interceptorService = useService(InterceptorService)
-const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
 
-const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
+const interceptorSelection =
+  interceptorService.currentInterceptorID as Ref<string>
 
-const extensionVersion = computed(() => {
+const interceptors = interceptorService.availableInterceptors
-  return currentExtensionStatus.value === "available"
-    ? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
-    : null
-})
-
-const interceptors = computed(() => [
-  { value: "BROWSER_ENABLED" as const, label: t("state.none") },
-  { value: "PROXY_ENABLED" as const, label: t("settings.proxy") },
-  {
-    value: "EXTENSIONS_ENABLED" as const,
-    label:
-      `${t("settings.extensions")}: ` +
-      (extensionVersion.value !== null
-        ? `v${extensionVersion.value.major}.${extensionVersion.value.minor}`
-        : t("settings.extension_ver_not_reported")),
-  },
-])
-
-type InterceptorMode = (typeof interceptors)["value"][number]["value"]
-
-const interceptorSelection = computed<InterceptorMode>({
-  get() {
-    if (PROXY_ENABLED.value) return "PROXY_ENABLED"
-    if (EXTENSIONS_ENABLED.value) return "EXTENSIONS_ENABLED"
-    return "BROWSER_ENABLED"
-  },
-  set(val) {
-    if (val === "EXTENSIONS_ENABLED") {
-      applySetting("EXTENSIONS_ENABLED", true)
-      if (PROXY_ENABLED.value) toggleSetting("PROXY_ENABLED")
-    }
-    if (val === "PROXY_ENABLED") {
-      applySetting("PROXY_ENABLED", true)
-      if (EXTENSIONS_ENABLED.value) toggleSetting("EXTENSIONS_ENABLED")
-    }
-    if (val === "BROWSER_ENABLED") {
-      applySetting("PROXY_ENABLED", false)
-      applySetting("EXTENSIONS_ENABLED", false)
-    }
-  },
-})
 </script>

packages/hoppscotch-common/src/components/graphql/Request.vue

@@ -29,7 +29,6 @@
 <script setup lang="ts">
 import { platform } from "~/platform"
 import { GQLConnection } from "~/helpers/GQLConnection"
-import { getCurrentStrategyID } from "~/helpers/network"
 import { useReadonlyStream, useStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
 import {
@@ -38,9 +37,13 @@ import {
   gqlURL$,
   setGQLURL,
 } from "~/newstore/GQLSession"
+import { useService } from "dioc/vue"
+import { InterceptorService } from "~/services/interceptor.service"
 
 const t = useI18n()
 
+const interceptorService = useService(InterceptorService)
+
 const props = defineProps<{
   conn: GQLConnection
 }>()
@@ -62,7 +65,7 @@ const onConnectClick = () => {
     platform.analytics?.logEvent({
       type: "HOPP_REQUEST_RUN",
       platform: "graphql-schema",
-      strategy: getCurrentStrategyID(),
+      strategy: interceptorService.currentInterceptorID.value!,
     })
   } else {
     props.conn.disconnect()

packages/hoppscotch-common/src/components/graphql/RequestOptions.vue

@@ -373,7 +373,6 @@ import { commonHeaders } from "~/helpers/headers"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
 import { platform } from "~/platform"
-import { getCurrentStrategyID } from "~/helpers/network"
 import { useCodemirror } from "@composables/codemirror"
 import jsonLinter from "~/helpers/editor/linting/json"
 import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
@@ -381,6 +380,8 @@ import queryCompleter from "~/helpers/editor/completion/gqlQuery"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 import { objRemoveKey } from "~/helpers/functional/object"
+import { useService } from "dioc/vue"
+import { InterceptorService } from "~/services/interceptor.service"
 
 type OptionTabs = "query" | "headers" | "variables" | "authorization"
 
@@ -390,6 +391,8 @@ const selectedOptionTab = ref<OptionTabs>("query")
 
 const t = useI18n()
 
+const interceptorService = useService(InterceptorService)
+
 const props = defineProps<{
   conn: GQLConnection
 }>()
@@ -744,7 +747,7 @@ const runQuery = async () => {
   platform.analytics?.logEvent({
     type: "HOPP_REQUEST_RUN",
     platform: "graphql-query",
-    strategy: getCurrentStrategyID(),
+    strategy: interceptorService.currentInterceptorID.value!,
   })
 }
 

packages/hoppscotch-common/src/components/http/Request.vue

@@ -241,17 +241,12 @@ import { useReadonlyStream, useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
 import { refAutoReset, useVModel } from "@vueuse/core"
 import * as E from "fp-ts/Either"
-import { isLeft, isRight } from "fp-ts/lib/Either"
+import { Ref, computed, onBeforeUnmount, ref } from "vue"
-import { computed, onBeforeUnmount, ref } from "vue"
 import { defineActionHandler } from "~/helpers/actions"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
 import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
-import {
-  cancelRunningExtensionRequest,
-  hasExtensionInstalled,
-} from "~/helpers/strategies/ExtensionStrategy"
 import { runRESTRequest$ } from "~/helpers/RequestRunner"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -270,12 +265,13 @@ import { HoppRESTTab, currentTabID } from "~/helpers/rest/tab"
 import { getDefaultRESTRequest } from "~/helpers/rest/default"
 import { RESTHistoryEntry, restHistory$ } from "~/newstore/history"
 import { platform } from "~/platform"
-import { getCurrentStrategyID } from "~/helpers/network"
 import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
 import { useService } from "dioc/vue"
 import { InspectionService } from "~/services/inspection"
+import { InterceptorService } from "~/services/interceptor.service"
 
 const t = useI18n()
+const interceptorService = useService(InterceptorService)
 
 const methods = [
   "GET",
@@ -328,6 +324,8 @@ const saveRequestAction = ref<any | null>(null)
 
 const history = useReadonlyStream<RESTHistoryEntry[]>(restHistory$, [])
 
+const requestCancelFunc: Ref<(() => void) | null> = ref(null)
+
 const userHistories = computed(() => {
   return history.value.map((history) => history.request.endpoint).slice(0, 10)
 })
@@ -346,13 +344,15 @@ const newSendRequest = async () => {
   platform.analytics?.logEvent({
     type: "HOPP_REQUEST_RUN",
     platform: "rest",
-    strategy: getCurrentStrategyID(),
+    strategy: interceptorService.currentInterceptorID.value!,
   })
 
-  // Double calling is because the function returns a TaskEither than should be executed
+  const [cancel, streamPromise] = runRESTRequest$(tab)
-  const streamResult = await runRESTRequest$(tab)()
+  const streamResult = await streamPromise
 
-  if (isRight(streamResult)) {
+  requestCancelFunc.value = cancel
+
+  if (E.isRight(streamResult)) {
     subscribeToStream(
       streamResult.right,
       (responseState) => {
@@ -369,7 +369,7 @@ const newSendRequest = async () => {
         loading.value = false
       }
     )
-  } else if (isLeft(streamResult)) {
+  } else {
     loading.value = false
     toast.error(`${t("error.script_fail")}`)
     let error: Error
@@ -419,9 +419,8 @@ function isCURL(curl: string) {
 
 const cancelRequest = () => {
   loading.value = false
-  if (hasExtensionInstalled()) {
+  requestCancelFunc.value?.()
-    cancelRunningExtensionRequest()
+
-  }
   updateRESTResponse(null)
 }
 

packages/hoppscotch-common/src/components/interceptors/ExtensionSubtitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    v-if="
+      interceptorSelection === extensionService.interceptorID &&
+      extensionService.extensionStatus.value !== 'available'
+    "
+    class="flex space-x-2"
+  >
+    <HoppButtonSecondary
+      to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+      blank
+      :icon="IconChrome"
+      label="Chrome"
+      outline
+      class="!flex-1"
+    />
+    <HoppButtonSecondary
+      to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+      blank
+      :icon="IconFirefox"
+      label="Firefox"
+      outline
+      class="!flex-1"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconChrome from "~icons/brands/chrome"
+import IconFirefox from "~icons/brands/firefox"
+import { InterceptorService } from "~/services/interceptor.service"
+import { useService } from "dioc/vue"
+import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
+
+const interceptorService = useService(InterceptorService)
+const extensionService = useService(ExtensionInterceptorService)
+
+const interceptorSelection = interceptorService.currentInterceptorID
+</script>

packages/hoppscotch-common/src/components/settings/Extension.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="my-1 text-secondaryLight">
+    <span v-if="extensionVersion != null">
+      {{
+        `${t("settings.extension_version")}: v${extensionVersion.major}.${
+          extensionVersion.minor
+        }`
+      }}
+    </span>
+    <span v-else>
+      {{ t("settings.extension_version") }}:
+      {{ t("settings.extension_ver_not_reported") }}
+    </span>
+  </div>
+  <div class="flex flex-col py-4 space-y-2">
+    <span>
+      <HoppSmartItem
+        to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+        blank
+        :icon="IconChrome"
+        label="Chrome"
+        :info-icon="hasChromeExtInstalled ? IconCheckCircle : null"
+        :active-info-icon="hasChromeExtInstalled"
+        outline
+      />
+    </span>
+    <span>
+      <HoppSmartItem
+        to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+        blank
+        :icon="IconFirefox"
+        label="Firefox"
+        :info-icon="hasFirefoxExtInstalled ? IconCheckCircle : null"
+        :active-info-icon="hasFirefoxExtInstalled"
+        outline
+      />
+    </span>
+  </div>
+  <div class="py-4 space-y-4">
+    <div class="flex items-center">
+      <HoppSmartToggle
+        :on="extensionEnabled"
+        @change="extensionEnabled = !extensionEnabled"
+      >
+        {{ t("settings.extensions_use_toggle") }}
+      </HoppSmartToggle>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconChrome from "~icons/brands/chrome"
+import IconFirefox from "~icons/brands/firefox"
+import IconCheckCircle from "~icons/lucide/check-circle"
+import { useI18n } from "@composables/i18n"
+import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
+import { useService } from "dioc/vue"
+import { computed } from "vue"
+import { InterceptorService } from "~/services/interceptor.service"
+import { platform } from "~/platform"
+
+const t = useI18n()
+
+const interceptorService = useService(InterceptorService)
+const extensionService = useService(ExtensionInterceptorService)
+
+const extensionVersion = extensionService.extensionVersion
+const hasChromeExtInstalled = extensionService.chromeExtensionInstalled
+const hasFirefoxExtInstalled = extensionService.firefoxExtensionInstalled
+
+const extensionEnabled = computed({
+  get() {
+    return (
+      interceptorService.currentInterceptorID.value ===
+      extensionService.interceptorID
+    )
+  },
+  set(active) {
+    if (active) {
+      interceptorService.currentInterceptorID.value =
+        extensionService.interceptorID
+    } else {
+      interceptorService.currentInterceptorID.value =
+        platform.interceptors.default
+    }
+  },
+})
+</script>

packages/hoppscotch-common/src/components/settings/Proxy.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="my-1 text-secondaryLight">
+    {{ `${t("settings.official_proxy_hosting")} ${t("settings.read_the")}` }}
+    <HoppSmartAnchor
+      class="link"
+      to="https://docs.hoppscotch.io/support/privacy"
+      blank
+      :label="t('app.proxy_privacy_policy')"
+    />.
+  </div>
+  <div class="py-4 space-y-4">
+    <div class="flex items-center">
+      <HoppSmartToggle
+        :on="proxyEnabled"
+        @change="proxyEnabled = !proxyEnabled"
+      >
+        {{ t("settings.proxy_use_toggle") }}
+      </HoppSmartToggle>
+    </div>
+  </div>
+  <div class="flex items-center py-4 space-x-2">
+    <HoppSmartInput
+      v-model="PROXY_URL"
+      styles="flex-1"
+      placeholder=" "
+      input-styles="input floating-input"
+      :disabled="!proxyEnabled"
+    >
+      <template #label>
+        <label for="url">
+          {{ t("settings.proxy_url") }}
+        </label>
+      </template>
+    </HoppSmartInput>
+    <HoppButtonSecondary
+      v-tippy="{ theme: 'tooltip' }"
+      :title="t('settings.reset_default')"
+      :icon="clearIcon"
+      outline
+      class="rounded"
+      @click="resetProxy"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { refAutoReset } from "@vueuse/core"
+import { useI18n } from "~/composables/i18n"
+import { useSetting } from "~/composables/settings"
+import IconRotateCCW from "~icons/lucide/rotate-ccw"
+import IconCheck from "~icons/lucide/check"
+import { useToast } from "~/composables/toast"
+import { computed } from "vue"
+import { useService } from "dioc/vue"
+import { InterceptorService } from "~/services/interceptor.service"
+import { proxyInterceptor } from "~/platform/std/interceptors/proxy"
+import { platform } from "~/platform"
+
+const t = useI18n()
+const toast = useToast()
+
+const interceptorService = useService(InterceptorService)
+
+const PROXY_URL = useSetting("PROXY_URL")
+
+const proxyEnabled = computed({
+  get() {
+    return (
+      interceptorService.currentInterceptorID.value ===
+      proxyInterceptor.interceptorID
+    )
+  },
+  set(active) {
+    if (active) {
+      interceptorService.currentInterceptorID.value =
+        proxyInterceptor.interceptorID
+    } else {
+      interceptorService.currentInterceptorID.value =
+        platform.interceptors.default
+    }
+  },
+})
+
+const clearIcon = refAutoReset<typeof IconRotateCCW | typeof IconCheck>(
+  IconRotateCCW,
+  1000
+)
+
+const resetProxy = () => {
+  PROXY_URL.value = "https://proxy.hoppscotch.io/"
+  clearIcon.value = IconCheck
+  toast.success(`${t("state.cleared")}`)
+}
+</script>

packages/hoppscotch-common/src/helpers/GQLConnection.ts

@@ -1,3 +1,4 @@
+import * as E from "fp-ts/Either"
 import { BehaviorSubject } from "rxjs"
 import {
   getIntrospectionQuery,
@@ -11,7 +12,8 @@ import {
 } from "graphql"
 import { distinctUntilChanged, map } from "rxjs/operators"
 import { GQLHeader, HoppGQLAuth } from "@hoppscotch/data"
-import { sendNetworkRequest } from "./network"
+import { getService } from "~/modules/dioc"
+import { InterceptorService } from "~/services/interceptor.service"
 
 const GQL_SCHEMA_POLL_INTERVAL = 7000
 
@@ -181,7 +183,7 @@ export class GQLConnection {
       headers.forEach((x) => (finalHeaders[x.key] = x.value))
 
       const reqOptions = {
-        method: "POST",
+        method: "POST" as const,
         url,
         headers: {
           ...finalHeaders,
@@ -190,11 +192,20 @@ export class GQLConnection {
         data: introspectionQuery,
       }
 
-      const data = await sendNetworkRequest(reqOptions)
+      const interceptorService = getService(InterceptorService)
+
+      const res = await interceptorService.runRequest(reqOptions).response
+
+      if (E.isLeft(res)) {
+        console.error(res.left)
+        throw new Error(res.left.toString())
+      }
+
+      const data = res.right
 
       // HACK : Temporary trailing null character issue from the extension fix
       const response = new TextDecoder("utf-8")
-        .decode(data.data)
+        .decode(data.data as any)
         .replace(/\0+$/, "")
 
       const introspectResponse = JSON.parse(response)
@@ -245,7 +256,7 @@ export class GQLConnection {
       .forEach(({ key, value }) => (finalHeaders[key] = value))
 
     const reqOptions = {
-      method: "POST",
+      method: "POST" as const,
       url,
       headers: {
         ...finalHeaders,
@@ -260,11 +271,19 @@ export class GQLConnection {
       },
     }
 
-    const res = await sendNetworkRequest(reqOptions)
+    const interceptorService = getService(InterceptorService)
+    const result = await interceptorService.runRequest(reqOptions).response
+
+    if (E.isLeft(result)) {
+      console.error(result.left)
+      throw new Error(result.left.toString())
+    }
+
+    const res = result.right
 
     // HACK: Temporary trailing null character issue from the extension fix
     const responseText = new TextDecoder("utf-8")
-      .decode(res.data)
+      .decode(res.data as any)
       .replace(/\0+$/, "")
 
     return responseText

packages/hoppscotch-common/src/helpers/RequestRunner.ts

@@ -1,6 +1,5 @@
 import { Observable, Subject } from "rxjs"
 import { filter } from "rxjs/operators"
-import * as TE from "fp-ts/lib/TaskEither"
 import { flow, pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
@@ -10,7 +9,7 @@ import {
   runTestScript,
   TestDescriptor,
 } from "@hoppscotch/js-sandbox"
-import { isRight } from "fp-ts/Either"
+import * as E from "fp-ts/Either"
 import { cloneDeep } from "lodash-es"
 import {
   getCombinedEnvVariables,
@@ -69,26 +68,45 @@ export const executedResponses$ = new Subject<
   HoppRESTResponse & { type: "success" | "fail " }
 >()
 
-export const runRESTRequest$ = (
+export function runRESTRequest$(
   tab: Ref<HoppRESTTab>
-): TE.TaskEither<string | Error, Observable<HoppRESTResponse>> =>
+): [
-  pipe(
+  () => void,
-    getFinalEnvsFromPreRequest(
+  Promise<
+    | E.Left<"script_fail" | "cancellation">
+    | E.Right<Observable<HoppRESTResponse>>
+  >
+] {
+  let cancelCalled = false
+  let cancelFunc: (() => void) | null = null
+
+  const cancel = () => {
+    cancelCalled = true
+    cancelFunc?.()
+  }
+
+  const res = getFinalEnvsFromPreRequest(
     tab.value.document.request.preRequestScript,
     getCombinedEnvVariables()
-    ),
+  )().then((envs) => {
-    TE.chain((envs) => {
+    if (cancelCalled) return E.left("cancellation" as const)
+
+    if (E.isLeft(envs)) {
+      console.error(envs.left)
+      return E.left("script_fail" as const)
+    }
+
     const effectiveRequest = getEffectiveRESTRequest(
       tab.value.document.request,
       {
         name: "Env",
-          variables: combineEnvVariables(envs),
+        variables: combineEnvVariables(envs.right),
       }
     )
 
-      const stream = createRESTNetworkRequestStream(effectiveRequest)
+    const [stream, cancelRun] = createRESTNetworkRequestStream(effectiveRequest)
+    cancelFunc = cancelRun
 
-      // Run Test Script when request ran successfully
     const subscription = stream
       .pipe(filter((res) => res.type === "success" || res.type === "fail"))
       .subscribe(async (res) => {
@@ -98,13 +116,17 @@ export const runRESTRequest$ = (
             res
           )
 
-            const runResult = await runTestScript(res.req.testScript, envs, {
+          const runResult = await runTestScript(
+            res.req.testScript,
+            envs.right,
+            {
               status: res.statusCode,
               body: getTestableBody(res),
               headers: res.headers,
-            })()
+            }
+          )()
 
-            if (isRight(runResult)) {
+          if (E.isRight(runResult)) {
             tab.value.testResults = translateToSandboxTestResults(
               runResult.right
             )
@@ -112,8 +134,7 @@ export const runRESTRequest$ = (
             setGlobalEnvVariables(runResult.right.envs.global)
 
             if (
-                environmentsStore.value.selectedEnvironmentIndex.type ===
+              environmentsStore.value.selectedEnvironmentIndex.type === "MY_ENV"
-                "MY_ENV"
             ) {
               const env = getEnvironment({
                 type: "MY_ENV",
@@ -166,9 +187,11 @@ export const runRESTRequest$ = (
         }
       })
 
-      return TE.right(stream)
+    return E.right(stream)
   })
-  )
+
+  return [cancel, res]
+}
 
 const getAddedEnvVariables = (
   current: Environment["variables"],

packages/hoppscotch-common/src/helpers/network.ts

@@ -1,97 +1,36 @@
-import { AxiosResponse, AxiosRequestConfig } from "axios"
+import { AxiosRequestConfig } from "axios"
 import { BehaviorSubject, Observable } from "rxjs"
 import { cloneDeep } from "lodash-es"
-import * as T from "fp-ts/Task"
+import * as E from "fp-ts/Either"
 import * as TE from "fp-ts/TaskEither"
-import { pipe } from "fp-ts/function"
-import AxiosStrategy, {
-  cancelRunningAxiosRequest,
-} from "./strategies/AxiosStrategy"
-import ExtensionStrategy, {
-  cancelRunningExtensionRequest,
-  hasExtensionInstalled,
-} from "./strategies/ExtensionStrategy"
 import { HoppRESTResponse } from "./types/HoppRESTResponse"
 import { EffectiveHoppRESTRequest } from "./utils/EffectiveURL"
-import { settingsStore } from "~/newstore/settings"
+import { getService } from "~/modules/dioc"
-
+import {
-export type NetworkResponse = AxiosResponse<any> & {
+  InterceptorService,
-  config?: {
+  NetworkResponse,
-    timeData?: {
+} from "~/services/interceptor.service"
-      startTime: number
-      endTime: number
-    }
-  }
-}
 
 export type NetworkStrategy = (
   req: AxiosRequestConfig
 ) => TE.TaskEither<any, NetworkResponse>
 
 export const cancelRunningRequest = () => {
-  if (isExtensionsAllowed() && hasExtensionInstalled()) {
+  // TODO: Implement
-    cancelRunningExtensionRequest()
-  } else {
-    cancelRunningAxiosRequest()
-  }
 }
 
-const isExtensionsAllowed = () => settingsStore.value.EXTENSIONS_ENABLED
+function processResponse(
-
-const runAppropriateStrategy = (req: AxiosRequestConfig) => {
-  if (isExtensionsAllowed() && hasExtensionInstalled()) {
-    return ExtensionStrategy(req)
-  }
-
-  return AxiosStrategy(req)
-}
-
-/**
- * Returns an identifier for how a request will be ran
- * if the system is asked to fire a request
- *
- */
-export function getCurrentStrategyID() {
-  if (isExtensionsAllowed() && hasExtensionInstalled()) {
-    return "extension" as const
-  } else if (settingsStore.value.PROXY_ENABLED) {
-    return "proxy" as const
-  } else {
-    return "normal" as const
-  }
-}
-
-export const sendNetworkRequest = (req: any) =>
-  pipe(
-    runAppropriateStrategy(req),
-    TE.getOrElse((e) => {
-      throw e
-    })
-  )()
-
-const processResponse = (
   res: NetworkResponse,
   req: EffectiveHoppRESTRequest,
   backupTimeStart: number,
   backupTimeEnd: number,
   successState: HoppRESTResponse["type"]
-) =>
+) {
-  pipe(
+  const contentLength = res.headers["content-length"]
-    TE.Do,
-
-    // Calculate the content length
-    TE.bind("contentLength", () =>
-      TE.of(
-        res.headers["content-length"]
     ? parseInt(res.headers["content-length"])
     : (res.data as ArrayBuffer).byteLength
-      )
-    ),
 
-    // Building the final response object
+  return <HoppRESTResponse>{
-    TE.map(
-      ({ contentLength }) =>
-        <HoppRESTResponse>{
     type: successState,
     statusCode: res.status,
     body: res.data,
@@ -105,85 +44,64 @@ const processResponse = (
     },
     req,
   }
-    )
+}
-  )
 
 export function createRESTNetworkRequestStream(
   request: EffectiveHoppRESTRequest
-): Observable<HoppRESTResponse> {
+): [Observable<HoppRESTResponse>, () => void] {
   const response = new BehaviorSubject<HoppRESTResponse>({
     type: "loading",
     req: request,
   })
 
-  pipe(
+  const req = cloneDeep(request)
-    TE.Do,
 
-    // Get a deep clone of the request
+  const headers = req.effectiveFinalHeaders.reduce((acc, { key, value }) => {
-    TE.bind("req", () => TE.of(cloneDeep(request))),
-
-    // Assembling headers object
-    TE.bind("headers", ({ req }) =>
-      TE.of(
-        req.effectiveFinalHeaders.reduce((acc, { key, value }) => {
     return Object.assign(acc, { [key]: value })
   }, {})
-      )
-    ),
 
-    // Assembling params object
-    TE.bind("params", ({ req }) => {
   const params = new URLSearchParams()
-      req.effectiveFinalParams.forEach((x) => {
+  for (const param of req.effectiveFinalParams) {
-        params.append(x.key, x.value)
+    params.append(param.key, param.value)
-      })
+  }
-      return TE.of(params)
-    }),
 
-    // Keeping the backup start time
+  const backupTimeStart = Date.now()
-    TE.bind("backupTimeStart", () => TE.of(Date.now())),
 
-    // Running the request and getting the response
+  const service = getService(InterceptorService)
-    TE.bind("res", ({ req, headers, params }) =>
+
-      runAppropriateStrategy({
+  const res = service.runRequest({
     method: req.method as any,
     url: req.effectiveFinalURL.trim(),
     headers,
     params,
     data: req.effectiveFinalBody,
   })
-    ),
 
-    // Getting the backup end time
+  res.response.then((res) => {
-    TE.bind("backupTimeEnd", () => TE.of(Date.now())),
+    const backupTimeEnd = Date.now()
 
-    // Assemble the final response object
+    if (E.isRight(res)) {
-    TE.chainW(({ req, res, backupTimeEnd, backupTimeStart }) =>
+      const processedRes = processResponse(
-      processResponse(res, req, backupTimeStart, backupTimeEnd, "success")
+        res.right,
-    ),
+        req,
+        backupTimeStart,
+        backupTimeEnd,
+        "success"
+      )
 
-    // Writing success state to the stream
+      response.next(processedRes)
-    TE.chain((res) => {
-      response.next(res)
       response.complete()
 
-      return TE.of(res)
+      return
-    }),
+    }
 
-    // Package the error type
+    response.next({
-    TE.getOrElseW((e) => {
-      const obj: HoppRESTResponse = {
       type: "network_fail",
-        error: e,
+      req,
-        req: request,
+      error: res.left,
-      }
+    })
-
+    response.complete()
-      response.next(obj)
-      response.complete()
-
-      return T.of(obj)
   })
-  )()
 
-  return response
+  return [response, () => res.cancel()]
 }

packages/hoppscotch-common/src/helpers/strategies/AxiosStrategy.ts

@@ -1,163 +0,0 @@
-import axios, { AxiosRequestConfig } from "axios"
-import { v4 } from "uuid"
-import { pipe } from "fp-ts/function"
-import * as TE from "fp-ts/TaskEither"
-import { cloneDeep } from "lodash-es"
-import { NetworkResponse, NetworkStrategy } from "../network"
-import { decodeB64StringToArrayBuffer } from "../utils/b64"
-import { settingsStore } from "~/newstore/settings"
-
-let cancelSource = axios.CancelToken.source()
-
-type ProxyHeaders = {
-  "multipart-part-key"?: string
-}
-
-type ProxyPayloadType = FormData | (AxiosRequestConfig & { wantsBinary: true })
-
-export const cancelRunningAxiosRequest = () => {
-  cancelSource.cancel()
-
-  // Create a new cancel token
-  cancelSource = axios.CancelToken.source()
-}
-
-const getProxyPayload = (
-  req: AxiosRequestConfig,
-  multipartKey: string | null
-) => {
-  let payload: ProxyPayloadType = {
-    ...req,
-    wantsBinary: true,
-    accessToken: import.meta.env.VITE_PROXYSCOTCH_ACCESS_TOKEN ?? "",
-  }
-
-  if (payload.data instanceof FormData) {
-    const formData = payload.data
-    payload.data = ""
-    formData.append(multipartKey!, JSON.stringify(payload))
-    payload = formData
-  }
-
-  return payload
-}
-
-const preProcessRequest = (req: AxiosRequestConfig): AxiosRequestConfig => {
-  const reqClone = cloneDeep(req)
-
-  // If the parameters are URLSearchParams, inject them to URL instead
-  // This prevents issues of marshalling the URLSearchParams to the proxy
-  if (reqClone.params instanceof URLSearchParams) {
-    try {
-      const url = new URL(reqClone.url ?? "")
-
-      for (const [key, value] of reqClone.params.entries()) {
-        url.searchParams.append(key, value)
-      }
-
-      reqClone.url = url.toString()
-    } catch (e) {
-      // making this a non-empty block, so we can make the linter happy.
-      // we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :)
-    }
-
-    reqClone.params = {}
-  }
-
-  return reqClone
-}
-
-const axiosWithProxy: NetworkStrategy = (req) =>
-  pipe(
-    TE.Do,
-
-    TE.bind("processedReq", () => TE.of(preProcessRequest(req))),
-
-    // If the request has FormData, the proxy needs a key
-    TE.bind("multipartKey", ({ processedReq }) =>
-      TE.of(
-        processedReq.data instanceof FormData
-          ? `proxyRequestData-${v4()}`
-          : null
-      )
-    ),
-
-    // Build headers to send
-    TE.bind("headers", ({ processedReq, multipartKey }) =>
-      TE.of(
-        processedReq.data instanceof FormData
-          ? <ProxyHeaders>{
-              "multipart-part-key": multipartKey,
-            }
-          : <ProxyHeaders>{}
-      )
-    ),
-
-    // Create payload
-    TE.bind("payload", ({ processedReq, multipartKey }) =>
-      TE.of(getProxyPayload(processedReq, multipartKey))
-    ),
-
-    // Run the proxy request
-    TE.chain(({ payload, headers }) =>
-      TE.tryCatch(
-        () =>
-          axios.post(
-            settingsStore.value.PROXY_URL || "https://proxy.hoppscotch.io",
-            payload,
-            {
-              headers,
-              cancelToken: cancelSource.token,
-            }
-          ),
-        (reason) =>
-          axios.isCancel(reason)
-            ? "cancellation" // Convert cancellation errors into cancellation strings
-            : reason
-      )
-    ),
-
-    // Check success predicate
-    TE.chain(
-      TE.fromPredicate(
-        ({ data }) => data.success,
-        ({ data }) => data.data.message || "Proxy Error"
-      )
-    ),
-
-    // Process Base64
-    TE.chain(({ data }) => {
-      if (data.isBinary) {
-        data.data = decodeB64StringToArrayBuffer(data.data)
-      }
-
-      return TE.of(data)
-    })
-  )
-
-const axiosWithoutProxy: NetworkStrategy = (req) =>
-  pipe(
-    TE.tryCatch(
-      () =>
-        axios({
-          ...req,
-          cancelToken: (cancelSource && cancelSource.token) || "",
-          responseType: "arraybuffer",
-        }),
-      (e) => (axios.isCancel(e) ? "cancellation" : (e as any))
-    ),
-
-    TE.orElse((e) =>
-      e !== "cancellation" && e.response
-        ? TE.right(e.response as NetworkResponse)
-        : TE.left(e)
-    )
-  )
-
-const axiosStrategy: NetworkStrategy = (req) =>
-  pipe(
-    req,
-    settingsStore.value.PROXY_ENABLED ? axiosWithProxy : axiosWithoutProxy
-  )
-
-export default axiosStrategy

packages/hoppscotch-common/src/helpers/strategies/ExtensionStrategy.ts

@@ -1,128 +0,0 @@
-import * as TE from "fp-ts/TaskEither"
-import * as O from "fp-ts/Option"
-import { pipe } from "fp-ts/function"
-import { AxiosRequestConfig } from "axios"
-import { cloneDeep } from "lodash-es"
-import { NetworkResponse, NetworkStrategy } from "../network"
-import { browserIsChrome, browserIsFirefox } from "../utils/userAgent"
-
-export const hasExtensionInstalled = () =>
-  typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined"
-
-export const hasChromeExtensionInstalled = () =>
-  hasExtensionInstalled() && browserIsChrome()
-
-export const hasFirefoxExtensionInstalled = () =>
-  hasExtensionInstalled() && browserIsFirefox()
-
-export const cancelRunningExtensionRequest = () => {
-  window.__POSTWOMAN_EXTENSION_HOOK__?.cancelRequest()
-}
-
-export const defineSubscribableObject = <T extends object>(obj: T) => {
-  const proxyObject = {
-    ...obj,
-    _subscribers: {} as {
-      // eslint-disable-next-line no-unused-vars
-      [key in keyof T]?: ((...args: any[]) => any)[]
-    },
-    subscribe(prop: keyof T, func: (...args: any[]) => any): void {
-      if (Array.isArray(this._subscribers[prop])) {
-        this._subscribers[prop]?.push(func)
-      } else {
-        this._subscribers[prop] = [func]
-      }
-    },
-  }
-
-  type SubscribableProxyObject = typeof proxyObject
-
-  return new Proxy(proxyObject, {
-    set(obj, prop, newVal) {
-      obj[prop as keyof SubscribableProxyObject] = newVal
-
-      const currentSubscribers = obj._subscribers[prop as keyof T]
-
-      if (Array.isArray(currentSubscribers)) {
-        for (const subscriber of currentSubscribers) {
-          subscriber(newVal)
-        }
-      }
-
-      return true
-    },
-  })
-}
-
-const preProcessRequest = (req: AxiosRequestConfig): AxiosRequestConfig => {
-  const reqClone = cloneDeep(req)
-
-  // If the parameters are URLSearchParams, inject them to URL instead
-  // This prevents marshalling issues with structured cloning of URLSearchParams
-  if (reqClone.params instanceof URLSearchParams) {
-    try {
-      const url = new URL(reqClone.url ?? "")
-
-      for (const [key, value] of reqClone.params.entries()) {
-        url.searchParams.append(key, value)
-      }
-
-      reqClone.url = url.toString()
-    } catch (e) {
-      // making this a non-empty block, so we can make the linter happy.
-      // we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :)
-    }
-
-    reqClone.params = {}
-  }
-
-  return reqClone
-}
-
-const extensionStrategy: NetworkStrategy = (req) =>
-  pipe(
-    TE.Do,
-
-    TE.bind("processedReq", () => TE.of(preProcessRequest(req))),
-
-    // Storeing backup timing data in case the extension does not have that info
-    TE.bind("backupTimeDataStart", () => TE.of(new Date().getTime())),
-
-    // Run the request
-    TE.bind("response", ({ processedReq }) =>
-      pipe(
-        window.__POSTWOMAN_EXTENSION_HOOK__,
-        O.fromNullable,
-        TE.fromOption(() => "NO_PW_EXT_HOOK" as const),
-        TE.chain((extensionHook) =>
-          TE.tryCatch(
-            () =>
-              extensionHook.sendRequest({
-                ...processedReq,
-                wantsBinary: true,
-              }),
-            (err) => err as any
-          )
-        )
-      )
-    ),
-
-    // Inject backup time data if not present
-    TE.map(({ backupTimeDataStart, response }) => ({
-      ...response,
-      config: {
-        timeData: {
-          startTime: backupTimeDataStart,
-          endTime: new Date().getTime(),
-        },
-        ...response.config,
-      },
-    })),
-    TE.orElse((e) =>
-      e !== "cancellation" && e.response
-        ? TE.right(e.response as NetworkResponse)
-        : TE.left(e)
-    )
-  )
-
-export default extensionStrategy

packages/hoppscotch-common/src/helpers/strategies/__tests__/AxiosStrategy-NoProxy.spec.js

@@ -1,76 +0,0 @@
-import { vi, describe, expect, test } from "vitest"
-import axios from "axios"
-import axiosStrategy from "../AxiosStrategy"
-
-vi.mock("axios")
-vi.mock("~/newstore/settings", () => {
-  return {
-    __esModule: true,
-    settingsStore: {
-      value: {
-        PROXY_ENABLED: false,
-      },
-    },
-  }
-})
-
-axios.CancelToken.source.mockReturnValue({ token: "test" })
-axios.mockResolvedValue({})
-
-describe("axiosStrategy", () => {
-  describe("No-Proxy Requests", () => {
-    test("sends request to the actual sender if proxy disabled", async () => {
-      await axiosStrategy({ url: "test" })()
-
-      expect(axios).toBeCalledWith(
-        expect.objectContaining({
-          url: "test",
-        })
-      )
-    })
-
-    test("asks axios to return data as arraybuffer", async () => {
-      await axiosStrategy({ url: "test" })()
-
-      expect(axios).toBeCalledWith(
-        expect.objectContaining({
-          responseType: "arraybuffer",
-        })
-      )
-    })
-
-    test("resolves successful requests", async () => {
-      expect(await axiosStrategy({})()).toBeRight()
-    })
-
-    test("rejects cancel errors with text 'cancellation'", async () => {
-      axios.isCancel.mockReturnValueOnce(true)
-      axios.mockRejectedValue("err")
-
-      expect(await axiosStrategy({})()).toEqualLeft("cancellation")
-    })
-
-    test("rejects non-cancellation errors as-is", async () => {
-      axios.isCancel.mockReturnValueOnce(false)
-      axios.mockRejectedValue("err")
-
-      expect(await axiosStrategy({})()).toEqualLeft("err")
-    })
-
-    test("non-cancellation errors that have response data are right", async () => {
-      const errorResponse = { error: "errr" }
-      axios.isCancel.mockReturnValueOnce(false)
-      axios.mockRejectedValue({
-        response: {
-          data: Buffer.from(JSON.stringify(errorResponse), "utf8").toString(
-            "base64"
-          ),
-        },
-      })
-
-      expect(await axiosStrategy({})()).toSubsetEqualRight({
-        data: "eyJlcnJvciI6ImVycnIifQ==",
-      })
-    })
-  })
-})

packages/hoppscotch-common/src/helpers/strategies/__tests__/AxiosStrategy-Proxy.spec.js

@@ -1,145 +0,0 @@
-import { describe, test, expect, vi } from "vitest"
-import axios from "axios"
-import axiosStrategy from "../AxiosStrategy"
-
-vi.mock("../../utils/b64", () => ({
-  __esModule: true,
-  decodeB64StringToArrayBuffer: vi.fn((data) => `${data}-converted`),
-}))
-vi.mock("~/newstore/settings", () => {
-  return {
-    __esModule: true,
-    settingsStore: {
-      value: {
-        PROXY_ENABLED: true,
-        PROXY_URL: "test",
-      },
-    },
-  }
-})
-
-describe("axiosStrategy", () => {
-  describe("Proxy Requests", () => {
-    test("sends POST request to proxy if proxy is enabled", async () => {
-      let passedURL
-
-      vi.spyOn(axios, "post").mockImplementation((url) => {
-        passedURL = url
-        return Promise.resolve({ data: { success: true, isBinary: false } })
-      })
-
-      await axiosStrategy({})()
-
-      expect(passedURL).toEqual("test")
-    })
-
-    test("passes request fields to axios properly", async () => {
-      const reqFields = {
-        testA: "testA",
-        testB: "testB",
-        testC: "testC",
-      }
-
-      let passedFields
-
-      vi.spyOn(axios, "post").mockImplementation((_url, req) => {
-        passedFields = req
-        return Promise.resolve({ data: { success: true, isBinary: false } })
-      })
-
-      await axiosStrategy(reqFields)()
-
-      expect(passedFields).toMatchObject(reqFields)
-    })
-
-    test("passes wantsBinary field", async () => {
-      let passedFields
-
-      vi.spyOn(axios, "post").mockImplementation((_url, req) => {
-        passedFields = req
-        return Promise.resolve({ data: { success: true, isBinary: false } })
-      })
-
-      await axiosStrategy({})()
-
-      expect(passedFields).toHaveProperty("wantsBinary")
-    })
-
-    test("checks for proxy response success field and throws error message for non-success", async () => {
-      vi.spyOn(axios, "post").mockResolvedValue({
-        data: {
-          success: false,
-          data: {
-            message: "test message",
-          },
-        },
-      })
-
-      expect(await axiosStrategy({})()).toEqualLeft("test message")
-    })
-
-    test("checks for proxy response success field and throws error 'Proxy Error' for non-success", async () => {
-      vi.spyOn(axios, "post").mockResolvedValue({
-        data: {
-          success: false,
-          data: {},
-        },
-      })
-
-      expect(await axiosStrategy({})()).toBeLeft("Proxy Error")
-    })
-
-    test("checks for proxy response success and doesn't left for success", async () => {
-      vi.spyOn(axios, "post").mockResolvedValue({
-        data: {
-          success: true,
-          data: {},
-        },
-      })
-
-      expect(await axiosStrategy({})()).toBeRight()
-    })
-
-    test("checks isBinary response field and right with the converted value if so", async () => {
-      vi.spyOn(axios, "post").mockResolvedValue({
-        data: {
-          success: true,
-          isBinary: true,
-          data: "testdata",
-        },
-      })
-
-      expect(await axiosStrategy({})()).toSubsetEqualRight({
-        data: "testdata-converted",
-      })
-    })
-
-    test("checks isBinary response field and right with the actual value if not so", async () => {
-      vi.spyOn(axios, "post").mockResolvedValue({
-        data: {
-          success: true,
-          isBinary: false,
-          data: "testdata",
-        },
-      })
-
-      expect(await axiosStrategy({})()).toSubsetEqualRight({
-        data: "testdata",
-      })
-    })
-
-    test("cancel errors are returned a left with the string 'cancellation'", async () => {
-      vi.spyOn(axios, "post").mockRejectedValue("errr")
-      vi.spyOn(axios, "isCancel").mockReturnValueOnce(true)
-
-      expect(await axiosStrategy({})()).toEqualLeft("cancellation")
-    })
-
-    test("non-cancellation errors return a left", async () => {
-      vi.spyOn(axios, "post").mockRejectedValue("errr")
-      vi.spyOn(axios, "isCancel").mockReturnValueOnce(false)
-
-      expect(await axiosStrategy({})()).toEqualLeft("errr")
-    })
-  })
-})

packages/hoppscotch-common/src/helpers/strategies/__tests__/ExtensionStrategy-NoProxy.spec.js

@@ -1,212 +0,0 @@
-import { vi, describe, expect, test, beforeEach } from "vitest"
-import extensionStrategy, {
-  hasExtensionInstalled,
-  hasChromeExtensionInstalled,
-  hasFirefoxExtensionInstalled,
-  cancelRunningExtensionRequest,
-} from "../ExtensionStrategy"
-
-vi.mock("../../utils/b64", () => ({
-  __esModule: true,
-  decodeB64StringToArrayBuffer: vi.fn((data) => `${data}-converted`),
-}))
-
-vi.mock("~/newstore/settings", () => {
-  return {
-    __esModule: true,
-    settingsStore: {
-      value: {
-        EXTENSIONS_ENABLED: true,
-        PROXY_ENABLED: false,
-      },
-    },
-  }
-})
-
-describe("hasExtensionInstalled", () => {
-  test("returns true if extension is present and hooked", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = {}
-
-    expect(hasExtensionInstalled()).toEqual(true)
-  })
-
-  test("returns false if extension not present or not hooked", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
-
-    expect(hasExtensionInstalled()).toEqual(false)
-  })
-})
-
-describe("hasChromeExtensionInstalled", () => {
-  test("returns true if extension is hooked and browser is chrome", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = {}
-    vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
-    vi.spyOn(navigator, "vendor", "get").mockReturnValue("Google")
-
-    expect(hasChromeExtensionInstalled()).toEqual(true)
-  })
-
-  test("returns false if extension is hooked and browser is not chrome", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = {}
-    vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Firefox")
-    vi.spyOn(navigator, "vendor", "get").mockReturnValue("Google")
-
-    expect(hasChromeExtensionInstalled()).toEqual(false)
-  })
-
-  test("returns false if extension not installed and browser is chrome", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
-    vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
-    vi.spyOn(navigator, "vendor", "get").mockReturnValue("Google")
-
-    expect(hasChromeExtensionInstalled()).toEqual(false)
-  })
-
-  test("returns false if extension not installed and browser is not chrome", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
-    vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Firefox")
-    vi.spyOn(navigator, "vendor", "get").mockReturnValue("Google")
-
-    expect(hasChromeExtensionInstalled()).toEqual(false)
-  })
-})
-
-describe("hasFirefoxExtensionInstalled", () => {
-  test("returns true if extension is hooked and browser is firefox", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = {}
-    vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Firefox")
-
-    expect(hasFirefoxExtensionInstalled()).toEqual(true)
-  })
-
-  test("returns false if extension is hooked and browser is not firefox", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = {}
-    vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
-
-    expect(hasFirefoxExtensionInstalled()).toEqual(false)
-  })
-
-  test("returns false if extension not installed and browser is firefox", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
-    vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Firefox")
-
-    expect(hasFirefoxExtensionInstalled()).toEqual(false)
-  })
-
-  test("returns false if extension not installed and browser is not firefox", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
-    vi.spyOn(navigator, "userAgent", "get").mockReturnValue("Chrome")
-
-    expect(hasFirefoxExtensionInstalled()).toEqual(false)
-  })
-})
-
-describe("cancelRunningExtensionRequest", () => {
-  const cancelFunc = vi.fn()
-
-  beforeEach(() => {
-    cancelFunc.mockClear()
-  })
-
-  test("cancels request if extension installed and function present in hook", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = {
-      cancelRequest: cancelFunc,
-    }
-
-    cancelRunningExtensionRequest()
-    expect(cancelFunc).toHaveBeenCalledTimes(1)
-  })
-
-  test("does not cancel request if extension not installed", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = undefined
-
-    cancelRunningExtensionRequest()
-    expect(cancelFunc).not.toHaveBeenCalled()
-  })
-})
-
-describe("extensionStrategy", () => {
-  const sendReqFunc = vi.fn()
-
-  beforeEach(() => {
-    sendReqFunc.mockClear()
-  })
-
-  describe("Non-Proxy Requests", () => {
-    test("ask extension to send request", async () => {
-      global.__POSTWOMAN_EXTENSION_HOOK__ = {
-        sendRequest: sendReqFunc,
-      }
-
-      sendReqFunc.mockResolvedValue({
-        data: '{"success":true,"data":""}',
-      })
-
-      await extensionStrategy({})()
-
-      expect(sendReqFunc).toHaveBeenCalledTimes(1)
-    })
-
-    test("sends request to the actual sender if proxy disabled", async () => {
-      let passedUrl
-
-      global.__POSTWOMAN_EXTENSION_HOOK__ = {
-        sendRequest: sendReqFunc,
-      }
-
-      sendReqFunc.mockImplementation(({ url }) => {
-        passedUrl = url
-
-        return Promise.resolve({
-          data: '{"success":true,"data":""}',
-        })
-      })
-
-      await extensionStrategy({ url: "test" })()
-
-      expect(passedUrl).toEqual("test")
-    })
-
-    test("asks extension to get binary data", async () => {
-      let passedFields
-
-      global.__POSTWOMAN_EXTENSION_HOOK__ = {
-        sendRequest: sendReqFunc,
-      }
-
-      sendReqFunc.mockImplementation((fields) => {
-        passedFields = fields
-
-        return Promise.resolve({
-          data: '{"success":true,"data":""}',
-        })
-      })
-
-      await extensionStrategy({})()
-
-      expect(passedFields).toHaveProperty("wantsBinary")
-    })
-
-    test("rights successful requests", async () => {
-      global.__POSTWOMAN_EXTENSION_HOOK__ = {
-        sendRequest: sendReqFunc,
-      }
-
-      sendReqFunc.mockResolvedValue({
-        data: '{"success":true,"data":""}',
-      })
-
-      expect(await extensionStrategy({})()).toBeRight()
-    })
-
-    test("rejects errors as-is", async () => {
-      global.__POSTWOMAN_EXTENSION_HOOK__ = {
-        sendRequest: sendReqFunc,
-      }
-
-      sendReqFunc.mockRejectedValue("err")
-
-      expect(await extensionStrategy({})()).toEqualLeft("err")
-    })
-  })
-})

packages/hoppscotch-common/src/helpers/types/HoppRESTResponse.ts

@@ -19,7 +19,7 @@ export type HoppRESTResponse =
     }
   | {
       type: "network_fail"
-      error: Error
+      error: unknown
 
       req: HoppRESTRequest
     }

packages/hoppscotch-common/src/modules/hoppExtension.ts

@@ -1,58 +0,0 @@
-import { HoppModule } from "."
-import {
-  changeExtensionStatus,
-  ExtensionStatus,
-} from "~/newstore/HoppExtension"
-import { ref } from "vue"
-import { defineSubscribableObject } from "~/helpers/strategies/ExtensionStrategy"
-
-/* Module defining the hooking mechanism between Hoppscotch and the Hoppscotch Browser Extension */
-
-export default <HoppModule>{
-  onVueAppInit() {
-    const extensionPollIntervalId = ref<ReturnType<typeof setInterval>>()
-
-    if (window.__HOPP_EXTENSION_STATUS_PROXY__) {
-      changeExtensionStatus(window.__HOPP_EXTENSION_STATUS_PROXY__.status)
-
-      window.__HOPP_EXTENSION_STATUS_PROXY__.subscribe(
-        "status",
-        (status: ExtensionStatus) => changeExtensionStatus(status)
-      )
-    } else {
-      const statusProxy = defineSubscribableObject({
-        status: "waiting" as ExtensionStatus,
-      })
-
-      window.__HOPP_EXTENSION_STATUS_PROXY__ = statusProxy
-      statusProxy.subscribe("status", (status: ExtensionStatus) =>
-        changeExtensionStatus(status)
-      )
-
-      /**
-       * Keeping identifying extension backward compatible
-       * We are assuming the default version is 0.24 or later. So if the extension exists, its identified immediately,
-       * then we use a poll to find the version, this will get the version for 0.24 and any other version
-       * of the extension, but will have a slight lag.
-       * 0.24 users will get the benefits of 0.24, while the extension won't break for the old users
-       */
-      extensionPollIntervalId.value = setInterval(() => {
-        if (typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined") {
-          if (extensionPollIntervalId.value)
-            clearInterval(extensionPollIntervalId.value)
-
-          const version = window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
-
-          // When the version is not 0.24 or higher, the extension wont do this. so we have to do it manually
-          if (
-            version.major === 0 &&
-            version.minor <= 23 &&
-            window.__HOPP_EXTENSION_STATUS_PROXY__
-          ) {
-            window.__HOPP_EXTENSION_STATUS_PROXY__.status = "available"
-          }
-        }
-      }, 2000)
-    }
-  },
-}

packages/hoppscotch-common/src/modules/interceptors.ts

@@ -0,0 +1,46 @@
+import { InterceptorService } from "~/services/interceptor.service"
+import { HoppModule } from "."
+import { getService } from "./dioc"
+import { platform } from "~/platform"
+import { watch } from "vue"
+import { applySetting } from "~/newstore/settings"
+import { useSettingStatic } from "~/composables/settings"
+
+export default <HoppModule>{
+  onVueAppInit() {
+    const interceptorService = getService(InterceptorService)
+
+    for (const interceptorDef of platform.interceptors.interceptors) {
+      if (interceptorDef.type === "standalone") {
+        interceptorService.registerInterceptor(interceptorDef.interceptor)
+      } else {
+        const service = getService(interceptorDef.service)
+
+        interceptorService.registerInterceptor(service)
+      }
+    }
+
+    interceptorService.currentInterceptorID.value =
+      platform.interceptors.default
+
+    watch(interceptorService.currentInterceptorID, (id) => {
+      applySetting(
+        "CURRENT_INTERCEPTOR_ID",
+        id ?? platform.interceptors.default
+      )
+    })
+
+    const [setting] = useSettingStatic("CURRENT_INTERCEPTOR_ID")
+
+    watch(
+      setting,
+      () => {
+        interceptorService.currentInterceptorID.value =
+          setting.value ?? platform.interceptors.default
+      },
+      {
+        immediate: true,
+      }
+    )
+  },
+}

packages/hoppscotch-common/src/newstore/localpersistence.ts

@@ -9,10 +9,11 @@ import {
 import {
   settingsStore,
   bulkApplySettings,
-  defaultSettings,
+  getDefaultSettings,
   applySetting,
   HoppAccentColor,
   HoppBgColor,
+  performSettingsDataMigrations,
 } from "./settings"
 import {
   restHistoryStore,
@@ -80,7 +81,7 @@ function checkAndMigrateOldSettings() {
   const { postwoman } = vuexData
 
   if (!isEmpty(postwoman?.settings)) {
-    const settingsData = assign(clone(defaultSettings), postwoman.settings)
+    const settingsData = assign(clone(getDefaultSettings()), postwoman.settings)
 
     window.localStorage.setItem("settings", JSON.stringify(settingsData))
 
@@ -150,8 +151,12 @@ function setupSettingsPersistence() {
     window.localStorage.getItem("settings") || "{}"
   )
 
-  if (settingsData) {
+  const updatedSettings = settingsData
-    bulkApplySettings(settingsData)
+    ? performSettingsDataMigrations(settingsData)
+    : settingsData
+
+  if (updatedSettings) {
+    bulkApplySettings(updatedSettings)
   }
 
   settingsStore.subject$.subscribe((settings) => {

packages/hoppscotch-common/src/newstore/settings.ts

@@ -1,5 +1,5 @@
 import { pluck, distinctUntilChanged } from "rxjs/operators"
-import { has } from "lodash-es"
+import { cloneDeep, defaultsDeep, has } from "lodash-es"
 import { Observable } from "rxjs"
 
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
@@ -32,9 +32,10 @@ export type SettingsDef = {
   syncHistory: boolean
   syncEnvironments: boolean
 
-  PROXY_ENABLED: boolean
   PROXY_URL: string
-  EXTENSIONS_ENABLED: boolean
+
+  CURRENT_INTERCEPTOR_ID: string
+
   URL_EXCLUDES: {
     auth: boolean
     httpUser: boolean
@@ -53,14 +54,15 @@ export type SettingsDef = {
   COLUMN_LAYOUT: boolean
 }
 
-export const defaultSettings: SettingsDef = {
+export const getDefaultSettings = (): SettingsDef => ({
   syncCollections: true,
   syncHistory: true,
   syncEnvironments: true,
 
-  PROXY_ENABLED: false,
+  CURRENT_INTERCEPTOR_ID: "browser", // TODO: Allow the platform definition to take this place
+
+  // TODO: Interceptor related settings should move under the interceptor systems
   PROXY_URL: "https://proxy.hoppscotch.io/",
-  EXTENSIONS_ENABLED: false,
   URL_EXCLUDES: {
     auth: true,
     httpUser: true,
@@ -77,7 +79,7 @@ export const defaultSettings: SettingsDef = {
   ZEN_MODE: false,
   FONT_SIZE: "small",
   COLUMN_LAYOUT: true,
-}
+})
 
 type ApplySettingPayload = {
   [K in keyof SettingsDef]: {
@@ -86,8 +88,6 @@ type ApplySettingPayload = {
   }
 }[keyof SettingsDef]
 
-const validKeys = Object.keys(defaultSettings)
-
 const dispatchers = defineDispatchers({
   bulkApplySettings(_currentState: SettingsDef, payload: Partial<SettingsDef>) {
     return payload
@@ -112,13 +112,6 @@ const dispatchers = defineDispatchers({
     _currentState: SettingsDef,
     { settingKey, value }: ApplySettingPayload
   ) {
-    if (!validKeys.includes(settingKey)) {
-      // console.log(
-      //   `Ignoring non-existent setting key '${settingKey}' assignment`
-      // )
-      return {}
-    }
-
     const result: Partial<SettingsDef> = {
       [settingKey]: value,
     }
@@ -127,7 +120,10 @@ const dispatchers = defineDispatchers({
   },
 })
 
-export const settingsStore = new DispatchingStore(defaultSettings, dispatchers)
+export const settingsStore = new DispatchingStore(
+  getDefaultSettings(),
+  dispatchers
+)
 
 /**
  * An observable value to make avail all the state information at once
@@ -156,16 +152,39 @@ export function toggleSetting(settingKey: KeysMatching<SettingsDef, boolean>) {
   })
 }
 
-export function applySetting<K extends ApplySettingPayload>(
+export function applySetting<K extends keyof SettingsDef>(
-  settingKey: K["settingKey"],
+  settingKey: K,
-  value: K["value"]
+  value: SettingsDef[K]
 ) {
   settingsStore.dispatch({
     dispatcher: "applySetting",
-    // @ts-expect-error TS is not able to understand the type semantics here
     payload: {
+      // @ts-expect-error TS is not able to understand the type semantics here
       settingKey,
+      // @ts-expect-error TS is not able to understand the type semantics here
       value,
     },
   })
 }
+
+export function performSettingsDataMigrations(data: any): SettingsDef {
+  const source = cloneDeep(data)
+
+  if (source["EXTENSIONS_ENABLED"]) {
+    const result = JSON.parse(source["EXTENSIONS_ENABLED"])
+
+    if (result) source["CURRENT_INTERCEPTOR_ID"] = "extension"
+    delete source["EXTENSIONS_ENABLED"]
+  }
+
+  if (source["PROXY_ENABLED"]) {
+    const result = JSON.parse(source["PROXY_ENABLED"])
+
+    if (result) source["CURRENT_INTERCEPTOR_ID"] = "proxy"
+    delete source["PROXY_ENABLED"]
+  }
+
+  const final = defaultsDeep(source, getDefaultSettings())
+
+  return final
+}

packages/hoppscotch-common/src/pages/settings.vue

@@ -113,108 +113,11 @@
           </p>
         </div>
         <div class="p-8 space-y-8 md:col-span-2">
-          <section>
+          <section v-for="[id, settings] in interceptorsWithSettings" :key="id">
             <h4 class="font-semibold text-secondaryDark">
-              {{ t("settings.extensions") }}
+              {{ settings.entryTitle(t) }}
             </h4>
-            <div class="my-1 text-secondaryLight">
+            <component :is="settings.component" />
-              <span v-if="extensionVersion != null">
-                {{
-                  `${t("settings.extension_version")}: v${
-                    extensionVersion.major
-                  }.${extensionVersion.minor}`
-                }}
-              </span>
-              <span v-else>
-                {{ t("settings.extension_version") }}:
-                {{ t("settings.extension_ver_not_reported") }}
-              </span>
-            </div>
-            <div class="flex flex-col py-4 space-y-2">
-              <span>
-                <HoppSmartItem
-                  to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
-                  blank
-                  :icon="IconChrome"
-                  label="Chrome"
-                  :info-icon="hasChromeExtInstalled ? IconCheckCircle : null"
-                  :active-info-icon="hasChromeExtInstalled"
-                  outline
-                />
-              </span>
-              <span>
-                <HoppSmartItem
-                  to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-                  blank
-                  :icon="IconFirefox"
-                  label="Firefox"
-                  :info-icon="hasFirefoxExtInstalled ? IconCheckCircle : null"
-                  :active-info-icon="hasFirefoxExtInstalled"
-                  outline
-                />
-              </span>
-            </div>
-            <div class="py-4 space-y-4">
-              <div class="flex items-center">
-                <HoppSmartToggle
-                  :on="EXTENSIONS_ENABLED"
-                  @change="toggleInterceptor('extension')"
-                >
-                  {{ t("settings.extensions_use_toggle") }}
-                </HoppSmartToggle>
-              </div>
-            </div>
-          </section>
-          <section>
-            <h4 class="font-semibold text-secondaryDark">
-              {{ t("settings.proxy") }}
-            </h4>
-            <div class="my-1 text-secondaryLight">
-              {{
-                `${t("settings.official_proxy_hosting")} ${t(
-                  "settings.read_the"
-                )}`
-              }}
-              <HoppSmartAnchor
-                class="link"
-                to="https://docs.hoppscotch.io/support/privacy"
-                blank
-                :label="t('app.proxy_privacy_policy')"
-              />.
-            </div>
-            <div class="py-4 space-y-4">
-              <div class="flex items-center">
-                <HoppSmartToggle
-                  :on="PROXY_ENABLED"
-                  @change="toggleInterceptor('proxy')"
-                >
-                  {{ t("settings.proxy_use_toggle") }}
-                </HoppSmartToggle>
-              </div>
-            </div>
-            <div class="flex items-center py-4 space-x-2">
-              <HoppSmartInput
-                v-model="PROXY_URL"
-                styles="flex-1"
-                placeholder=" "
-                input-styles="input floating-input"
-                :disabled="!PROXY_ENABLED"
-              >
-                <template #label>
-                  <label for="url">
-                    {{ t("settings.proxy_url") }}
-                  </label>
-                </template>
-              </HoppSmartInput>
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t('settings.reset_default')"
-                :icon="clearIcon"
-                outline
-                class="rounded"
-                @click="resetProxy"
-              />
-            </div>
           </section>
         </div>
       </div>
@@ -236,62 +139,47 @@
 </template>
 
 <script setup lang="ts">
-import IconChrome from "~icons/brands/chrome"
-import IconCheckCircle from "~icons/lucide/check-circle"
-import IconFirefox from "~icons/brands/firefox"
-import IconRotateCCW from "~icons/lucide/rotate-ccw"
-import IconCheck from "~icons/lucide/check"
 import { ref, computed, watch } from "vue"
-import { refAutoReset } from "@vueuse/core"
 import { applySetting, toggleSetting } from "~/newstore/settings"
 import { useSetting } from "@composables/settings"
-import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
-import { useReadonlyStream } from "@composables/stream"
-
-import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent"
-import { extensionStatus$ } from "~/newstore/HoppExtension"
 import { usePageHead } from "@composables/head"
+import { useService } from "dioc/vue"
+import { InterceptorService } from "~/services/interceptor.service"
+import { pipe } from "fp-ts/function"
+import * as O from "fp-ts/Option"
+import * as A from "fp-ts/Array"
 
 const t = useI18n()
-const toast = useToast()
 const colorMode = useColorMode()
 
 usePageHead({
   title: computed(() => t("navigation.settings")),
 })
 
+const interceptorService = useService(InterceptorService)
+const interceptorsWithSettings = computed(() =>
+  pipe(
+    interceptorService.availableInterceptors.value,
+    A.filterMap((interceptor) =>
+      interceptor.settingsPageEntry
+        ? O.some([
+            interceptor.interceptorID,
+            interceptor.settingsPageEntry,
+          ] as const)
+        : O.none
+    )
+  )
+)
+
 const ACCENT_COLOR = useSetting("THEME_COLOR")
-const PROXY_ENABLED = useSetting("PROXY_ENABLED")
 const PROXY_URL = useSetting("PROXY_URL")
-const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
 const TELEMETRY_ENABLED = useSetting("TELEMETRY_ENABLED")
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
 const ZEN_MODE = useSetting("ZEN_MODE")
 
-const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
-
-const extensionVersion = computed(() => {
-  return currentExtensionStatus.value === "available"
-    ? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
-    : null
-})
-
-const hasChromeExtInstalled = computed(
-  () => browserIsChrome() && currentExtensionStatus.value === "available"
-)
-
-const hasFirefoxExtInstalled = computed(
-  () => browserIsFirefox() && currentExtensionStatus.value === "available"
-)
-
-const clearIcon = refAutoReset<typeof IconRotateCCW | typeof IconCheck>(
-  IconRotateCCW,
-  1000
-)
-
 const confirmRemove = ref(false)
 
 const proxySettings = computed(() => ({
@@ -310,34 +198,11 @@ watch(
   { deep: true }
 )
 
-// Extensions and proxy should not be enabled at the same time
-const toggleInterceptor = (interceptor: "extension" | "proxy") => {
-  if (interceptor === "extension") {
-    EXTENSIONS_ENABLED.value = !EXTENSIONS_ENABLED.value
-
-    if (EXTENSIONS_ENABLED.value) {
-      PROXY_ENABLED.value = false
-    }
-  } else {
-    PROXY_ENABLED.value = !PROXY_ENABLED.value
-
-    if (PROXY_ENABLED.value) {
-      EXTENSIONS_ENABLED.value = false
-    }
-  }
-}
-
 const showConfirmModal = () => {
   if (TELEMETRY_ENABLED.value) confirmRemove.value = true
   else toggleSetting("TELEMETRY_ENABLED")
 }
 
-const resetProxy = () => {
-  applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
-  clearIcon.value = IconCheck
-  toast.success(`${t("state.cleared")}`)
-}
-
 const getColorModeName = (colorMode: string) => {
   switch (colorMode) {
     case "system":

packages/hoppscotch-common/src/platform/analytics.ts

@@ -1,7 +1,7 @@
 export type HoppRequestEvent =
   | {
       platform: "rest" | "graphql-query" | "graphql-schema"
-      strategy: "normal" | "proxy" | "extension"
+      strategy: string
     }
   | { platform: "wss" | "sse" | "socketio" | "mqtt" }
 

packages/hoppscotch-common/src/platform/index.ts

@@ -6,6 +6,7 @@ import { SettingsPlatformDef } from "./settings"
 import { HistoryPlatformDef } from "./history"
 import { TabStatePlatformDef } from "./tab"
 import { AnalyticsPlatformDef } from "./analytics"
+import { InterceptorsPlatformDef } from "./interceptors"
 
 export type PlatformDef = {
   ui?: UIPlatformDef
@@ -18,6 +19,7 @@ export type PlatformDef = {
     history: HistoryPlatformDef
     tabState: TabStatePlatformDef
   }
+  interceptors: InterceptorsPlatformDef
   platformFeatureFlags: {
     exportAsGIST: boolean
   }

packages/hoppscotch-common/src/platform/interceptors.ts

@@ -0,0 +1,16 @@
+import { Service } from "dioc"
+import { Interceptor } from "~/services/interceptor.service"
+
+export type PlatformInterceptorDef =
+  | { type: "standalone"; interceptor: Interceptor }
+  | {
+      type: "service"
+      service: typeof Service<unknown> & { ID: string } & {
+        new (): Service & Interceptor
+      }
+    }
+
+export type InterceptorsPlatformDef = {
+  default: string
+  interceptors: PlatformInterceptorDef[]
+}

packages/hoppscotch-common/src/platform/std/interceptors/browser.ts

@@ -0,0 +1,106 @@
+import * as E from "fp-ts/Either"
+import {
+  Interceptor,
+  InterceptorError,
+  RequestRunResult,
+} from "../../../services/interceptor.service"
+import axios, { AxiosRequestConfig, CancelToken } from "axios"
+import { cloneDeep } from "lodash-es"
+
+export const preProcessRequest = (
+  req: AxiosRequestConfig
+): AxiosRequestConfig => {
+  const reqClone = cloneDeep(req)
+
+  // If the parameters are URLSearchParams, inject them to URL instead
+  // This prevents issues of marshalling the URLSearchParams to the proxy
+  if (reqClone.params instanceof URLSearchParams) {
+    try {
+      const url = new URL(reqClone.url ?? "")
+
+      for (const [key, value] of reqClone.params.entries()) {
+        url.searchParams.append(key, value)
+      }
+
+      reqClone.url = url.toString()
+    } catch (e) {
+      // making this a non-empty block, so we can make the linter happy.
+      // we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :)
+    }
+
+    reqClone.params = {}
+  }
+
+  return reqClone
+}
+
+async function runRequest(
+  req: AxiosRequestConfig,
+  cancelToken: CancelToken
+): RequestRunResult["response"] {
+  const timeStart = Date.now()
+
+  const processedReq = preProcessRequest(req)
+
+  try {
+    const res = await axios({
+      ...processedReq,
+      cancelToken,
+      responseType: "arraybuffer",
+    })
+
+    const timeEnd = Date.now()
+
+    return E.right({
+      ...res,
+      config: {
+        timeData: {
+          startTime: timeStart,
+          endTime: timeEnd,
+        },
+      },
+    })
+  } catch (e) {
+    const timeEnd = Date.now()
+
+    if (axios.isAxiosError(e) && e.response) {
+      return E.right({
+        ...e.response,
+        config: {
+          timeData: {
+            startTime: timeStart,
+            endTime: timeEnd,
+          },
+        },
+      })
+    } else if (axios.isCancel(e)) {
+      return E.left("cancellation")
+    } else {
+      return E.left(<InterceptorError>{
+        humanMessage: {
+          heading: (t) => t("error.network_fail"),
+          description: (t) => t("helpers.network_fail"),
+        },
+        error: e,
+      })
+    }
+  }
+}
+
+export const browserInterceptor: Interceptor = {
+  interceptorID: "browser",
+  name: (t) => t("state.none"),
+  selectable: { type: "selectable" },
+  runRequest(req) {
+    const cancelToken = axios.CancelToken.source()
+
+    const processedReq = preProcessRequest(req)
+
+    const promise = runRequest(processedReq, cancelToken.token)
+
+    return {
+      cancel: () => cancelToken.cancel(),
+      response: promise,
+    }
+  },
+}

packages/hoppscotch-common/src/platform/std/interceptors/extension.ts

@@ -0,0 +1,252 @@
+import * as E from "fp-ts/Either"
+import { AxiosRequestConfig } from "axios"
+import { Service } from "dioc"
+import { getI18n } from "~/modules/i18n"
+import {
+  Interceptor,
+  InterceptorError,
+  RequestRunResult,
+} from "~/services/interceptor.service"
+import { cloneDeep } from "lodash-es"
+import { computed, readonly, ref } from "vue"
+import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent"
+import SettingsExtension from "~/components/settings/Extension.vue"
+import InterceptorsExtensionSubtitle from "~/components/interceptors/ExtensionSubtitle.vue"
+
+export const defineSubscribableObject = <T extends object>(obj: T) => {
+  const proxyObject = {
+    ...obj,
+    _subscribers: {} as {
+      // eslint-disable-next-line no-unused-vars
+      [key in keyof T]?: ((...args: any[]) => any)[]
+    },
+    subscribe(prop: keyof T, func: (...args: any[]) => any): void {
+      if (Array.isArray(this._subscribers[prop])) {
+        this._subscribers[prop]?.push(func)
+      } else {
+        this._subscribers[prop] = [func]
+      }
+    },
+  }
+
+  type SubscribableProxyObject = typeof proxyObject
+
+  return new Proxy(proxyObject, {
+    set(obj, prop, newVal) {
+      obj[prop as keyof SubscribableProxyObject] = newVal
+
+      const currentSubscribers = obj._subscribers[prop as keyof T]
+
+      if (Array.isArray(currentSubscribers)) {
+        for (const subscriber of currentSubscribers) {
+          subscriber(newVal)
+        }
+      }
+
+      return true
+    },
+  })
+}
+
+// TODO: Rework this to deal with individual requests rather than cancel all
+export const cancelRunningExtensionRequest = () => {
+  window.__POSTWOMAN_EXTENSION_HOOK__?.cancelRequest()
+}
+
+const preProcessRequest = (req: AxiosRequestConfig): AxiosRequestConfig => {
+  const reqClone = cloneDeep(req)
+
+  // If the parameters are URLSearchParams, inject them to URL instead
+  // This prevents marshalling issues with structured cloning of URLSearchParams
+  if (reqClone.params instanceof URLSearchParams) {
+    try {
+      const url = new URL(reqClone.url ?? "")
+
+      for (const [key, value] of reqClone.params.entries()) {
+        url.searchParams.append(key, value)
+      }
+
+      reqClone.url = url.toString()
+    } catch (e) {
+      // making this a non-empty block, so we can make the linter happy.
+      // we should probably use, allowEmptyCatch, or take the time to do something with the caught errors :)
+    }
+
+    reqClone.params = {}
+  }
+
+  return reqClone
+}
+
+export type ExtensionStatus = "available" | "unknown-origin" | "waiting"
+
+/**
+ * This service is responsible for defining the extension interceptor.
+ */
+export class ExtensionInterceptorService
+  extends Service
+  implements Interceptor
+{
+  public static readonly ID = "EXTENSION_INTERCEPTOR_SERVICE"
+
+  private _extensionStatus = ref<ExtensionStatus>("waiting")
+
+  /**
+   * The status of the extension, whether it's available, or not.
+   */
+  public extensionStatus = readonly(this._extensionStatus)
+
+  /**
+   * The version of the extension, if available.
+   */
+  public extensionVersion = computed(() => {
+    if (this.extensionStatus.value === "available") {
+      return window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion()
+    } else {
+      return null
+    }
+  })
+
+  /**
+   * Whether the extension is installed in Chrome or not.
+   */
+  public chromeExtensionInstalled = computed(
+    () => this.extensionStatus.value === "available" && browserIsChrome()
+  )
+
+  /**
+   * Whether the extension is installed in Firefox or not.
+   */
+  public firefoxExtensionInstalled = computed(
+    () => this.extensionStatus.value === "available" && browserIsFirefox()
+  )
+
+  public interceptorID = "extension"
+
+  public settingsPageEntry: Interceptor["settingsPageEntry"] = {
+    entryTitle: (t) => t("settings.extensions"),
+    component: SettingsExtension,
+  }
+
+  public selectorSubtitle = InterceptorsExtensionSubtitle
+
+  public selectable = { type: "selectable" as const }
+
+  constructor() {
+    super()
+
+    this.listenForExtensionStatus()
+  }
+
+  private listenForExtensionStatus() {
+    const extensionPollIntervalId = ref<ReturnType<typeof setInterval>>()
+
+    if (window.__HOPP_EXTENSION_STATUS_PROXY__) {
+      this._extensionStatus.value =
+        window.__HOPP_EXTENSION_STATUS_PROXY__.status
+
+      window.__HOPP_EXTENSION_STATUS_PROXY__.subscribe(
+        "status",
+        (status: ExtensionStatus) => {
+          this._extensionStatus.value = status
+        }
+      )
+    } else {
+      const statusProxy = defineSubscribableObject({
+        status: "waiting" as ExtensionStatus,
+      })
+
+      window.__HOPP_EXTENSION_STATUS_PROXY__ = statusProxy
+      statusProxy.subscribe(
+        "status",
+        (status: ExtensionStatus) => (this._extensionStatus.value = status)
+      )
+
+      /**
+       * Keeping identifying extension backward compatible
+       * We are assuming the default version is 0.24 or later. So if the extension exists, its identified immediately,
+       * then we use a poll to find the version, this will get the version for 0.24 and any other version
+       * of the extension, but will have a slight lag.
+       * 0.24 users will get the benefits of 0.24, while the extension won't break for the old users
+       */
+      extensionPollIntervalId.value = setInterval(() => {
+        if (typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined") {
+          if (extensionPollIntervalId.value)
+            clearInterval(extensionPollIntervalId.value)
+
+          const version = window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
+
+          // When the version is not 0.24 or higher, the extension wont do this. so we have to do it manually
+          if (
+            version.major === 0 &&
+            version.minor <= 23 &&
+            window.__HOPP_EXTENSION_STATUS_PROXY__
+          ) {
+            window.__HOPP_EXTENSION_STATUS_PROXY__.status = "available"
+          }
+        }
+      }, 2000)
+    }
+  }
+
+  public name(t: ReturnType<typeof getI18n>) {
+    return computed(() => {
+      const version = window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion()
+
+      if (this.extensionStatus.value === "available" && version) {
+        const { major, minor } = version
+        return `${t("settings.extensions")}: v${major}.${minor}`
+      } else {
+        return `${t("settings.extensions")}: ${t(
+          "settings.extension_ver_not_reported"
+        )}`
+      }
+    })
+  }
+
+  private async runRequestOnExtension(
+    req: AxiosRequestConfig
+  ): RequestRunResult["response"] {
+    const extensionHook = window.__POSTWOMAN_EXTENSION_HOOK__
+
+    if (!extensionHook) {
+      return E.left(<InterceptorError>{
+        // TODO: i18n this
+        humanMessage: {
+          heading: () => "Extension not found",
+          description: () => "Heading not found",
+        },
+        error: "NO_PW_EXT_HOOK",
+      })
+    }
+
+    try {
+      const result = await extensionHook.sendRequest({
+        ...req,
+        wantsBinary: true,
+      })
+
+      return E.right(result)
+    } catch (e) {
+      return E.left(<InterceptorError>{
+        // TODO: i18n this
+        humanMessage: {
+          heading: () => "Extension error",
+          description: () => "Failed running request on extension",
+        },
+        error: e,
+      })
+    }
+  }
+
+  public runRequest(
+    request: AxiosRequestConfig
+  ): RequestRunResult<InterceptorError> {
+    const processedReq = preProcessRequest(request)
+
+    return {
+      cancel: cancelRunningExtensionRequest,
+      response: this.runRequestOnExtension(processedReq),
+    }
+  }
+}

packages/hoppscotch-common/src/platform/std/interceptors/proxy.ts

@@ -0,0 +1,115 @@
+import { Interceptor, RequestRunResult } from "~/services/interceptor.service"
+import { AxiosRequestConfig, CancelToken } from "axios"
+import * as E from "fp-ts/Either"
+import { preProcessRequest } from "./browser"
+import { v4 } from "uuid"
+import axios from "axios"
+import { settingsStore } from "~/newstore/settings"
+import { decodeB64StringToArrayBuffer } from "~/helpers/utils/b64"
+import SettingsProxy from "~/components/settings/Proxy.vue"
+
+type ProxyHeaders = {
+  "multipart-part-key"?: string
+}
+
+type ProxyPayloadType =
+  | FormData
+  | (AxiosRequestConfig & { wantsBinary: true; accessToken: string })
+
+const getProxyPayload = (
+  req: AxiosRequestConfig,
+  multipartKey: string | null
+) => {
+  let payload: ProxyPayloadType = {
+    ...req,
+    wantsBinary: true,
+    accessToken: import.meta.env.VITE_PROXYSCOTCH_ACCESS_TOKEN ?? "",
+  }
+
+  if (payload.data instanceof FormData) {
+    const formData = payload.data
+    payload.data = ""
+    formData.append(multipartKey!, JSON.stringify(payload))
+    payload = formData
+  }
+
+  return payload
+}
+
+async function runRequest(
+  req: AxiosRequestConfig,
+  cancelToken: CancelToken
+): RequestRunResult["response"] {
+  const multipartKey =
+    req.data instanceof FormData ? `proxyRequestData-${v4()}` : null
+
+  const headers =
+    req.data instanceof FormData
+      ? <ProxyHeaders>{
+          "multipart-part-key": multipartKey,
+        }
+      : <ProxyHeaders>{}
+
+  const payload = getProxyPayload(req, multipartKey)
+
+  try {
+    // TODO: Validation for the proxy result
+    const { data } = await axios.post(
+      settingsStore.value.PROXY_URL ?? "https://proxy.hoppscotch.io",
+      payload,
+      {
+        headers,
+        cancelToken,
+      }
+    )
+
+    if (!data.success) {
+      return E.left({
+        humanMessage: {
+          heading: (t) => t("error.network_fail"),
+          description: (t) => data.data?.message ?? t("error.proxy_error"),
+        },
+      })
+    }
+
+    if (data.isBinary) {
+      data.data = decodeB64StringToArrayBuffer(data.data)
+    }
+
+    return E.right(data)
+  } catch (e) {
+    if (axios.isCancel(e)) {
+      return E.left("cancellation")
+    } else {
+      return E.left({
+        humanMessage: {
+          heading: (t) => t("error.network_fail"),
+          description: (t) => t("helpers.network_fail"),
+        },
+        error: e,
+      })
+    }
+  }
+}
+
+export const proxyInterceptor: Interceptor = {
+  interceptorID: "proxy",
+  name: (t) => t("settings.proxy"),
+  selectable: { type: "selectable" },
+  settingsPageEntry: {
+    entryTitle: (t) => t("settings.proxy"),
+    component: SettingsProxy,
+  },
+  runRequest(req) {
+    const cancelToken = axios.CancelToken.source()
+
+    const processedReq = preProcessRequest(req)
+
+    const promise = runRequest(processedReq, cancelToken.token)
+
+    return {
+      cancel: () => cancelToken.cancel(),
+      response: promise,
+    }
+  },
+}

packages/hoppscotch-common/src/services/__tests__/interceptor.service.spec.ts

@@ -0,0 +1,143 @@
+import { describe, expect, it, vi } from "vitest"
+import { Interceptor, InterceptorService } from "../interceptor.service"
+import { TestContainer } from "dioc/testing"
+
+describe("InterceptorService", () => {
+  it("initally there are no interceptors defined", () => {
+    const container = new TestContainer()
+
+    const service = container.bind(InterceptorService)
+
+    expect(service.availableInterceptors.value).toEqual([])
+  })
+
+  it("currentInterceptorID should be null if no interceptors are defined", () => {
+    const container = new TestContainer()
+
+    const service = container.bind(InterceptorService)
+
+    expect(service.currentInterceptorID.value).toBeNull()
+  })
+
+  it("currentInterceptorID should be set if there is an interceptor defined", () => {
+    const container = new TestContainer()
+
+    const service = container.bind(InterceptorService)
+
+    service.registerInterceptor({
+      interceptorID: "test",
+      name: () => "Test Interceptor",
+      selectable: { type: "selectable" },
+      runRequest: () => {
+        throw new Error("Not implemented")
+      },
+    })
+
+    expect(service.currentInterceptorID.value).toEqual("test")
+  })
+
+  it("currentInterceptorID cannot be set to null if there are interceptors defined", () => {
+    const container = new TestContainer()
+
+    const service = container.bind(InterceptorService)
+
+    service.registerInterceptor({
+      interceptorID: "test",
+      name: () => "Test Interceptor",
+      selectable: { type: "selectable" },
+      runRequest: () => {
+        throw new Error("Not implemented")
+      },
+    })
+
+    service.currentInterceptorID.value = null
+    expect(service.currentInterceptorID.value).not.toBeNull()
+  })
+
+  it("currentInterceptorID cannot be set to an unknown interceptor ID", () => {
+    const container = new TestContainer()
+
+    const service = container.bind(InterceptorService)
+
+    service.registerInterceptor({
+      interceptorID: "test",
+      name: () => "Test Interceptor",
+      selectable: { type: "selectable" },
+      runRequest: () => {
+        throw new Error("Not implemented")
+      },
+    })
+
+    service.currentInterceptorID.value = "unknown"
+    expect(service.currentInterceptorID.value).not.toEqual("unknown")
+  })
+
+  describe("registerInterceptor", () => {
+    it("should register the interceptor", () => {
+      const container = new TestContainer()
+
+      const service = container.bind(InterceptorService)
+
+      const interceptor: Interceptor = {
+        interceptorID: "test",
+        name: () => "Test Interceptor",
+        selectable: { type: "selectable" },
+        runRequest: () => {
+          throw new Error("Not implemented")
+        },
+      }
+
+      service.registerInterceptor(interceptor)
+
+      expect(service.availableInterceptors.value).toEqual([interceptor])
+    })
+
+    it("should set the current interceptor ID to non-null after the intiial registration", () => {
+      const container = new TestContainer()
+
+      const service = container.bind(InterceptorService)
+
+      const interceptor: Interceptor = {
+        interceptorID: "test",
+        name: () => "Test Interceptor",
+        selectable: { type: "selectable" },
+        runRequest: () => {
+          throw new Error("Not implemented")
+        },
+      }
+
+      service.registerInterceptor(interceptor)
+
+      expect(service.currentInterceptorID.value).not.toBeNull()
+    })
+  })
+
+  describe("runRequest", () => {
+    it("should throw an error if no interceptor is selected", () => {
+      const container = new TestContainer()
+
+      const service = container.bind(InterceptorService)
+
+      expect(() => service.runRequest({})).toThrowError()
+    })
+
+    it("asks the current interceptor to run the request", () => {
+      const container = new TestContainer()
+
+      const service = container.bind(InterceptorService)
+
+      const interceptor: Interceptor = {
+        interceptorID: "test",
+        name: () => "Test Interceptor",
+        selectable: { type: "selectable" },
+        runRequest: vi.fn(),
+      }
+
+      service.registerInterceptor(interceptor)
+
+      service.runRequest({})
+
+      expect(interceptor.runRequest).toHaveBeenCalled()
+    })
+  })
+})

packages/hoppscotch-common/src/services/interceptor.service.ts

@@ -0,0 +1,218 @@
+import * as E from "fp-ts/Either"
+import { Service } from "dioc"
+import { MaybeRef, refWithControl } from "@vueuse/core"
+import { AxiosRequestConfig, AxiosResponse } from "axios"
+import type { getI18n } from "~/modules/i18n"
+import { throwError } from "~/helpers/functional/error"
+import { Component, Ref, computed, reactive, watch, unref, markRaw } from "vue"
+
+/**
+ * Defines the response data from an interceptor request run.
+ */
+export type NetworkResponse = AxiosResponse<unknown> & {
+  config?: {
+    timeData?: {
+      startTime: number
+      endTime: number
+    }
+  }
+}
+
+/**
+ * Defines the errors that can occur during interceptor request run.
+ */
+export type InterceptorError =
+  | "cancellation"
+  | {
+      humanMessage: {
+        heading: (t: ReturnType<typeof getI18n>) => string
+        description: (t: ReturnType<typeof getI18n>) => string
+      }
+      error?: unknown
+    }
+
+/**
+ * Defines the result of an interceptor request run.
+ */
+export type RequestRunResult<Err extends InterceptorError = InterceptorError> =
+  {
+    /**
+     * Cancels the interceptor request run.
+     */
+    cancel: () => void
+
+    /**
+     * Promise that resolves when the interceptor request run is finished.
+     */
+    response: Promise<E.Either<Err, NetworkResponse>>
+  }
+
+/**
+ * Defines whether an interceptor is selectable or not
+ */
+export type InterceptorSelectableStatus<CustomComponentProps = any> =
+  | { type: "selectable" }
+  | {
+      type: "unselectable"
+      reason:
+        | {
+            type: "text"
+            text: (t: ReturnType<typeof getI18n>) => string
+            action?: {
+              text: (t: ReturnType<typeof getI18n>) => string
+              onActionClick: () => void
+            }
+          }
+        | {
+            type: "custom"
+            component: Component<CustomComponentProps>
+            props: CustomComponentProps
+          }
+    }
+
+/**
+ * An interceptor is an object that defines how to run a Hoppscotch request.
+ */
+export type Interceptor<Err extends InterceptorError = InterceptorError> = {
+  /**
+   * The ID of the interceptor. This should be unique across all registered interceptors.
+   */
+  interceptorID: string
+
+  /**
+   * The function that returns the name of the interceptor.
+   * @param t The i18n function.
+   */
+  name: (t: ReturnType<typeof getI18n>) => MaybeRef<string>
+
+  /**
+   * Defines what to render in the Interceptor section of the Settings page.
+   * Use this space to define interceptor specific settings.
+   * Not setting this will lead to nothing being rendered about this interceptor in the settings page.
+   */
+  settingsPageEntry?: {
+    /**
+     * The title of the interceptor entry in the settings page.
+     */
+    entryTitle: (t: ReturnType<typeof getI18n>) => string
+
+    /**
+     * The component to render in the settings page.
+     */
+    component: Component
+  }
+
+  /**
+   * Defines what to render under the entry for the interceptor in the Interceptor selector.
+   */
+  selectorSubtitle?: Component
+
+  /**
+   * Defines whether the interceptor is selectable or not.
+   */
+  selectable: MaybeRef<InterceptorSelectableStatus<unknown>>
+
+  /**
+   * Runs the interceptor on the given request.
+   * NOTE: Make sure this function doesn't throw, instead when an error occurs, return a Left Either with the error.
+   * @param request The request to run the interceptor on.
+   */
+  runRequest: (request: AxiosRequestConfig) => RequestRunResult<Err>
+}
+
+/**
+ * This service deals with the registration and execution of
+ * interceptors for request execution.
+ */
+export class InterceptorService extends Service {
+  public static readonly ID = "INTERCEPTOR_SERVICE"
+
+  private interceptors: Map<string, Interceptor> = reactive(new Map())
+
+  /**
+   * The ID of the currently selected interceptor.
+   * If `null`, there are no interceptors registered or none can be selected.
+   */
+  public currentInterceptorID: Ref<string | null> = refWithControl(
+    null as string | null,
+    {
+      onBeforeChange: (value) => {
+        if (!value) {
+          // Only allow `null` if there are no interceptors
+          return this.availableInterceptors.value.length === 0
+        }
+
+        if (value && !this.interceptors.has(value)) {
+          console.warn(
+            "Attempt to set current interceptor ID to unknown ID is ignored"
+          )
+          return false
+        }
+
+        return true
+      },
+    }
+  )
+
+  /**
+   * List of interceptors that are registered with the service.
+   */
+  public availableInterceptors = computed(() =>
+    Array.from(this.interceptors.values())
+  )
+
+  constructor() {
+    super()
+
+    // If the current interceptor is unselectable, select the first selectable one, else null
+    watch([() => this.interceptors, this.currentInterceptorID], () => {
+      if (!this.currentInterceptorID.value) return
+
+      const interceptor = this.interceptors.get(this.currentInterceptorID.value)
+
+      if (!interceptor) {
+        this.currentInterceptorID.value = null
+        return
+      }
+
+      if (unref(interceptor.selectable).type === "unselectable") {
+        this.currentInterceptorID.value =
+          this.availableInterceptors.value.filter(
+            (interceptor) => unref(interceptor.selectable).type === "selectable"
+          )[0]?.interceptorID ?? null
+      }
+    })
+  }
+
+  /**
+   * Register an interceptor with the service.
+   * @param interceptor The interceptor to register
+   */
+  public registerInterceptor(interceptor: Interceptor) {
+    // markRaw so that interceptor state by itself is not fully marked reactive
+    this.interceptors.set(interceptor.interceptorID, markRaw(interceptor))
+
+    if (this.currentInterceptorID.value === null) {
+      this.currentInterceptorID.value = interceptor.interceptorID
+    }
+  }
+
+  /**
+   * Runs a request through the currently selected interceptor.
+   * @param req The request to run
+   * @throws If no interceptor is selected
+   */
+  public runRequest(req: AxiosRequestConfig): RequestRunResult {
+    if (!this.currentInterceptorID.value) {
+      throw new Error("No interceptor selected")
+    }
+
+    const interceptor =
+      this.interceptors.get(this.currentInterceptorID.value) ??
+      throwError(
+        "Current Interceptor ID is not found in the list of registered interceptors"
+      )
+
+    return interceptor.runRequest(req)
+  }
+}

packages/hoppscotch-selfhost-web/src/main.ts

@@ -5,6 +5,9 @@ import { def as collectionsDef } from "./platform/collections/collections.platfo
 import { def as settingsDef } from "./platform/settings/settings.platform"
 import { def as historyDef } from "./platform/history/history.platform"
 import { def as tabStateDef } from "./platform/tabState/tabState.platform"
+import { browserInterceptor } from "@hoppscotch/common/platform/std/interceptors/browser"
+import { proxyInterceptor } from "@hoppscotch/common/platform/std/interceptors/proxy"
+import { ExtensionInterceptorService } from "@hoppscotch/common/platform/std/interceptors/extension"
 
 createHoppApp("#app", {
   auth: authDef,
@@ -15,6 +18,14 @@ createHoppApp("#app", {
     history: historyDef,
     tabState: tabStateDef,
   },
+  interceptors: {
+    default: "browser",
+    interceptors: [
+      { type: "standalone", interceptor: browserInterceptor },
+      { type: "standalone", interceptor: proxyInterceptor },
+      { type: "service", service: ExtensionInterceptorService },
+    ],
+  },
   platformFeatureFlags: {
     exportAsGIST: false,
   },

packages/hoppscotch-selfhost-web/src/platform/settings/settings.platform.ts

@@ -10,7 +10,7 @@ import * as E from "fp-ts/Either"
 import { runGQLSubscription } from "@hoppscotch/common/helpers/backend/GQLClient"
 import {
   bulkApplySettings,
-  defaultSettings,
+  getDefaultSettings,
 } from "@hoppscotch/common/newstore/settings"
 import { runDispatchWithOutSyncing } from "@lib/sync"
 
@@ -47,7 +47,7 @@ async function loadUserSettings() {
   // create user settings if it doesn't exist
   E.isLeft(res) &&
     res.left.error == "user_settings/not_found" &&
-    (await createUserSettings(JSON.stringify(defaultSettings)))
+    (await createUserSettings(JSON.stringify(getDefaultSettings())))
 
   if (E.isRight(res)) {
     runDispatchWithOutSyncing(() => {