Merge pull request #23 from GrapeGreen/protocolling

Protocol handlers & launch handler example

Author: shangl

README.md

@@ -9,14 +9,21 @@ A demo showing off [Isolated Web Apps](https://github.com/WICG/isolated-web-apps
 - [Borderless display mode](https://github.com/WICG/manifest-incubations/blob/gh-pages/borderless-explainer.md)
 - [Multiscreen capture with auto-permission](https://github.com/screen-share/capture-all-screens)
 
+### Unrestricted [Protocol Handlers](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/protocol_handlers) & [Launch Handler](https://developer.mozilla.org/en-US/docs/Web/API/Launch_Handler_API)
+
+Kitchen Sink IWA is configured with `navigate-existing` launch handler
+and is capable of handling the `cf://` protocol (see the manifest for more
+details). As such, clicking on any of the links below will select an existing
+app instance (or create a new one if there's none running) and navigate it to
+`/cf.html` with some custom query params. Note that this requires the app to be
+installed and at least Chrome 142.
+  - [Click me](cf://?text=Lucky&color=peachpuff) if you're feeling lucky
+  - [Click me](cf://?text=Unlucky&color=slategrey) if you're feeling unlucky
+
 ## Installing as a Demo
 
 If you want to try installing this through the Admin panel, use the following information:
 
 - **Bundle ID** - `aiv4bxauvcu3zvbu6r5yynoh4atkzqqaoeof5mwz54b4zfywcrjuoaacai`
 - **Update URL** - `https://github.com/chromeos/iwa-sink/releases/latest/download/update.json`
 
-## Companion extension
-You can find a basic companion Chrome extension in the `extension` folder. The extension uses the [chrome.identity API](https://developer.chrome.com/docs/extensions/reference/api/identity).
-- **Extension ID** - `gopkidjpdjfamphfffkhpmmmbmknflmk`
-- **Update manifest for the self-hosted extension** - [https://github.com/chromeos/iwa-sink/releases/latest/download/extension_manifest.xml](https://github.com/chromeos/iwa-sink/releases/latest/download/extension_manifest.xml)

package.json

@@ -17,6 +17,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.0.13",
     "vite-plugin-html-inject": "^1.1.2",
-    "wbn-sign": "^0.2.0"
+    "wbn-sign": "^0.2.0",
+    "tinycolor2": "^1.6.0"
   }
 }

public/.well-known/manifest.webmanifest

@@ -23,5 +23,18 @@
     "controlled-frame": ["self"],
     "window-management": ["self"],
     "all-screens-capture": ["self"]
+  },
+  "protocol_handlers": [
+    {
+      "protocol": "web+cf",
+      "url": "/cf.html?params=%s"
+    },
+    {
+      "protocol": "cf",
+      "url": "/cf.html?params=%s"
+    }
+  ],
+  "launch_handler": {
+    "client_mode": "navigate-existing"
   }
 }

src/cf.ts

@@ -14,28 +14,100 @@
  * limitations under the License.
  */
 
-const color = document.getElementById('color') as HTMLInputElement;
-const lucky = document.getElementById('lucky') as HTMLInputElement;
+import tinycolor from 'tinycolor2';
+
+const colorInput = document.getElementById('color') as HTMLInputElement;
+const luckyInput = document.getElementById('lucky') as HTMLInputElement;
 const cf = document.getElementById('cf') as ControlledFrame;
-const controls = document.getElementById('controls') as HTMLFormElement;
-
-controls.addEventListener('submit', (e) => {
-  e.preventDefault();
-});
-
-color.addEventListener('change', () => {
-  const c = color.value;
-  const css = `body { background: ${c} !important; }`;
-  console.log(css);
-  cf.insertCSS({
-    code: css,
-  });
-});
-
-lucky.addEventListener('change', () => {
-  cf.executeScript({
-    code: `
-    document.querySelector(\`[aria-label="I'm Feeling Lucky"][role="button"]\`).value = "I'm Feeling ${lucky.value}";
-    `,
-  });
-});
+const controlsForm = document.getElementById('controls') as HTMLFormElement;
+
+/**
+ * Updates the background color of the controlled frame.
+ * @param color The CSS color value.
+ */
+function updateControlledFrameBackgroundColor(color: string) {
+  const css = `body { background: ${color} !important; }`;
+  console.log(`Updating color to: ${color}`);
+  cf.insertCSS({ code: css });
+}
+
+/**
+ * Updates the text of the "lucky" button inside the controlled frame.
+ * @param text The new text to display.
+ */
+function updateControlledFrameLuckyButtonText(text: string) {
+  console.log(`Updating text to: "I'm Feeling ${text}"`);
+  // Selects both English and Dutch buttons in a single query.
+  // The selector string uses backticks to avoid issues with single and double quotes.
+  const script = `
+    document.querySelectorAll(\`[aria-label="I'm Feeling Lucky"], [aria-label="Ik doe een gok"]\`).forEach(button => {
+      button.value = "I'm Feeling ${text}";
+    });
+  `;
+  cf.executeScript({ code: script });
+}
+
+/**
+ * Handles incoming launch parameters from the launch queue.
+ * @param launchParams The launch parameters provided by the system.
+ */
+function handleLaunch(launchParams: LaunchParams) {
+  if (!launchParams.targetURL) {
+    return;
+  }
+  console.log(`Received launch with targetURL: ${launchParams.targetURL}`);
+
+  // The targetURL contains a 'params' query parameter, which is itself a URL.
+  // We need to parse this nested URL to get the actual values.
+  const outerParams = new URL(launchParams.targetURL).searchParams;
+  const innerUrlString = outerParams.get('params');
+
+  if (!innerUrlString) {
+    console.warn("No 'params' found in launch URL.");
+    return;
+  }
+
+  try {
+    const innerParams = new URL(innerUrlString).searchParams;
+    const textParam = innerParams.get('text');
+    const colorParam = innerParams.get('color');
+
+    let parsedColor = null;
+    if (colorParam) {
+      const realColor = tinycolor(colorParam);
+      if (!realColor.isValid()) {
+        throw new Error(`${colorParam} does not name a valid color`);
+      }
+      parsedColor = realColor.toHexString();
+      colorInput.value = parsedColor;
+    }
+
+    if (textParam) {
+      luckyInput.value = textParam;
+    }
+
+    // Wait for the controlled frame to finish loading before applying changes.
+    cf.onloadstop = () => {
+      if (textParam) {
+        updateControlledFrameLuckyButtonText(textParam);
+      }
+      if (parsedColor) {
+        updateControlledFrameBackgroundColor(parsedColor);
+      }
+    };
+  } catch (error) {
+    console.error("Failed to parse inner URL from 'params':", error);
+  }
+}
+
+controlsForm.addEventListener('submit', (e) => e.preventDefault());
+
+colorInput.addEventListener('change', () =>
+  updateControlledFrameBackgroundColor(colorInput.value),
+);
+luckyInput.addEventListener('change', () =>
+  updateControlledFrameLuckyButtonText(luckyInput.value),
+);
+
+// Set up the launch queue consumer to handle protocol-launched events.
+window.launchQueue.setConsumer(handleLaunch);