Repository: ruffle-rs/ruffle (language: rust)

Issue:
Extension does not work in Safari 16
### Describe the bug

Several users have reported that the Ruffle extension does not work in Safari 16. The extension popup always says "Checking Ruffle status on current tab..." and the Ruffle player does not appear on the page. Initial investigation by @kmeisthax suggests that there was some change in Safari 16 to how `postMessage` works, which was not mentioned in the release notes.

### Expected behavior

The extension should work as it does in other browsers.

### Affected platform

Browser's extension

### Operating system

MacOS Monterey, Big Sur, and Ventura

### Browser

Safari 16

### Additional information

_No response_
Extension does not work in Safari 16
### Describe the bug

Several users have reported that the Ruffle extension does not work in Safari 16. The extension popup always says "Checking Ruffle status on current tab..." and the Ruffle player does not appear on the page. Initial investigation by @kmeisthax suggests that there was some change in Safari 16 to how `postMessage` works, which was not mentioned in the release notes.

### Expected behavior

The extension should work as it does in other browsers.

### Affected platform

Browser's extension

### Operating system

MacOS Monterey, Big Sur, and Ventura

### Browser

Safari 16

### Additional information

_No response_


Discussion / hints:
Looks like it doesn't work on Safari 17 either. I'm testing on Safari 17.3 and macOS Ventura by the way.
Looks like it doesn't work on Safari 17 either. I'm testing on Safari 17.3 and macOS Ventura by the way.

Fix patch:
diff --git a/web/packages/extension/src/content.ts b/web/packages/extension/src/content.ts
index a2f31d342b944..562cfd3d084c0 100644
--- a/web/packages/extension/src/content.ts
+++ b/web/packages/extension/src/content.ts
@@ -78,6 +78,8 @@ function injectScriptURL(url: string): Promise<void> {
     });
     script.charset = "utf-8";
     script.src = url;
+    // safari 16+ script.src will be masked to "webkit-masked-url://hidden/"
+    script.setAttribute("ruffle-id", String(ID));
     (document.head || document.documentElement).append(script);
     return promise;
 }
diff --git a/web/packages/extension/src/ruffle.ts b/web/packages/extension/src/ruffle.ts
index 91e2ce4c9c871..f4babc08a04ec 100644
--- a/web/packages/extension/src/ruffle.ts
+++ b/web/packages/extension/src/ruffle.ts
@@ -28,16 +28,20 @@ function handleMessage(message: Message) {
 }
 
 let ID: string | null = null;
-if (
-    document.currentScript !== undefined &&
-    document.currentScript !== null &&
-    "src" in document.currentScript &&
-    document.currentScript.src !== ""
-) {
-    try {
-        ID = new URL(document.currentScript.src).searchParams.get("id");
-    } catch (_) {
-        // ID remains null.
+if (document.currentScript !== undefined && document.currentScript !== null) {
+    if ("src" in document.currentScript && document.currentScript.src !== "") {
+        try {
+            ID = new URL(document.currentScript.src).searchParams.get("id");
+        } catch (_) {
+            // ID remains null.
+        }
+    }
+    if (ID === null) {
+        // if `script.src` is masked, get id from attrs
+        const ruffleId = document.currentScript.getAttribute("ruffle-id");
+        if (ruffleId) {
+            ID = ruffleId;
+        }
     }
 }
 


Test patch: