web: Automatically inject plugin-polyfill.ts into content.ts as a string.

The prior version of this code used a hardcoded copy of the script. Not only is this an outdated version of the code, this also caused us to fail our addons.mozilla.org audit.

web/packages/extension/package.json

@@ -6,8 +6,8 @@
     "private": true,
     "scripts": {
         "build": "npm run build:generic && npm run build:firefox",
-        "build:generic": "webpack --env generic && node tools/zip.js dist/ruffle_extension.zip",
-        "build:firefox": "webpack --env firefox && node tools/zip.js dist/firefox_unsigned.xpi && npm run sign-firefox",
+        "build:generic": "webpack --env generic && node tools/inject_plugin_polyfill.js && node tools/zip.js dist/ruffle_extension.zip",
+        "build:firefox": "webpack --env firefox && node tools/inject_plugin_polyfill.js && node tools/zip.js dist/firefox_unsigned.xpi && npm run sign-firefox",
         "sign-firefox": "node tools/sign_xpi.js dist/firefox_unsigned.xpi dist/firefox.xpi"
     },
     "dependencies": {

web/packages/extension/src/content.ts

@@ -141,10 +141,10 @@ function isXMLDocument(): boolean {
 
     // We must run the plugin polyfill before any flash detection scripts.
     // Unfortunately, this might still be too late for some websites when using Chrome (issue #969).
-    // TODO: use plugin-polyfill.ts
-    injectScriptRaw(
-        '(function(){class RuffleMimeType{constructor(a,b,c){this.type=a,this.description=b,this.suffixes=c}}class RuffleMimeTypeArray{constructor(a){this.__mimetypes=[],this.__named_mimetypes={};for(let b of a)this.install(b)}install(a){let b=this.__mimetypes.length;this.__mimetypes.push(a),this.__named_mimetypes[a.type]=a,this[a.type]=a,this[b]=a}item(a){return this.__mimetypes[a]}namedItem(a){return this.__named_mimetypes[a]}get length(){return this.__mimetypes.length}}class RufflePlugin extends RuffleMimeTypeArray{constructor(a,b,c,d){super(d),this.name=a,this.description=b,this.filename=c}install(a){a.enabledPlugin||(a.enabledPlugin=this),super.install(a)}}class RufflePluginArray{[Symbol.iterator](){return this.__plugins[Symbol.iterator]()}constructor(a){this.__plugins=[],this.__named_plugins={};for(let b of a)this.install(b)}install(a){let b=this.__plugins.length;this.__plugins.push(a),this.__named_plugins[a.name]=a,this[a.name]=a,this[b]=a}item(a){return this.__plugins[a]}namedItem(a){return this.__named_plugins[a]}refresh(){}get length(){return this.__plugins.length}}const FLASH_PLUGIN=new RufflePlugin("Shockwave Flash","Shockwave Flash 32.0 r0","ruffle.js",[new RuffleMimeType("application/futuresplash","Shockwave Flash","spl"),new RuffleMimeType("application/x-shockwave-flash","Shockwave Flash","swf"),new RuffleMimeType("application/x-shockwave-flash2-preview","Shockwave Flash","swf"),new RuffleMimeType("application/vnd.adobe.flash.movie","Shockwave Flash","swf")]);function install_plugin(a){navigator.plugins.install||Object.defineProperty(navigator,"plugins",{value:new RufflePluginArray(navigator.plugins),writable:!1}),navigator.plugins.install(a),0<a.length&&!navigator.mimeTypes.install&&Object.defineProperty(navigator,"mimeTypes",{value:new RuffleMimeTypeArray(navigator.mimeTypes),writable:!1});for(var b=0;b<a.length;b+=1)navigator.mimeTypes.install(a[b])}install_plugin(FLASH_PLUGIN);})();'
-    );
+    // NOTE: The script code injected here is the compiled form of
+    // plugin-polyfill.ts. It is injected by tools/inject_plugin_polyfill.js
+    // which just search-and-replaces for this particular string.
+    injectScriptRaw("%PLUGIN_POLYFILL_SOURCE%");
 
     await injectScriptURL(utils.runtime.getURL(`dist/ruffle.js?id=${ID}`));
 

web/packages/extension/tools/inject_plugin_polyfill.js

@@ -0,0 +1,16 @@
+import replace from "replace-in-file";
+import fs from "fs";
+
+// Search-and-replace the manual polyfill injection with the actual code it
+// needs to insert.
+const plugin_polyfill_source = fs
+    .readFileSync("assets/dist/pluginPolyfill.js", "utf8")
+    .replaceAll("\r", "\\r")
+    .replaceAll("\n", "\\n")
+    .replaceAll('"', '\\"');
+
+replace.sync({
+    files: "./assets/dist/content.js",
+    from: [/%PLUGIN_POLYFILL_SOURCE%/g],
+    to: plugin_polyfill_source,
+});