Unity WebGL Loader from Zip with CrazyGames SDK Shim

Open In Editor Publish Your Code

setTimeout(() => {
      const fakeInit = {
        gameLink: "https://www.crazygames.com/game/blocky-demolition-derby",
        userInfo: {
          countryCode: "US",
          locale: "en-US",
          device: { type: "desktop" },
          os: { name: "Windows", version: "10" },
          browser: { name: "Chrome", version: "140.0.0.0" }
        }
      };

window.unityGameInstance?.SendMessage("CrazySDK", "InitCallback", JSON.stringify(fakeInit));

window.unityGameInstance?.SendMessage("CrazySDK", "AdblockNotDetected", undefined);

console.log("[Shim] InitCallback + AdblockNotDetected sent to Unity");
    }, 200);
  };

window.Crazygames.requestAd = (adType) => {
    console.log("[Shim] Crazygames.requestAd called with type:", adType);
	
	
	window.tre()

setTimeout(() => {
      console.log("[Shim] Sending AdEvent -> adStarted");
      window.unityGameInstance?.SendMessage("CrazySDK", "AdEvent", "adStarted");
    }, 200);

setTimeout(() => {
      console.log("[Shim] Sending AdEvent -> adFinished");
      window.unityGameInstance?.SendMessage("CrazySDK", "AdEvent", "adFinished");
    }, 2000);

setTimeout(() => {
      if (adType === "rewarded") {
        console.log("[Shim] Sending AdEvent -> adCompleted (reward granted)");
        window.unityGameInstance?.SendMessage("CrazySDK", "AdEvent", "adCompleted");
      }
    }, 2200);

setTimeout(() => {
      console.log("[Shim] Sending AdEvent -> adError (requested too soon)");
      window.unityGameInstance?.SendMessage("CrazySDK", "AdEvent", "adError");
    }, 100); 
  };

window.CrazySDK.init = (options) => window.Crazygames.init(options);
  window.CrazySDK.requestAd = (type) => window.Crazygames.requestAd(type);

console.log("[Shim] Fake CrazyGames SDK installed");
})();
</script>

async function unzipWebpFromExternalBins(binUrls) {
    const blobUrls = {};
    const bytes = await fetchAndCombineZip(binUrls);
    const zip = await JSZip.loadAsync(bytes);
    for (const [filename, file] of Object.entries(zip.files)) {
        if (!file.dir) {
            let mime = '';
            if (filename.endsWith('.js') || filename.endsWith('.mjs')) {
                mime = 'text/javascript';
            } else if (filename.endsWith('.css')) {
                mime = 'text/css';
            } else if (filename.endsWith('.html')) {
                mime = 'text/html';
            } else if (filename.includes('f03e20d9219dd22f67b6f4bd33adbda5')) {
                mime = 'application/wasm';
            } 
            else if (filename.includes('fedbc538846e3b0df494062af3ca437f')) {
                mime = 'application/javascript';
            }
            else if (filename.endsWith('.png')) {
                mime = 'image/png';
            } else if (filename.endsWith('.jpg') || filename.endsWith('.jpeg')) {
                mime = 'image/jpeg';
            }
			else if (filename.endsWith('.wasm') ) {
                mime = 'application/wasm';
            }
            const rawBlob = await file.async("blob");
            const blob = mime ? new Blob([rawBlob], { type: mime }) : rawBlob;
            const blobUrl = URL.createObjectURL(blob);
            console.log("Extracted:", filename);
            blobUrls[filename] = blobUrl;
        }
    }
    return blobUrls;
}

let blobUrlss = "";
let binParts = [
  "par_1.bin",
  "par_2.bin"
];

