# Browser Extension Development
Everything around the development of the browser extension
The browser extensions are nothing but some special packaged web clients, with some additional sugar for panels and so on.
# Preamble
This whole guide is based on Ubuntu 22.04 LTS. Other Ubuntu and Debian based systems should be similar if not even identical.
We assume that you already have somewhere a Psono client development environment up. If not follow the guide to develop clients.
# Development
There are a lot of different ways to develop browser extensions. The most simple one is to create the unpackaged files and then load them in the browser:
# Chrome
Build
To build the browser extension execute the following command:
gulp
Follow this guide and load the extension from
psono-client/dist/chrome
:https://developer.chrome.com/extensions/getstarted#unpacked
In short:
- open Chrome
- enter "chrome://extensions" in the URL bar
- Ensure that the Developer mode checkbox in the top right-hand corner is checked.
- click "Load unpacked extension…"
- Navigate to
psono-client/dist/chrome
, and select it.
# Firefox
Build
To build the browser extension execute the following command:
gulp
Follow this guide and load the extension from
psono-client/dist/firefox
:https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox
In short:
- open Firefox
- enter "about:debugging" in the URL bar
- click "Load Temporary Add-on"
- open
psono-client/dist/firefox
and select any file inside.
# Release
# Chrome
The instruction will describe how to build / package and deploy the Chrome browser extension
Build
To build the browser extension execute the following command:
gulp
Packaging
First, we create the dist folder if it does not yet exist:
mkdir -p psono-client/dist/chrome
Second, we go into the build folder for the Chrome extension:
cd psono-client/build/chrome/
Afterwards we just zip the content:
zip -r ../../dist/chrome/psono.chrome.PW.zip *
Deployment
To deploy everything now to the Chrome Web Store execute the following:
gulp --webstore_client_id=$webstore_client_id \ --webstore_client_secret=$webstore_client_secret \ --webstore_refresh_token=$webstore_refresh_token \ --webstore_app_id=$webstore_app_id \ chrome-deploy
This will look for a
dist/chrome/psono.chrome.PW.zip
and deploy it. Replace the following variables:$webstore_client_id # e.g.: 12345678-XXXXXXXXX...XXXX.apps.googleusercontent.com $webstore_client_secret # e.g.: ABCDEFg-AaaaAAaaAKaasd9 $webstore_refresh_token # X/XXXXXxxxxXXXXX_XXxxxXxXXXxxx $webstore_app_id # e.g.: eljmjmgjkbmpmfljlmklcfineebidmlo
More infos can be found here:
# Firefox
The instruction will describe how to build / package and deploy the Firefox browser extension
Build
To build the browser extension execute the following command:
gulp
Packaging
First, we create the dist folder if it does not yet exist:
mkdir -p psono-client/dist/firefox
Second, we go into the build folder for the Firefox extension:
cd psono-client/build/firefox/
Afterwards we just zip the content:
zip -r ../../dist/firefox/psono.firefox.PW.zip *
Deployment
To deploy everything now to Firefox Add-ons execute the following:
gulp --mozilla_jwt_issuer=$mozilla_jwt_issuer \ --mozilla_jwt_secret=$mozilla_jwt_secret \ --mozilla_addon_id=$mozilla_addon_id \ --mozilla_version=$(echo $CI_COMMIT_TAG | awk '{ string=substr($0, 2, 100); print string; }' ) \ firefox-deploy
This will look for a
dist/chrome/psono.firefox.PW.zip
and deploy it. Replace the following variables:$mozilla_jwt_issuer # e.g.: user:12345689:123 $mozilla_jwt_secret # e.g.: asdasdasd45654334456asdasdasd6345645456asdasdsad456456456 $mozilla_addon_id # e.g.: {4cea82d7-5815-47eb-a7fe-2a5fd4974126}
To make this work the current repo needs to be tagged with something like "v1.0.0", and be aware that duplicate versions will be rejected.
More infos can be found here: