Add browser extension docs (#541)

docs/architecture/index.md

@@ -2,7 +2,7 @@
 layout: default
 title: Architecture
 has_children: true
-nav_order: 3
+nav_order: 4
 ---
 
 # Architecture

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

@@ -0,0 +1,50 @@
+---
+layout: default
+title: Build from Source
+parent: Google Chrome
+grand_parent: Browser Extensions
+nav_order: 2
+---
+
+# Building Google Chrome Extension from Source
+
+This guide explains how to build and install the AliasVault Google Chrome extension from source code.
+
+## Prerequisites
+
+- Node.js installed on your computer
+- Git to clone the repository (optional)
+
+## Building the Google Chrome Extension
+
+1. Clone the repository:
+```bash
+git clone https://github.com/lanedirt/AliasVault.git
+```
+
+2. Navigate to the Google Chrome extension directory:
+```bash
+cd AliasVault/browser-extensions/chrome
+```
+
+3. Install the required dependencies:
+```bash
+npm install
+```
+
+4. Build the extension:
+```bash
+npm run build
+```
+
+## Installing in Google Chrome
+
+1. Open Google Chrome and go to `chrome://extensions/`
+2. Enable "Developer mode" using the toggle in the top right corner
+3. Click "Load unpacked"
+4. Navigate to and select the `dist` folder inside `browser-extensions/chrome`
+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/chrome/index.md

@@ -0,0 +1,19 @@
+---
+layout: default
+title: Google Chrome
+parent: Browser Extensions
+nav_order: 1
+---
+
+# Google Chrome Extension
+In order to install the Google Chrome Extension, see the options below.
+
+## Chrome Web Store
+Installing the extension from the Chrome Web Store is the easiest way to get started. This ensures that you are always using the latest version of the extension.
+
+1. Go to the [Chrome Web Store](https://chromewebstore.google.com/detail/aliasvault/bmoggiinmnodjphdjnmpcnlleamkfedj)
+2. Click on the "Add to Chrome" 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/browser-extensions/index.md

@@ -0,0 +1,22 @@
+---
+layout: default
+title: Browser Extensions
+has_children: true
+nav_order: 3
+---
+
+# Browser Extensions
+
+This section contains information about installing and using the AliasVault browser extensions. Browser extensions allow you to manage and use AliasVault from within your browser enabling autofilling of login credentials and email aliases on all websites that you use.
+
+## Features
+You can use the AliasVaultbrowser extension to:
+- Autofill existing alias information on any website
+- Generate new aliases for any website on the registration form itself
+- Access received emails on all of your aliases
+- View your aliases and identities
+
+The AliasVault browser extensions work with both the official cloud hosted version of AliasVault but also the self-hosted version.
+
+## Supported Browsers
+Click on one of the available browser extension below to get started with the installation process.

docs/misc/dev/browser-extensions.md

@@ -7,12 +7,13 @@ nav_order: 2
 ---
 
 # Browser Extensions
-AliasVault has browser extensions for Chrome and Firefox. In order to locally build and debug the extension, you can follow the steps below.
+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.
 
 ## Chrome Extension
 The Chrome extension is built with React as framework and Vite as build tool.
 
 ### Install dependencies
+Make sure you have Node.js installed on your host machine. Then install the dependencies by running the following command.
 
 ```bash
 cd browser-extensions/chrome
@@ -29,7 +30,7 @@ npm run build
 
 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 `chrome` directory.
+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.
 
 ### Auto-build on changes
@@ -49,7 +50,7 @@ npm run test
 In order to test for client side issues, here is a list of public websites that have caused issues in the past and can be used to test whether the extension is (still) working correctly.
 
 ### Websites that have caused issues
-The following websites have been known to cause issues in the past (but should be fixed now).
+The following websites have been known to cause issues in the past (but should be fixed now). After making changes to the extension, you can test whether the extension is (still) working correctly by using the websites below.
 
 | Website | Reason |
 | --- | --- |

docs/misc/dev/index.md

@@ -2,5 +2,5 @@
 layout: default
 title: Development
 parent: Miscellaneous
-nav_order: 1
+nav_order: 5
 ---