unzipWebpFromExternalBins(binParts).then(blobUrls => {

blobUrlss = blobUrls;
    const ORIGINAL_CREATE_ELEMENT = document.createElement;
    const ORIGINAL_SET_ATTRIBUTE = Element.prototype.setAttribute;

document.createElement = function(tagName) {
        const el = ORIGINAL_CREATE_ELEMENT.call(this, tagName);

if (tagName.toLowerCase() === 'script') {
            Object.defineProperty(el, 'src', {
                set(newSrc) {
                    const filename = extractFilename(newSrc);
                    const replacement = blobUrlss[filename];
                    if (replacement) {
                        
                        ORIGINAL_SET_ATTRIBUTE.call(el, 'src', replacement);
                    } else {
                        ORIGINAL_SET_ATTRIBUTE.call(el, 'src', newSrc);
                    }
                },
                get() {
                    return el.getAttribute('src');
                },
                configurable: true
            });
        }

return el;
    };

Element.prototype.setAttribute = function(name, value) {
        if (this.tagName === 'SCRIPT' && name === 'src') {
            const filename = extractFilename(value);
            const replacement = blobUrlss[filename];
            if (replacement) {
             
                return ORIGINAL_SET_ATTRIBUTE.call(this, name, replacement);
            }
        }

return ORIGINAL_SET_ATTRIBUTE.call(this, name, value);
    };

function extractFilename(url) {
        try {
            return new URL(url, location.href).pathname.split('/').pop();
        } catch {
            return url.split('/').pop(); 
        }
    }

const imageSrcDescriptor = Object.getOwnPropertyDescriptor(Image.prototype, 'src');
Object.defineProperty(Image.prototype, 'src', {
  set(value) {
    const newURL = rewriteURL(value);
    imageSrcDescriptor.set.call(this, newURL);
  },
  get: imageSrcDescriptor.get,
  configurable: true,
  enumerable: true,
});

const scriptSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, 'src');
Object.defineProperty(HTMLScriptElement.prototype, 'src', {
  set(value) {
    const newURL = rewriteURL(value);
    scriptSrcDescriptor.set.call(this, newURL);
  },
  get: scriptSrcDescriptor.get,
  configurable: true,
  enumerable: true,
});

const linkHrefDescriptor = Object.getOwnPropertyDescriptor(HTMLLinkElement.prototype, 'href');
Object.defineProperty(HTMLLinkElement.prototype, 'href', {
  set(value) {
    const newURL = rewriteURL(value);
    linkHrefDescriptor.set.call(this, newURL);
  },
  get: linkHrefDescriptor.get,
  configurable: true,
  enumerable: true,
});

const mediaSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'src');
Object.defineProperty(HTMLMediaElement.prototype, 'src', {
  set(value) {
    const newURL = rewriteURL(value);
    mediaSrcDescriptor.set.call(this, newURL);
  },
  get: mediaSrcDescriptor.get,
  configurable: true,
  enumerable: true,
});

// fetch
const originalFetch = window.fetch;
window.fetch = function(resource, init) {

if (typeof resource === "string") {
  //console.log(resource)
    resource = rewriteURL(resource);
  } else if (resource instanceof Request) {
    resource = new Request(rewriteURL(resource.url), resource);
  }
  return originalFetch.call(this, resource, init);
};

// XMLHttpRequest
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url, ...rest) {
  const newURL = rewriteURL(url);
  return originalOpen.call(this, method, newURL, ...rest);
};

const OriginalAudio = window.Audio;
window.Audio = function(src) {
  const audio = new OriginalAudio();
  if (src) {
    audio.src = rewriteURL(src);
  }
  return audio;
};
window.Audio.prototype = OriginalAudio.prototype;

function rewriteURL(original) {
  var trimmed = original.split("/").pop();
  //console.log(trimmed)
  if (trimmed.includes("?")) trimmed = trimmed.split("?")[0]
  return blobUrlss[trimmed] || original;
}

UnityLoader.instantiate(
            "unity-container",
            buildUrl,
            {
                onProgress: (unityInstance, progress) => {
                    console.log("Loading progress:", progress);
                },
                
            }
        );
});
    </script>

</body>
</html>

Unity WebGL Loader from Zip with CrazyGames SDK Shim

Recommended

HTML Phone Number Input Form with Plus Button

Cinematic Portfolio Website with Tailwind CSS & GSAP

Clicker Game with Upgrades and Rebirth System

HTML

CSS

JS

Recommended

HTML Phone Number Input Form with Plus Button

Cinematic Portfolio Website with Tailwind CSS & GSAP

Clicker Game with Upgrades and Rebirth System

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS