Update docs for firefox browser extension (#581)

docs/browser-extensions/chrome/build-from-source.md

@@ -34,7 +34,7 @@ npm install
 
 4. Build the extension:
 ```bash
-npm run build
+npm run build:chrome
 ```
 
 ## Installing in Google Chrome

docs/browser-extensions/firefox/build-from-source.md

@@ -0,0 +1,50 @@
+---
+layout: default
+title: Build from Source
+parent: Firefox
+grand_parent: Browser Extensions
+nav_order: 2
+---
+
+# Building Firefox Extension from Source
+
+This guide explains how to build and install the AliasVault Firefox extension from source code.
+
+## Prerequisites
+
+- Node.js installed on your computer
+- Git to clone the repository (optional)
+
+## Building the Firefox Extension
+
+1. Clone the repository:
+```bash
+git clone https://github.com/lanedirt/AliasVault.git
+```
+
+2. Navigate to the Browser Extension directory:
+```bash
+cd AliasVault/browser-extension
+```
+
+3. Install the required dependencies:
+```bash
+npm install
+```
+
+4. Build the extension:
+```bash
+npm run build:firefox
+```
+
+## Installing in Firefox
+
+1. Open Firefox and go to `about:debugging`
+2. Click "This Firefox"
+3. Click "Load Temporary Add-on"
+4. Navigate to and select the file `browser-extension/dist/firefox-mv2/manifest.json`
+5. The AliasVault extension should now appear in your extensions list
+
+## Development Mode (Optional)
+
+If you plan to modify the extension code, see the [browser-extensions](../../misc/dev/browser-extensions.md) developer documentation for more information.

docs/browser-extensions/firefox/index.md

@@ -0,0 +1,19 @@
+---
+layout: default
+title: Firefox
+parent: Browser Extensions
+nav_order: 1
+---
+
+# Firefox Extension
+In order to install the Firefox Extension, see the options below.
+
+## Firefox Add-ons
+Installing the extension from the Firefox Add-ons is the easiest way to get started. This ensures that you are always using the latest version of the extension.
+
+1. Go to the (TODO: add Firefox Add-ons link)
+2. Click on the "Add to Firefox" button
+3. The extension will be installed and added to your browser
+
+## Build from Source
+If you wish to install the extension from source instead, see the [build-from-source](build-from-source.md) documentation. This will allow you to make changes to the extension and/or to use a specific version of the extension.

docs/misc/dev/browser-extensions.md

@@ -7,34 +7,59 @@ nav_order: 2
 ---
 
 # Browser Extensions
-AliasVault has browser extensions for Chrome (with Firefox support coming soon). In order to locally build and debug the extension, you can follow the steps below.
+AliasVault offers browser extensions compatible with both Chrome and Firefox. This guide explains how to build and debug the extensions locally.
 
-## Chrome Extension
-The Chrome extension is built with React as framework and Vite as build tool.
+## Development Setup
+The browser extensions are built using:
+- React: https://react.dev/
+- WXT: https://wxt.dev/ (A framework for cross-browser extension development)
+- Vite: https://vitejs.dev/
 
 ### Install dependencies
-Make sure you have Node.js installed on your host machine. Then install the dependencies by running the following command.
+Make sure you have Node.js installed on your host machine, then install the dependencies:
 
 ```bash
 cd browser-extensions/chrome
 npm install
 ```
 
-### Build the extension
+### Development Mode
+WXT provides a development mode that automatically reloads changes and opens a new browser window with the extension loaded:
 
 ```bash
-npm run build
+# For Chrome development
+npm run dev:chrome
+
+# For Firefox development
+npm run dev:firefox
 ```
 
-### Add the extension to Chrome
+## Building and Loading the Extensions Manually
 
-1. Open Chrome and navigate to `chrome://extensions/`.
-2. Enable "Developer mode" in the top right corner.
-3. Click "Load unpacked" and select the `dist` folder in the `./browser-extensions/chrome` directory.
-4. The extension should now be loaded and ready to use.
+### Chrome
 
-### Auto-build on changes
-When developing the extension, you can use the `npm run dev` command. This will automatically build the extension when you make changes to the code which will then automatically reload the extension in Chrome. This means you can make changes and see the results immediately.
+1. Build the extension:
+```bash
+npm run build:chrome
+```
+
+2. Load in Chrome:
+   - Open Chrome and navigate to `chrome://extensions/`
+   - Enable "Developer mode" in the top right corner
+   - Click "Load unpacked" and the folder `./browser-extension/dist/chrome-mv3`
+
+### Firefox
+
+1. Build the extension:
+```bash
+npm run build:firefox
+```
+
+2. Load in Firefox:
+   - Open Firefox and navigate to `about:debugging`
+   - Click "This Firefox" in the left sidebar
+   - Click "Load Temporary Add-on"
+   - Navigate to the `./browser-extension/dist/firefox-mv2` folder and select the `manifest.json` file
 
 ## Automatic tests
 The extension has a suite of automatic tests that are run on every pull request. These tests are located in the `__tests__` directories scattered throughout the browser extension codebase.