web: Fix extension webpack import not working in Safari 16 (close ruffle-rs#10981, part of ruffle-rs#19348)

Author: thy486

web/packages/extension/global.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    /**
+     * https://webpack.js.org/guides/public-path/#on-the-fly
+     */
+    let __webpack_public_path__: string;
+}
+
+export {};

web/packages/extension/src/content.ts

@@ -80,6 +80,9 @@ function injectScriptURL(url: string): Promise<void> {
     script.src = url;
     // safari 16+ script.src will be masked to "webkit-masked-url://hidden/"
     script.setAttribute("ruffle-id", String(ID));
+    if (url !== script.src) {
+        script.setAttribute("ruffle-src-polyfill", url);
+    }
     (document.head || document.documentElement).append(script);
     return promise;
 }

web/packages/extension/src/ruffle.ts

@@ -29,15 +29,16 @@ function handleMessage(message: Message) {
 
 let ID: string | null = null;
 if (document.currentScript !== undefined && document.currentScript !== null) {
-    if ("src" in document.currentScript && document.currentScript.src !== "") {
+    polyfillCurrentScript();
+    if (determineKnownTypeHasNoEmptyStringProp(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
+        // Fallback to get id from attrs
         const ruffleId = document.currentScript.getAttribute("ruffle-id");
         if (ruffleId) {
             ID = ruffleId;
@@ -57,6 +58,60 @@ function openInNewTab(swf: URL): void {
     window.postMessage(message, "*");
 }
 
+function polyfillCurrentScript(): void {
+    const script = document.currentScript!;
+    try {
+        if (determineKnownTypeHasNoEmptyStringProp(script, "src")) {
+            determineScriptIsMaskedSrcAndMakePolyfill(script);
+        }
+    } catch (_) {
+        // Continue to run
+    }
+}
+
+function determineScriptIsMaskedSrcAndMakePolyfill(
+    script: HTMLScriptElement,
+): void {
+    const scriptUrlPolyfill = script.getAttribute("ruffle-src-polyfill");
+    if (!scriptUrlPolyfill) {
+        return;
+    }
+    const scriptUrl = script.src;
+    const applyResetWebpackPublicPath = (overridePublicPath: string): void => {
+        __webpack_public_path__ = overridePublicPath;
+        // TODO: If there are other scripts that need to be dynamically created and executed, the current polyfill logic should also be applied.
+    };
+    // Reset webpack public path should be safe when it is using mask url
+    if ("webkit-masked-url://hidden/" === scriptUrl) {
+        const webpackCurrentPublicPath = __webpack_public_path__;
+        const scriptAutoPublicPath =
+            getWebpackPublicPathFromScriptSrc(scriptUrl);
+        if (webpackCurrentPublicPath === scriptAutoPublicPath) {
+            applyResetWebpackPublicPath(
+                getWebpackPublicPathFromScriptSrc(scriptUrlPolyfill),
+            );
+        }
+    }
+    // TODO: Process other situations when mask url not webkit-masked-url://hidden/
+}
+
+// Exclude types that do not have this prop
+function determineKnownTypeHasNoEmptyStringProp<
+    T extends object,
+    TKey extends PropertyKey,
+>(obj: T, prop: TKey): obj is T extends Record<TKey, string> ? T : never {
+    return prop in obj && (obj as Record<PropertyKey, any>)[prop] !== "";
+}
+
+// Copied from Webpack: https://github.com/webpack/webpack/blob/f1bdec5cc70236083e45b665831d5d79d6485db7/lib/runtime/AutoPublicPathRuntimeModule.js#L75
+function getWebpackPublicPathFromScriptSrc(scriptUrl: string): string {
+    return scriptUrl
+        .replace(/^blob:/, "")
+        .replace(/#.*$/, "")
+        .replace(/\?.*$/, "")
+        .replace(/\/[^\/]+$/, "/");
+}
+
 if (ID) {
     window.addEventListener("message", (event) => {
         // We only accept messages from ourselves.

web/packages/extension/tsconfig.json

@@ -6,6 +6,6 @@
         "target": "es2021",
         "rootDir": "src",
     },
-    "include": ["src/**/*"],
+    "include": ["src/**/*", "global.d.ts"],
     "references": [{ "path": "../core" }],
 }