docs: firefox addon installation guide

Author: webfansplz

docs/guide/browser-extension.md

@@ -1,11 +1,11 @@
 # Browser Extension
 
+## Chrome
+
 :::tip Compatibility Note
 The v7 version of devtools only supports Vue3. If your application is still using Vue2, please install the [v6 version](https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp?utm_source=ext_sidebar?utm_source=ext_sidebar). If you're still using v5 version, you can install it [here](https://chromewebstore.google.com/detail/vuejs-devtools-v5/hkddcnbhifppgmfgflgaelippbigjpjo).
 :::
 
-## Chrome
-
 Remove or disable any existing versions and install the extension from [here](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=ext_sidebar).
 
  <div
@@ -24,6 +24,30 @@ Remove or disable any existing versions and install the extension from [here](ht
   </a>
 </div>
 
+## Firefox
+
+:::tip Compatibility Note
+The v7 version of devtools only supports Vue3. If your application is still using Vue2, please install the [v6 version](https://addons.mozilla.org/addon/vue-js-devtools-v6-legacy).
+:::
+
+Remove or disable any existing versions and install the extension from [here](https://addons.mozilla.org/addon/vue-js-devtools).
+
+ <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://addons.mozilla.org/addon/vue-js-devtools"
+    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/firefox-logo.svg" alt="Firefox Extension" class="mx-2 h-10">
+    <p class="group-hover:text-$vp-c-brand-1">
+      Install on Firefox
+    </p>
+  </a>
+</div>
+
 ## Edge (Arc/Brave)
 
 ...and other Chromium-based browsers.