feat: extension identification improvements (#2332)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/layouts/default.vue

@@ -64,6 +64,8 @@ import {
   useRouter,
   watch,
   ref,
+  onMounted,
+  onBeforeUnmount,
 } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
@@ -77,6 +79,12 @@ import { hookKeybindingsListener } from "~/helpers/keybindings"
 import { defineActionHandler } from "~/helpers/actions"
 import { useSentry } from "~/helpers/sentry"
 import { useColorMode } from "~/helpers/utils/composables"
+import {
+  changeExtensionStatus,
+  ExtensionStatus,
+} from "~/newstore/HoppExtension"
+
+import { defineSubscribableObject } from "~/helpers/strategies/ExtensionStrategy"
 
 function appLayout() {
   const rightSidebar = useSetting("SIDEBAR")
@@ -202,6 +210,62 @@ function defineJumpActions() {
   })
 }
 
+function setupExtensionHooks() {
+  const extensionPollIntervalId = ref<ReturnType<typeof setInterval>>()
+
+  onMounted(() => {
+    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)
+    }
+  })
+
+  // Cleanup timer
+  onBeforeUnmount(() => {
+    if (extensionPollIntervalId.value) {
+      clearInterval(extensionPollIntervalId.value)
+    }
+  })
+}
+
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
@@ -229,6 +293,8 @@ export default defineComponent({
       showSupport.value = !showSupport.value
     })
 
+    setupExtensionHooks()
+
     return {
       mdAndLarger,
       spacerClass,