From 9ce776be2b63ceaf79faee699fd2bb43c2844499 Mon Sep 17 00:00:00 2001 From: Leendert de Borst Date: Fri, 7 Mar 2025 13:05:22 +0100 Subject: [PATCH] Update docs for firefox browser extension (#581) --- .../chrome/build-from-source.md | 2 +- .../firefox/build-from-source.md | 50 ++++++++++++++++++ docs/browser-extensions/firefox/index.md | 19 +++++++ docs/misc/dev/browser-extensions.md | 51 ++++++++++++++----- 4 files changed, 108 insertions(+), 14 deletions(-) create mode 100644 docs/browser-extensions/firefox/build-from-source.md create mode 100644 docs/browser-extensions/firefox/index.md diff --git a/docs/browser-extensions/chrome/build-from-source.md b/docs/browser-extensions/chrome/build-from-source.md index 9dea38123..5661e738d 100644 --- a/docs/browser-extensions/chrome/build-from-source.md +++ b/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 diff --git a/docs/browser-extensions/firefox/build-from-source.md b/docs/browser-extensions/firefox/build-from-source.md new file mode 100644 index 000000000..c50f08e4d --- /dev/null +++ b/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. diff --git a/docs/browser-extensions/firefox/index.md b/docs/browser-extensions/firefox/index.md new file mode 100644 index 000000000..b7fbb6359 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/misc/dev/browser-extensions.md b/docs/misc/dev/browser-extensions.md index 0a96d2644..3bdf04d12 100644 --- a/docs/misc/dev/browser-extensions.md +++ b/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.