Format and update docs

diff --git a/Makefile b/Makefile
index 75433eadf8465e4c0eb970a49fffc3d0a47ea8f4..befc5f96de1aa8af74cd0985f8d8402753093092 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -1,12 +1,12 @@
 default: package
 
 start:
 default: package
 
 start:

-       docker-compose up
+       podman-compose up

 
 

-docker-build:
-       docker-compose build
+install-extension-dependencies:
+       cd extension && pnpm install

 
 

-build: create-build-folder
+build: install-extansion-dependencies create-build-folder

        cd extension && pnpm build
 
 package: package-for-firefox package-for-chrome package-for-safari
        cd extension && pnpm build
 
 package: package-for-firefox package-for-chrome package-for-safari


@@ -18,8 +18,12 @@ package-for-chrome: build
        cd extension && zip -r ../build/junction.zip manifest.json junction.js build/content_script.js icons/ sounds/
 
 package-for-safari: build
        cd extension && zip -r ../build/junction.zip manifest.json junction.js build/content_script.js icons/ sounds/
 
 package-for-safari: build

-       xcodebuild build -project safari/Junction.xcodeproj -scheme Junction -configuration Release -derivedDataPath ./build/_xcode
+       xcodebuild build -project safari/Junction.xcodeproj -scheme Junction -configuration Release -derivedDataPath ./build/_xcode | xcbeautify

        cp -r ./build/_xcode/Build/Products/Release/Junction.app ./build/
 
 create-build-folder:
        mkdir -p build
        cp -r ./build/_xcode/Build/Products/Release/Junction.app ./build/
 
 create-build-folder:
        mkdir -p build

+
+format:
+       prettier . --write
+       xcodebuild -project safari/Junction.xcodeproj | xcbeautify

diff --git a/README.md b/README.md
index 44f490ddbc3ac4ed5c8cbd22e5b606718d8ba296..345fa6b8cbea553bf1d4083a78d2d6ffca8a4493 100644 (file)
--- a/README.md
+++ b/README.md
@@ -1,30 +1,85 @@
 # Junction
 
 # Junction
 

-Connect people through any URL
+Connect people through any URL.

 
 

-## Extension
+Junction is a web extension for Firefox, Chrome and Safari that lets you start
+an audio call at any URL.

 
 

-First, make sure to build the plugin. From the extension's root you can call:
+## Building
+
+Running `make` or `make package` will regenerate the content script, and
+package the extension for all browsers in the `./build/` directory with
+the following outputs:
+
+- `junction.xpi`: The firefox extension
+- `junction.zip`: The chrome extension
+- `Junction.app`: The safari extension app
+
+## Developing
+
+The project is divided into three main parts:
+
+- `server`: A server that handles message passing to establish the WebRTC
+  connections.
+- `extension`: The main code of the extension itself.
+- `safari`: The safari app, it wraps the extension using symlinks.
+
+### Dependencies
+
+- `make` to run the build commands.
+- `xcode` to build the safari extension.
+- `node` and `pnpm` to build the extension, and if you want to run the server
+  directly.
+- `podman` and `podman-compose` if you want to run the server as a container.
+- `prettier` to format Javascript, JSON, Yaml, and Markdown.
+- `xcbeautify` to format swift
+
+### Server
+
+The server is a socket.io server that relays messages between peers to help
+establish a WebRTC connection.
+
+#### Configuration
+
+You can use environment variables to control the server.
+
+- `JUNCTION_SERVER_PORT` which port to listen on. Defaults to `8000`.
+
+### Extension
+
+The extension uses WebExtension manifest v2 and is compatible with Firefox,
+Chrome and Safari.
+
+You can build all extensions using `make` in the root of the directory.
+
+If you want to run manually then you can run `pnpm install` from the
+`extension` folder to install dependencies, and `pnpm build` to generate the
+content script.

 
 ```
 $ pnpm install && pnpm build
 ```
 
 
 ```
 $ pnpm install && pnpm build
 ```
 

-### Testing on Firefox
+#### Testing on Firefox

 
 In order to test on firefox, first go to `about:debugging`, then click
 on the `This Firefox` option. Then click on `Load Temporary Add-On` and
 
 In order to test on firefox, first go to `about:debugging`, then click
 on the `This Firefox` option. Then click on `Load Temporary Add-On` and

-point the browser to the `extension/manifest.json` file.
+point the browser to the `build/junction.xpi` file if you're using `make`, or
+`extension/manifest.json` file if you're testing without packaging.

 
 

