Add webcomponents polyfill and load official framework API script

ext/src/shim/content.ts

@@ -3,6 +3,15 @@
 import { Message } from "../types";
 import { onMessageResponse, sendMessage } from "./messageBridge";
 
+
+if ((window as any)._isFramework) {
+    const polyfillScriptElement = document.createElement("script");
+    polyfillScriptElement.src = browser.runtime.getURL(
+            "vendor/webcomponents-lite.js")
+    document.head.append(polyfillScriptElement);
+}
+
+
 // Message ports
 const backgroundPort = browser.runtime.connect({ name: "shim" });
 let popupPort: browser.runtime.Port;

ext/src/shim/index.ts

@@ -13,6 +13,22 @@ if (!_window.chrome) {
 
 _window.chrome.cast = cast;
 
+
+const CAST_FRAMEWORK_SCRIPT_URL =
+        "https://www.gstatic.com/cast/sdk/libs/sender/1.0/cast_framework.js";
+
+let bridgeInfo: any;
+let scriptLoaded = false;
+
+// Call page's API loaded function if defined
+function callPageReadyFunction () {
+    const readyFunction = _window.__onGCastApiAvailable;
+    if (readyFunction && typeof readyFunction === "function") {
+        readyFunction(bridgeInfo && bridgeInfo.isVersionCompatible);
+    }
+}
+
+
 /**
  * If loaded within a page via a <script> element,
  * document.currentScript should exist and we can check its
@@ -29,9 +45,24 @@ if (document.currentScript) {
             _window.cast = {};
         }
 
+        const scriptElement = document.createElement("script");
+        scriptElement.src = CAST_FRAMEWORK_SCRIPT_URL;
+        (document.head || document.documentElement).append(scriptElement);
+
+        scriptElement.addEventListener("load", ev => {
+            if (bridgeInfo) {
+                callPageReadyFunction();
+            }
+
+            scriptLoaded = true;
+        });
+
+        /*
+        // TODO: Finish cast.framework and replace Google's implementation
         import("./framework").then(framework => {
             _window.cast.framework = framework.default;
         });
+        */
     }
 }
 
@@ -39,12 +70,10 @@ if (document.currentScript) {
 onMessage(message => {
     switch (message.subject) {
         case "shim:/initialized": {
-            const bridgeInfo = message.data;
+            bridgeInfo = message.data;
 
-            // Call page's API loaded function if defined
-            const readyFunction = _window.__onGCastApiAvailable;
-            if (readyFunction && typeof readyFunction === "function") {
-                readyFunction(bridgeInfo && bridgeInfo.isVersionCompatible);
+            if (!scriptLoaded) {
+                callPageReadyFunction();
             }
 
             break;