GH-155: Added ability to open external iframes in their own tab.

src/css/iframe-wrapper.css

@@ -0,0 +1,13 @@
+a.gamepad-navigator-iframe-wrapper {
+    display: block;
+    height: max-content;
+    margin: 0;
+    padding: 0;
+    width: max-content;
+}
+
+a.gamepad-navigator-iframe-wrapper:focus {
+    background-color: white;
+    border: 3px dashed white;
+    mix-blend-mode: difference;
+}

src/js/content_scripts/input-mapper-base.js

@@ -40,6 +40,10 @@ https://github.com/fluid-lab/gamepad-navigator/blob/main/LICENSE
             "prefs.controlsOnAllMedia": {
                 func: "{that}.updateMediaControls",
                 args: [true] // performFullUpdate
+            },
+            "prefs.linkExternalIframes": {
+                func: "{that}.updateExternalIframes",
+                args: [true] // performFullUpdate
             }
         },
         listeners: {
@@ -67,6 +71,10 @@ https://github.com/fluid-lab/gamepad-navigator/blob/main/LICENSE
                 funcName: "gamepad.inputMapper.base.updateMediaControls",
                 args: ["{that}", "{arguments}.0"] // performFullUpdate
             },
+            updateExternalIframes: {
+                funcName: "gamepad.inputMapper.base.updateExternalIframes",
+                args: ["{that}", "{arguments}.0"] // performFullUpdate
+            },
             produceNavigation: {
                 funcName: "gamepad.inputMapper.base.produceNavigation",
                 args: ["{that}", "{arguments}.0"]
@@ -326,6 +334,7 @@ https://github.com/fluid-lab/gamepad-navigator/blob/main/LICENSE
 
     gamepad.inputMapper.base.handleDOMMutation = function (that) {
         that.updateMediaControls();
+        that.updateExternalIframes();
 
         gamepad.inputMapper.base.listenForFullscreenChanges(that);
 
@@ -403,6 +412,59 @@ https://github.com/fluid-lab/gamepad-navigator/blob/main/LICENSE
         }
     };
 
+    gamepad.inputMapper.base.updateExternalIframes = function (that, performFullUpdate) {
+        if (that.model.prefs.linkExternalIframes) {
+            gamepad.inputMapper.base.wrapExternalIframes();
+        }
+        else if (performFullUpdate) {
+            gamepad.inputMapper.base.unwrapExternalIframes();
+        }
+    };
+
+    gamepad.inputMapper.base.wrapExternalIframes = function () {
+        var iframeElements = document.querySelectorAll("iframe");
+        for (var iframeIndex = 0; iframeIndex < iframeElements.length; iframeIndex++) {
+            var iframeElement = iframeElements[iframeIndex];
+            if (!iframeElement.currentDocument) {
+                gamepad.inputMapper.base.wrapIframeElement(iframeElement);
+            }
+        }
+    };
+
+    gamepad.inputMapper.base.unwrapExternalIframes = function () {
+        var wrapperElements = document.querySelectorAll("a.gamepad-navigator-iframe-wrapper");
+        for (var wrapperIndex = 0; wrapperIndex < wrapperElements.length; wrapperIndex++) {
+            var wrapperElement = wrapperElements[wrapperIndex];
+            gamepad.inputMapper.base.unwrapIframeElement(wrapperElement);
+        }
+    };
+
+    gamepad.inputMapper.base.wrapIframeElement = function (iframeElement) {
+        if (!iframeElement.parentElement.classList.contains("gamepad-navigator-iframe-wrapper")) {
+            var src = iframeElement.getAttribute("src");
+            if (src && src.length) {
+                var wrapper = document.createElement("a");
+                wrapper.classList.add("gamepad-navigator-iframe-wrapper");
+                wrapper.setAttribute("href", src);
+
+                var iframeTitle = iframeElement.getAttribute("title");
+
+                var anchorAlt = iframeTitle && iframeTitle.length ? iframeTitle : "Open iframe content";
+                wrapper.setAttribute("alt", anchorAlt);
+
+                iframeElement.parentElement.insertBefore(wrapper, iframeElement);
+
+                wrapper.appendChild(iframeElement);
+            }
+        }
+    };
+
+    gamepad.inputMapper.base.unwrapIframeElement = function (wrapperElement) {
+        var iframeElement = wrapperElement.removeChild(wrapperElement.firstElementChild);
+        wrapperElement.parentElement.insertBefore(iframeElement, wrapperElement);
+        wrapperElement.remove();
+    };
+
     gamepad.inputMapper.base.vibrate = function (that) {
         if (that.model.prefs.vibrate) {
             var gamepads = that.options.windowObject.navigator.getGamepads();

src/js/settings/prefsPanel.js

@@ -147,6 +147,17 @@ https://github.com/fluid-lab/gamepad-navigator/blob/main/LICENSE
                         checked: "{gamepad.settings.ui.prefsPanel}.model.draftPrefs.fixFocus"
                     }
                 }
+            },
+            linkExternalIframes: {
+                container: "{that}.dom.body",
+                type: "gamepad.ui.prefs.toggle",
+                options: {
+                    model: {
+                        label: "Link External iframes",
+                        description: "Iframe elements embed content from other pages.  If these pages are hosted on other sites, the gamepad navigator can't control them directly.  If this setting is on, uncontrollable iframes will be wrapped in a link that can be used to open the content.",
+                        checked: "{gamepad.settings.ui.prefsPanel}.model.draftPrefs.linkExternalIframes"
+                    }
+                }
             }
         }
     });

src/js/shared/prefs.js

@@ -18,6 +18,7 @@ https://github.com/fluid-lab/gamepad-navigator/blob/main/LICENSE
         arrowModals: true,
         controlsOnAllMedia: true,
         fixFocus: false,
+        linkExternalIframes: true,
         newTabOrWindowURL: "https://www.google.com/",
         openWindowOnStartup: true,
         pollingFrequency: 50,

src/manifest.json

@@ -15,7 +15,10 @@
             "matches": [
                 "<all_urls>"
             ],
-            "css": ["css/focus-fix.css"],
+            "css": [
+                "css/focus-fix.css",
+                "css/iframe-wrapper.css"
+            ],
             "js": [
                 "js/lib/infusion/infusion-all.js",
                 "js/lib/ally/ally.min.js",