bitwarden-browser/apps/browser

Bitwarden Browser Extension

The Bitwarden browser extension is written using the Web Extension API and Angular.

Build/Run

Requirements

• Node.js v16.13.1 or greater
• NPM v8
• Gulp (npm install --global gulp-cli)
• Chrome (preferred), Opera, or Firefox browser

Run the app

npm install
npm run build:watch

You can now load the extension into your browser through the browser's extension tools page:

• Chrome/Opera:
  1. Type chrome://extensions in your address bar to bring up the extensions page.
  2. Enable developer mode (toggle switch)
  3. Click the "Load unpacked extension" button, navigate to the build folder of your local extension instance, and click "Ok".
• Firefox
  1. Type about:debugging in your address bar to bring up the add-ons page.
  2. Click the Load Temporary Add-on button, navigate to the build/manifest.json file, and "Open".

Desktop communication

Native Messaging (communication between the desktop application and browser extension) works by having the browser start a lightweight proxy baked into our desktop application.

Out of the box, the desktop application can only communicate with the production browser extension. When you enable browser integration in the desktop application, the application generates manifests which contain the production IDs of the browser extensions. To enable communication between the desktop application and development versions of browser extensions, add the development IDs to the allowed_extensions section of the corresponding manifests.

Manifests are located in the browser subdirectory of the Bitwarden configuration directory. For instance, on Windows the manifests are located at C:\Users\<user>\AppData\Roaming\Bitwarden\browsers and on macOS these are in Application Support for various browsers (for example). Note that disabling the desktop integration will delete the manifests, and the files will need to be updated again.