Saturday, March 17, 2018

Unity Game (WebGL) as a Firefox Extension

Firefox is known for its' extensions. That's in fact one of the main reasons people still use it. They had to take a bunch of bold steps in the recent times to stay relavant, like ending support for older extensions, changing the security model and the api.

Firefox  announced a new contest for addons, The Firefox Quantum Extensions challenge. I thought ill' give it a shot. I quickly looked up the documentation for creating an extension and looked pretty simple, there was this game for 2048 i was super excited to put games as extension, quick access short games might workout  i thought.. I wanted to check if i could use my existing game dev tools to create an extension.. hence Unity for FF Extension.

I quickly exported unity game as WebGL and tried loading it as an extension. I ran into issues with something called CSP i don't remember seeing it before but here it was preventing me from loading the unity webgl game as firefox extension. After a bunch of mucking around and not finding any straightforward answer i was able to get it working here it is for anybody else who might be looking for the same.

Three important parts for this (Get the starter code from GitHub)
  • Move the inline script from index.html to a separate file
  • Create a background script for FF addon that will open a new window through "BrowserAction"
  • Allow "blob:" support in the  security policy through manifest.json

Modify the index.html exported by UnityWebGL
The inline script is moved to a separate file called game_loader.js
The next thing to do is to add the right security policy to the manifest.json so that the unity loader can load the script blob.

The background script popuptest.js should be handling the browser action click event to launch a new window and load the games' index.html

With these things done, you should be able to load a unity game exported as webgl should be usable as a firefox extension.