feat: add Edge/Chromium browser extension support

webext/README.md

@@ -1,8 +1,9 @@
 This is a web extension that allows browsers to connect to the D-Bus service
 provided by this project. It can be used for testing.
 
-Currently, this is written only for Firefox; there will be some slight API
-tweaks required to make this work in Chrome.
+Two variants are provided:
+- `add-on/` - Firefox (MV3, requires Firefox 140+)
+- `add-on-edge/` - Edge/Chromium (MV3, requires Chrome 111+ or Edge 111+)
 
 This requires some setup to make it work:
 
@@ -48,11 +49,11 @@ couple of options:
 4. Navigate to [https://webauthn.io]().
 5. Run through the registration and creation process.
 
-## For Development
+## For Development (Firefox)
 
 (Note: Paths are relative to root of this repository)
 
-1. Copy `webext/app/credential_manager_shim.json` to `~/.mozilla/native-messaging-hosts/credential_manager_shim.json`.
+1. Copy `webext/app/credential_manager_shim.json` to `~/.mozilla/native-messaging-hosts/xyz.iinuwa.credentialsd_helper.json`.
 2. In `webext/app/credential_manager_shim.py`, point the `DBUS_DOC_FILE`
    variable to the absolute path to
    `doc/xyz.iinuwa.credentialsd.Credentials.xml`.
@@ -64,3 +65,40 @@ couple of options:
    - `./build/credentialsd/target/debug/credentialsd`
 7. Navigate to [https://webauthn.io]().
 8. Run through the registration and creation process.
+
+## For Development (Edge/Chromium)
+
+(Note: Paths are relative to root of this repository)
+
+1. In `webext/app/credential_manager_shim.py`, point the `DBUS_DOC_FILE`
+   variable to the absolute path to
+   `doc/xyz.iinuwa.credentialsd.Credentials.xml`.
+2. Open Edge and go to `edge://extensions` (or `chrome://extensions` for Chrome).
+3. Enable "Developer mode" (toggle in top right).
+4. Click "Load unpacked" and select the `webext/add-on-edge/` directory.
+5. Note the extension ID shown on the extensions page (e.g., `abcdefghijklmnop...`).
+6. Create the native messaging manifest:
+   ```shell
+   # For Edge:
+   mkdir -p ~/.config/microsoft-edge/NativeMessagingHosts
+   # For Chrome:
+   # mkdir -p ~/.config/google-chrome/NativeMessagingHosts
+   # For Chromium:
+   # mkdir -p ~/.config/chromium/NativeMessagingHosts
+
+   cat > ~/.config/microsoft-edge/NativeMessagingHosts/xyz.iinuwa.credentialsd_helper.json << EOF
+   {
+     "name": "xyz.iinuwa.credentialsd_helper",
+     "description": "Helper for integrating browser with credentialsd project",
+     "path": "$(readlink -f webext/app/credential_manager_shim.py)",
+     "type": "stdio",
+     "allowed_origins": [ "chrome-extension://YOUR_EXTENSION_ID/" ]
+   }
+   EOF
+   ```
+   Replace `YOUR_EXTENSION_ID` with the extension ID from step 5.
+7. Build with `ninja -C ./build` and run the D-Bus services:
+   - `GSCHEMA_SCHEMA_DIR=build/credentialsd-ui/data ./build/credentialsd-ui/target/debug/credentialsd-ui`
+   - `./build/credentialsd/target/debug/credentialsd`
+8. Navigate to [https://webauthn.io]().
+9. Run through the registration and creation process.

webext/add-on-edge/background.js

@@ -0,0 +1,107 @@
+/**
+ * Background service worker for Edge/Chromium.
+ * Bridges content script messages to the native messaging host.
+ */
+
+let contentPort;
+let nativePort;
+
+function arrayBufferToBase64url(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let binary = '';
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+function base64urlToBytes(str) {
+  if (!str) return null;
+  const padded = str.replace(/-/g, '+').replace(/_/g, '/');
+  const binary = atob(padded);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
+
+function connected(port) {
+  console.log('[credentialsd] received connection from content script');
+  contentPort = port;
+
+  // Connect to native messaging host
+  nativePort = chrome.runtime.connectNative('xyz.iinuwa.credentialsd_helper');
+  if (chrome.runtime.lastError) {
+    console.error('[credentialsd] native connect error:', chrome.runtime.lastError.message);
+    return;
+  }
+  console.log('[credentialsd] connected to native app');
+
+  contentPort.onMessage.addListener(rcvFromContent);
+  nativePort.onMessage.addListener(rcvFromNative);
+
+  nativePort.onDisconnect.addListener(() => {
+    if (chrome.runtime.lastError) {
+      console.error('[credentialsd] native port disconnected:', chrome.runtime.lastError.message);
+    }
+  });
+}
+
+function rcvFromContent(msg) {
+  const { requestId, cmd, options } = msg;
+  const origin = contentPort.sender.origin;
+  const topOrigin = new URL(contentPort.sender.tab.url).origin;
+
+  if (options) {
+    const serializedOptions = serializeRequest(options);
+    console.debug('[credentialsd] forwarding', cmd, 'to native app');
+    nativePort.postMessage({ requestId, cmd, options: serializedOptions, origin, topOrigin });
+  } else {
+    console.debug('[credentialsd] forwarding', cmd, '(no options) to native app');
+    nativePort.postMessage({ requestId, cmd, origin, topOrigin });
+  }
+}
+
+function rcvFromNative(msg) {
+  console.log('[credentialsd] received from native, forwarding to content');
+  contentPort.postMessage(msg);
+}
+
+function serializeBytes(buffer) {
+  if (buffer && buffer.__b64url__) {
+    // Already base64url-encoded by the MAIN world script
+    return buffer.__b64url__;
+  }
+  if (buffer instanceof ArrayBuffer || ArrayBuffer.isView(buffer)) {
+    return arrayBufferToBase64url(buffer);
+  }
+  if (typeof buffer === 'string') {
+    return buffer;
+  }
+  return buffer;
+}
+
+function serializeRequest(options) {
+  const clone = JSON.parse(JSON.stringify(options));
+
+  // The MAIN world script serialized ArrayBuffers as { __b64url__: "..." }
+  // Unwrap these for the native host
+  function unwrapB64url(obj) {
+    if (obj === null || obj === undefined) return obj;
+    if (typeof obj !== 'object') return obj;
+    if (obj.__b64url__) return obj.__b64url__;
+    if (Array.isArray(obj)) return obj.map(unwrapB64url);
+    const result = {};
+    for (const key of Object.keys(obj)) {
+      result[key] = unwrapB64url(obj[key]);
+    }
+    return result;
+  }
+
+  return unwrapB64url(clone);
+}
+
+// Listen for connections from content script
+console.log('[credentialsd] background service worker starting (Edge/Chromium)');
+chrome.runtime.onConnect.addListener(connected);

webext/add-on-edge/content-bridge.js

@@ -0,0 +1,33 @@
+/**
+ * Content script running in ISOLATED world.
+ * Bridges window.postMessage from the MAIN world content script
+ * to the background service worker via chrome.runtime.connect.
+ */
+
+const port = chrome.runtime.connect({ name: 'credentialsd-helper' });
+
+// Forward responses from background back to page context
+port.onMessage.addListener((msg) => {
+  const { requestId, data, error } = msg;
+  window.postMessage({
+    type: 'credentialsd-response',
+    requestId,
+    data,
+    error,
+  }, '*');
+});
+
+port.onDisconnect.addListener(() => {
+  console.warn('[credentialsd] background port disconnected');
+});
+
+// Listen for requests from the MAIN world content script
+window.addEventListener('message', (event) => {
+  if (event.source !== window) return;
+  if (event.data?.type !== 'credentialsd-request') return;
+
+  const { requestId, cmd, options } = event.data;
+  port.postMessage({ requestId, cmd, options });
+});
+
+console.log('[credentialsd] content bridge active (Edge/Chromium)');