web: Fix extension webpack import not working (close #10981)

web/packages/core/src/current-script.ts

@@ -10,7 +10,7 @@ try {
         "src" in document.currentScript &&
         document.currentScript.src !== ""
     ) {
-        let src = document.currentScript.src;
+        let src = getScriptOriginalSrc(document.currentScript);
 
         // CDNs allow omitting the filename. If it's omitted, append a slash to
         // prevent the last component from being dropped.
@@ -24,3 +24,31 @@ try {
 } catch (_e) {
     console.warn("Unable to get currentScript URL");
 }
+
+/**
+ *
+ * Obtain the origin src content according to the running environment of the \<script\> node
+ *
+ * @param script \<script\> node instance
+ *
+ * @returns \<script\> node origin src
+ */
+function getScriptOriginalSrc(script: HTMLScriptElement): string {
+    const scriptUrl = script.src;
+    const scriptUrlPolyfill = script.getAttribute("ruffle-src-polyfill");
+    // Reset webkit mask url should be safe
+    if (scriptUrlPolyfill && "webkit-masked-url://hidden/" === scriptUrl) {
+        try {
+            const currentPolyfillURL = new URL(".", scriptUrlPolyfill);
+            const isExtensionUrl =
+                currentPolyfillURL.protocol.includes("extension");
+            // Only apply to extension
+            if (isExtensionUrl) {
+                return scriptUrlPolyfill;
+            }
+        } catch {
+            // Fallback to itself src
+        }
+    }
+    return scriptUrl;
+}

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/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/ruffle.ts

@@ -28,16 +28,17 @@ function handleMessage(message: Message) {
 }
 
 let ID: string | null = null;
-if (document.currentScript !== undefined && document.currentScript !== null) {
-    if ("src" in document.currentScript && document.currentScript.src !== "") {
+if (document.currentScript instanceof HTMLScriptElement) {
+    polyfillCurrentScriptWebpackPublicPath();
+    if (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,44 @@ function openInNewTab(swf: URL): void {
     window.postMessage(message, "*");
 }
 
+/**
+ * We are overriding the publicPath automatically configured by webpack here because the browser might mask the script's src attribute (for example, Safari 16+ may mask the script.src of an extension as webkit-masked-url://hidden/).
+ */
+function polyfillCurrentScriptWebpackPublicPath(): void {
+    const script = document.currentScript as HTMLScriptElement;
+    try {
+        const scriptUrlPolyfill = script.getAttribute("ruffle-src-polyfill");
+        if (!scriptUrlPolyfill) {
+            return;
+        }
+        const scriptUrl = script.src;
+        const scriptAutoPublicPath =
+            getWebpackPublicPathFromScriptSrc(scriptUrl);
+
+        if (
+            scriptUrl === "webkit-masked-url://hidden/" &&
+            __webpack_public_path__ === scriptAutoPublicPath
+        ) {
+            const polyfillPath =
+                getWebpackPublicPathFromScriptSrc(scriptUrlPolyfill);
+            // TODO: If there are other scripts that need to be dynamically created and executed, the current polyfill logic should also be applied.
+            __webpack_public_path__ = polyfillPath;
+        }
+        // TODO: Process other situations when mask url not webkit-masked-url://hidden/
+    } catch (_) {
+        // Continue to run
+    }
+}
+
+// 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.