docs: update browser extension usage

Author: webfansplz

docs/guide/browser-extension.md

@@ -1,7 +1,29 @@
 # Browser Extension
 
-:::tip ⚠️
+:::tip Compatibility Note
+The v7 version of detools only supports Vue3. If your application is still using Vue2, please install the [v6 version](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN&utm_source=ext_sidebar).
+:::
 
-This feature is still under development.
+## Chrome
 
-:::
+The extension is in beta, remove or disable any existing versions and install the extension from [here](https://chromewebstore.google.com/detail/vuejs-devtools-beta/ljjemllljcmogpfapbkkighbhhppjdbg?hl=zh-CN&utm_source=ext_sidebar).
+
+ <div
+  class="w-83 group cursor-pointer list-none rounded pr-5 hover:b-$vp-c-brand-1"
+  border="~ solid base" flex="~ flex-row items-center"
+>
+  <a
+    href="https://chromewebstore.google.com/detail/vuejs-devtools-beta/ljjemllljcmogpfapbkkighbhhppjdbg?hl=zh-CN&utm_source=ext_sidebar"
+    class="group text-! h-full w-full flex cursor-pointer list-none items-center rounded pr-5 hover:b-$vp-c-brand-1 text-$vp-c-text-1! decoration-none!"
+    target="_blank"
+  >
+    <img src="/features/chrome-logo.svg" alt="Chrome Extension" class="mx-2 h-10">
+    <p class="group-hover:text-$vp-c-brand-1">
+      Install Beta version on Chrome
+    </p>
+  </a>
+</div>
+
+## Firefox
+
+We'll launch on the Firefox App Store once v7.0 is stable.