extension: When possible, replace script injection with content scripts

Author: danielhjacobs

web/packages/extension/src/background.ts

@@ -175,24 +175,35 @@ async function enable() {
         return;
     }
     if (!(await contentScriptRegistered())) {
+        const excludeMatches = [
+            "https://sso.godaddy.com/*", // See https://github.com/ruffle-rs/ruffle/pull/7146
+            "https://authentication.td.com/*", // See https://github.com/ruffle-rs/ruffle/issues/2158
+            "https://*.twitch.tv/*", // See https://github.com/ruffle-rs/ruffle/pull/8150
+            "https://www.tuxedocomputers.com/*", // See https://github.com/ruffle-rs/ruffle/issues/11906
+            "https://*.taobao.com/*", // See https://github.com/ruffle-rs/ruffle/pull/12650
+            "https://*.time4learning.com/*", // See https://github.com/ruffle-rs/ruffle/pull/16186
+            "https://*.edgenuity.com/*", // See https://github.com/ruffle-rs/ruffle/pull/16186
+            "https://www.chewy.com/*", // See https://github.com/ruffle-rs/ruffle/issues/18265
+            "https://*.duosecurity.com/*", // See https://github.com/ruffle-rs/ruffle/pull/18299
+            "https://*.tiktok.com/*", // See https://github.com/ruffle-rs/ruffle/pull/20250
+        ];
         await utils.scripting.registerContentScripts([
+            {
+                id: "ruffle",
+                js: ["dist/ruffle.js"],
+                persistAcrossSessions: true,
+                matches: ["<all_urls>"],
+                excludeMatches,
+                runAt: "document_start",
+                allFrames: true,
+                world: "MAIN",
+            },
             {
                 id: "plugin-polyfill",
                 js: ["dist/pluginPolyfill.js"],
                 persistAcrossSessions: true,
                 matches: ["<all_urls>"],
-                excludeMatches: [
-                    "https://sso.godaddy.com/*", // See https://github.com/ruffle-rs/ruffle/pull/7146
-                    "https://authentication.td.com/*", // See https://github.com/ruffle-rs/ruffle/issues/2158
-                    "https://*.twitch.tv/*", // See https://github.com/ruffle-rs/ruffle/pull/8150
-                    "https://www.tuxedocomputers.com/*", // See https://github.com/ruffle-rs/ruffle/issues/11906
-                    "https://*.taobao.com/*", // See https://github.com/ruffle-rs/ruffle/pull/12650
-                    "https://*.time4learning.com/*", // See https://github.com/ruffle-rs/ruffle/pull/16186
-                    "https://*.edgenuity.com/*", // See https://github.com/ruffle-rs/ruffle/pull/16186
-                    "https://www.chewy.com/*", // See https://github.com/ruffle-rs/ruffle/issues/18265
-                    "https://*.duosecurity.com/*", // See https://github.com/ruffle-rs/ruffle/pull/18299
-                    "https://*.tiktok.com/*", // See https://github.com/ruffle-rs/ruffle/pull/20250
-                ],
+                excludeMatches,
                 runAt: "document_start",
                 allFrames: true,
                 world: "MAIN",
@@ -222,7 +233,7 @@ async function disable() {
     }
     if (await contentScriptRegistered()) {
         await utils.scripting.unregisterContentScripts({
-            ids: ["plugin-polyfill", "4399"],
+            ids: ["ruffle", "plugin-polyfill", "4399"],
         });
     }
     await disableSWFTakeover();

web/packages/extension/src/content.ts

@@ -1,21 +1,10 @@
 /**
- * Pierce the extension sandbox by copying our code into main world.
  *
- * The isolation extension content scripts get is neat, but it causes problems
- * based on what browser you use:
- *
- * 1. On Chrome, you are explicitly banned from registering custom elements.
- * 2. On Firefox, you can register custom elements but they can't expose any
- *    useful API surface, and can't even see their own methods.
- *
- * This code exists to pierce the extension sandbox, while maintaining:
+ * This code provides a content script message listener that proxies messages
+ * into/from the main world.
  *
- * 1. The isolation of not interfering with the page's execution environment
- *    unintentionally.
- * 2. The ability to load extension resources such as .wasm files.
+ * On older Firefox, it also pierces the extension sandbox by copying our code into the main world
  *
- * We also provide a content script message listener that proxies messages
- * into/from the main world.
  */
 
 import * as utils from "./utils";
@@ -169,10 +158,9 @@ function isXMLDocument(): boolean {
             ?.filename !== "ruffle.js"
     ) {
         injectScriptRaw("%PLUGIN_POLYFILL_SOURCE%");
+        await injectScriptURL(utils.runtime.getURL("dist/ruffle.js"));
     }
 
-    await injectScriptURL(utils.runtime.getURL(`dist/ruffle.js?id=${ID}`));
-
     window.addEventListener("message", (event) => {
         // We only accept messages from ourselves.
         if (event.source !== window || !event.data) {

web/packages/extension/src/ruffle.ts

@@ -1,6 +1,16 @@
 import { Setup, setCurrentScriptURL } from "ruffle-core";
 import { Message } from "./messages";
 
+/**
+ *
+ * This script runs in the MAIN ExecutionWorld for the following reasons:
+ *
+ * 1. On Chrome, you are explicitly banned from registering custom elements.
+ * 2. On Firefox, you can register custom elements but they can't expose any
+ *    useful API surface, and can't even see their own methods.
+ *
+ */
+
 // Current message ID to be included in openInNewTab
 let currentMessageId: string | null = null;
 

web/packages/extension/webpack.config.js

@@ -104,7 +104,9 @@ export default function (/** @type {Record<string, any>} */ env, _argv) {
         },
         output: {
             path: url.fileURLToPath(new URL("assets/dist/", import.meta.url)),
-            publicPath: "auto",
+            // publicPath: "auto" throws for content scripts, which lack a script src
+            // This is changed at runtime to the full URL of the extension's /dist/ folder
+            publicPath: "/dist/",
             clean: true,
             assetModuleFilename: "assets/[name][ext][query]",
         },