-This will enable the extension and will allow you to use the inspector to debug.
+This will enable the extension and will allow you to use the inspector to
+debug.

 
 

-### Testing on Chrome
+#### Testing on Chrome

 
 In order to test on chrome, first go to `chrome://extensions/`. Make sure
 
 In order to test on chrome, first go to `chrome://extensions/`. Make sure

-`Developer mode` is enabled. Then click `Load Unpacked` and point the browser
-to the `extension` directory.
+`Developer mode` is enabled. You can drag the `build/junction.zip` file or
+click `Load Unpacked` and point the browser to the `extension` directory.
+
+#### Testing on Safari
+
+Open `Junction.app` and then enable the extension in Safari.

 
 

-### Packaging
+### Formatting

 
 

-The makefile includes scripts to create a distributable package. `make package`
-should generate all supported files in the `build/` directory.
+Running `make format` will format the code with prettify and xcbeautify

diff --git a/docker-compose.yml b/docker-compose.yml
index ec2cbed9327fe08f7245f509b99a0e35d65209d3..ae342cf54222d2d0882ed89bce0b16717a527ba5 100644 (file)
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,4 +1,4 @@
-version: "3.8"
+version: "3.9"

 
 services:
   server:
 
 services:
   server:

diff --git a/extension/content_script.js b/extension/content_script.js
index 9d4666931b9fae6702c31a0dedda56e55d51ecff..0c7012b7939c8f34fa6e2c0414f12fc3fee597f6 100644 (file)
--- a/extension/content_script.js
+++ b/extension/content_script.js
@@ -61,7 +61,7 @@ const internals = {
           shouldCreateOffer,
           mediaStream,
           onOffer: (data) => socket.emit("relayOffer", data),
           shouldCreateOffer,
           mediaStream,
           onOffer: (data) => socket.emit("relayOffer", data),

-          socket
+          socket,

         });
         playTada();
       });
         });
         playTada();
       });

diff --git a/extension/junction.js b/extension/junction.js
index 776096927473e635738e8577f8988675b7e9645e..c3cb4e9db5d221846e6ecbad41dcda2855d088e5 100644 (file)
--- a/extension/junction.js
+++ b/extension/junction.js
@@ -72,14 +72,15 @@ const internals = {
           internals.injectedScript = true;
         },
       );
           internals.injectedScript = true;
         },
       );

-    } else {
-      internals.getRoot().tabs.connect(activeTabs[0].id)
-    }

 
 

-    if (execution && !execution[0]) {
-      internals.onDisconnect();
+      if (execution && !execution[0]) {
+        internals.onDisconnect();
+      }
+    } else {
+      internals.getRoot().tabs.connect(activeTabs[0].id);

     }
   },
     }
   },

