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

<template>
  <div class="flex flex-col p-4 space-y-4">
    <div class="flex flex-col">
      <h2 class="inline-flex pb-1 font-semibold text-secondaryDark">
        {{ t("settings.interceptor") }}
      </h2>
      <p class="inline-flex text-tiny">
        {{ t("settings.interceptor_description") }}
      </p>
    </div>
    <SmartRadioGroup v-model="interceptorSelection" :radios="interceptors" />
    <div
      v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
      class="flex space-x-2"
    >
      <ButtonSecondary
        to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
        blank
        svg="brands/chrome"
        label="Chrome"
        outline
        class="!flex-1"
      />
      <ButtonSecondary
        to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
        blank
        svg="brands/firefox"
        label="Firefox"
        outline
        class="!flex-1"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "@nuxtjs/composition-api"
import { applySetting, toggleSetting, useSetting } from "~/newstore/settings"
import { useI18n, useReadonlyStream } from "~/helpers/utils/composables"
import { extensionStatus$ } from "~/newstore/HoppExtension"

const t = useI18n()

const PROXY_ENABLED = useSetting("PROXY_ENABLED")
const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")

const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)

const extensionVersion = computed(() => {
  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>