+

   hangUp() {
     internals.getRoot().browserAction.disable();
     internals.port.postMessage({
   hangUp() {
     internals.getRoot().browserAction.disable();
     internals.port.postMessage({

diff --git a/extension/peers.js b/extension/peers.js
index be494b0ca477793f747c2c49415235b4afdc7c19..fced1085277c85649c6f551fbc84ecba440af091 100644 (file)
--- a/extension/peers.js
+++ b/extension/peers.js
@@ -13,7 +13,13 @@ const internals = {
   },
 };
 
   },
 };
 

-export function addPeer({ peerId, shouldCreateOffer, mediaStream, onOffer, socket }) {
+export function addPeer({
+  peerId,
+  shouldCreateOffer,
+  mediaStream,
+  onOffer,
+  socket,
+}) {

   const peerConnection = new RTCPeerConnection(
     { iceServers: internals.kIceServers },
     { optional: [{ DtlsSrtpKeyAgreement: true }] },
   const peerConnection = new RTCPeerConnection(
     { iceServers: internals.kIceServers },
     { optional: [{ DtlsSrtpKeyAgreement: true }] },

diff --git a/safari/Junction/Assets.xcassets/AccentColor.colorset/Contents.json b/safari/Junction/Assets.xcassets/AccentColor.colorset/Contents.json
index eb8789700816459c1e1480e0b34781d9fb78a1ca..0afb3cf0eec828abf43c44d0b7a43d32345cfc80 100644 (file)
--- a/safari/Junction/Assets.xcassets/AccentColor.colorset/Contents.json
+++ b/safari/Junction/Assets.xcassets/AccentColor.colorset/Contents.json
@@ -1,11 +1,11 @@
 {
 {

-  "colors" : [
+  "colors": [

     {
     {

-      "idiom" : "universal"
+      "idiom": "universal"

     }
   ],
     }
   ],

-  "info" : {
-    "author" : "xcode",
-    "version" : 1
+  "info": {
+    "author": "xcode",
+    "version": 1

   }
 }
   }
 }

diff --git a/safari/Junction/Assets.xcassets/AppIcon.appiconset/Contents.json b/safari/Junction/Assets.xcassets/AppIcon.appiconset/Contents.json
index 64dc11ee7438ff9d41f0fb625e861d6bb881024c..8815e3ec1c012610d97c6ddaf1d24de6b82903b2 100644 (file)
--- a/safari/Junction/Assets.xcassets/AppIcon.appiconset/Contents.json
+++ b/safari/Junction/Assets.xcassets/AppIcon.appiconset/Contents.json
@@ -1,68 +1,68 @@
 {
 {

-  "images" : [
+  "images": [

     {
     {

-      "filename" : "icon_16x16.png",
-      "idiom" : "mac",
-      "scale" : "1x",
-      "size" : "16x16"
+      "filename": "icon_16x16.png",
+      "idiom": "mac",
+      "scale": "1x",
+      "size": "16x16"

     },
     {
     },
     {

-      "filename" : "icon_16x16@2x.png",
-      "idiom" : "mac",
-      "scale" : "2x",
-      "size" : "16x16"
+      "filename": "icon_16x16@2x.png",
+      "idiom": "mac",
+      "scale": "2x",
+      "size": "16x16"

     },
     {
     },
     {

-      "filename" : "icon_32x32.png",
-      "idiom" : "mac",
-      "scale" : "1x",
-      "size" : "32x32"
+      "filename": "icon_32x32.png",
+      "idiom": "mac",
+      "scale": "1x",
+      "size": "32x32"

     },
     {
     },
     {

-      "filename" : "icon_32x32@2x.png",
-      "idiom" : "mac",
-      "scale" : "2x",
-      "size" : "32x32"
+      "filename": "icon_32x32@2x.png",
+      "idiom": "mac",
+      "scale": "2x",
+      "size": "32x32"

     },
     {
     },
     {

-      "filename" : "icon_128x128.png",
-      "idiom" : "mac",
-      "scale" : "1x",
-      "size" : "128x128"
+      "filename": "icon_128x128.png",
+      "idiom": "mac",
+      "scale": "1x",
+      "size": "128x128"

     },
     {
     },
     {

-      "filename" : "icon_128x128@2x.png",
-      "idiom" : "mac",
-      "scale" : "2x",
-      "size" : "128x128"
+      "filename": "icon_128x128@2x.png",
+      "idiom": "mac",
+      "scale": "2x",
+      "size": "128x128"

     },
     {
     },
     {

-      "filename" : "icon_256x256.png",
-      "idiom" : "mac",
-      "scale" : "1x",
-      "size" : "256x256"
+      "filename": "icon_256x256.png",
+      "idiom": "mac",
+      "scale": "1x",
+      "size": "256x256"

     },
     {
     },
     {

-      "filename" : "icon_256x256@2x.png",
-      "idiom" : "mac",
-      "scale" : "2x",
-      "size" : "256x256"
+      "filename": "icon_256x256@2x.png",
+      "idiom": "mac",
+      "scale": "2x",
+      "size": "256x256"

     },
     {
     },
     {

-      "filename" : "icon_512x512.png",
-      "idiom" : "mac",
-      "scale" : "1x",
-      "size" : "512x512"
+      "filename": "icon_512x512.png",
+      "idiom": "mac",
+      "scale": "1x",
+      "size": "512x512"

     },
     {
     },
     {

-      "filename" : "icon_512x512@2x.png",
-      "idiom" : "mac",
-      "scale" : "2x",
-      "size" : "512x512"
+      "filename": "icon_512x512@2x.png",
+      "idiom": "mac",
+      "scale": "2x",
+      "size": "512x512"

     }
   ],
     }
   ],

-  "info" : {
-    "author" : "xcode",
-    "version" : 1
+  "info": {
+    "author": "xcode",
+    "version": 1

   }
 }
   }
 }

diff --git a/safari/Junction/Assets.xcassets/Contents.json b/safari/Junction/Assets.xcassets/Contents.json
index 73c00596a7fca3f3d4bdd64053b69d86745f9e10..74d6a722cf39b2dd5bef11f166e6ac9b99568a01 100644 (file)
--- a/safari/Junction/Assets.xcassets/Contents.json
+++ b/safari/Junction/Assets.xcassets/Contents.json
@@ -1,6 +1,6 @@
 {
 {

-  "info" : {
-    "author" : "xcode",
-    "version" : 1
+  "info": {
+    "author": "xcode",
+    "version": 1

   }
 }
   }
 }

diff --git a/safari/Junction/Assets.xcassets/LargeIcon.imageset/Contents.json b/safari/Junction/Assets.xcassets/LargeIcon.imageset/Contents.json
index a19a5492203a8d30fc85ccc30497536a9500155d..ae524e7542bd929c7894a298ab782510a0f735c3 100644 (file)
--- a/safari/Junction/Assets.xcassets/LargeIcon.imageset/Contents.json
+++ b/safari/Junction/Assets.xcassets/LargeIcon.imageset/Contents.json
@@ -1,20 +1,20 @@
 {
 {

-  "images" : [
+  "images": [

     {
     {

-      "idiom" : "universal",
-      "scale" : "1x"
+      "idiom": "universal",
+      "scale": "1x"

     },
     {
     },
     {

-      "idiom" : "universal",
-      "scale" : "2x"
+      "idiom": "universal",
+      "scale": "2x"

     },
     {
     },
     {

-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom": "universal",
+      "scale": "3x"

     }
   ],
     }
   ],

-  "info" : {
-    "author" : "xcode",
-    "version" : 1
+  "info": {
+    "author": "xcode",
+    "version": 1

   }
 }
   }
 }

diff --git a/safari/Junction/Base.lproj/Main.html b/safari/Junction/Base.lproj/Main.html
index 081cc4175a3b454920b4aee9b9fb23f8cfdc4e24..96adac3e69b8bfe65e19a18f5516639d237685e0 100644 (file)
--- a/safari/Junction/Base.lproj/Main.html
+++ b/safari/Junction/Base.lproj/Main.html
@@ -1,19 +1,32 @@
-<!DOCTYPE html>
+<!doctype html>

 <html>
 <html>

-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />

 
 

-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, user-scalable=no"
+    />

 
 

-    <link rel="stylesheet" href="../Style.css">
+    <link rel="stylesheet" href="../Style.css" />

     <script src="../Script.js" defer></script>
     <script src="../Script.js" defer></script>

-</head>
-<body>
-    <img src="../Icon.png" width="128" height="128" alt="Junction Icon">
-    <p class="state-unknown">You can turn on Junction’s extension in Safari Extensions preferences.</p>
-    <p class="state-on">Junction’s extension is currently on. You can turn it off in Safari Extensions preferences.</p>
-    <p class="state-off">Junction’s extension is currently off. You can turn it on in Safari Extensions preferences.</p>
-    <button class="open-preferences">Quit and Open Safari Extensions Preferences…</button>
-</body>
+  </head>
+  <body>
+    <img src="../Icon.png" width="128" height="128" alt="Junction Icon" />
+    <p class="state-unknown">
+      You can turn on Junction’s extension in Safari Extensions preferences.
+    </p>
+    <p class="state-on">
+      Junction’s extension is currently on. You can turn it off in Safari
+      Extensions preferences.
+    </p>
+    <p class="state-off">
+      Junction’s extension is currently off. You can turn it on in Safari
+      Extensions preferences.
+    </p>
+    <button class="open-preferences">
+      Quit and Open Safari Extensions Preferences…
+    </button>
+  </body>

 </html>
 </html>

diff --git a/safari/Junction/Resources/Script.js b/safari/Junction/Resources/Script.js
index f551e6b49c103d00f8f6166e380707c693d8c3b7..9bdbda7460961009a90e49138f69878506ff163a 100644 (file)
--- a/safari/Junction/Resources/Script.js
+++ b/safari/Junction/Resources/Script.js
@@ -1,22 +1,28 @@
 function show(enabled, useSettingsInsteadOfPreferences) {
 function show(enabled, useSettingsInsteadOfPreferences) {

-    if (useSettingsInsteadOfPreferences) {
-        document.getElementsByClassName('state-on')[0].innerText = "Junction’s extension is currently on. You can turn it off in the Extensions section of Safari Settings.";
-        document.getElementsByClassName('state-off')[0].innerText = "Junction’s extension is currently off. You can turn it on in the Extensions section of Safari Settings.";
-        document.getElementsByClassName('state-unknown')[0].innerText = "You can turn on Junction’s extension in the Extensions section of Safari Settings.";
-        document.getElementsByClassName('open-preferences')[0].innerText = "Quit and Open Safari Settings…";
-    }
+  if (useSettingsInsteadOfPreferences) {
+    document.getElementsByClassName("state-on")[0].innerText =
+      "Junction’s extension is currently on. You can turn it off in the Extensions section of Safari Settings.";
+    document.getElementsByClassName("state-off")[0].innerText =
+      "Junction’s extension is currently off. You can turn it on in the Extensions section of Safari Settings.";
+    document.getElementsByClassName("state-unknown")[0].innerText =
+      "You can turn on Junction’s extension in the Extensions section of Safari Settings.";
+    document.getElementsByClassName("open-preferences")[0].innerText =
+      "Quit and Open Safari Settings…";
+  }

 
 

-    if (typeof enabled === "boolean") {
-        document.body.classList.toggle(`state-on`, enabled);
-        document.body.classList.toggle(`state-off`, !enabled);
-    } else {
-        document.body.classList.remove(`state-on`);
-        document.body.classList.remove(`state-off`);
-    }
+  if (typeof enabled === "boolean") {
+    document.body.classList.toggle(`state-on`, enabled);
+    document.body.classList.toggle(`state-off`, !enabled);
+  } else {
+    document.body.classList.remove(`state-on`);
+    document.body.classList.remove(`state-off`);
+  }

 }
 
 function openPreferences() {
 }
 
 function openPreferences() {

-    webkit.messageHandlers.controller.postMessage("open-preferences");
+  webkit.messageHandlers.controller.postMessage("open-preferences");

 }
 
 }
 

-document.querySelector("button.open-preferences").addEventListener("click", openPreferences);
+document
+  .querySelector("button.open-preferences")
+  .addEventListener("click", openPreferences);

diff --git a/safari/Junction/Resources/Style.css b/safari/Junction/Resources/Style.css
index cbde9e69776818f4a5998582df0d3847548a53c2..ef4dcde3314b5985902615d27c22eaf62184c4b5 100644 (file)
--- a/safari/Junction/Resources/Style.css
+++ b/safari/Junction/Resources/Style.css
@@ -1,45 +1,45 @@
 * {
 * {

-    -webkit-user-select: none;
-    -webkit-user-drag: none;
-    cursor: default;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  cursor: default;

 }
 
 :root {
 }
 
 :root {

-    color-scheme: light dark;
+  color-scheme: light dark;

 
 

-    --spacing: 20px;
+  --spacing: 20px;

 }
 
 html {
 }
 
 html {

-    height: 100%;
+  height: 100%;

 }
 
 body {
 }
 
 body {

-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;

 
 

-    gap: var(--spacing);
-    margin: 0 calc(var(--spacing) * 2);
-    height: 100%;
+  gap: var(--spacing);
+  margin: 0 calc(var(--spacing) * 2);
+  height: 100%;

 
 

-    font: -apple-system-short-body;
-    text-align: center;
+  font: -apple-system-short-body;
+  text-align: center;

 }
 
 body:not(.state-on, .state-off) :is(.state-on, .state-off) {
 }
 
 body:not(.state-on, .state-off) :is(.state-on, .state-off) {

-    display: none;
+  display: none;

 }
 
 body.state-on :is(.state-off, .state-unknown) {
 }
 
 body.state-on :is(.state-off, .state-unknown) {

-    display: none;
+  display: none;

 }
 
 body.state-off :is(.state-on, .state-unknown) {
 }
 
 body.state-off :is(.state-on, .state-unknown) {

-    display: none;
+  display: none;

 }
 
 button {
 }
 
 button {

-    font-size: 1em;
+  font-size: 1em;

 }
 }

diff --git a/server/events.js b/server/events.js
index 18b9dd45e9c00bd4ec7da0e1c4ea8ce8fb383ba5..e8094d51c3980f7bb60d1220fc6e65932c7c8483 100644 (file)
--- a/server/events.js
+++ b/server/events.js
@@ -25,7 +25,7 @@ export const types = {
 export function addPeer(peerId, shouldCreateOffer) {
   return internals.emitter.bind(null, types.ADD_PEER, {
     peerId,
 export function addPeer(peerId, shouldCreateOffer) {
   return internals.emitter.bind(null, types.ADD_PEER, {
     peerId,

-    shouldCreateOffer
+    shouldCreateOffer,

   });
 }
 
   });
 }