create both cross-frame ports in the background

on Chrome (currently 117), the port created in the content script with
runtime.connect does not properly receive an onDisconnect event when
the service worker sleeps. the port created in the background with
tabs.connect does receive the event, so create both ports with
tabs.connect.

fixes #241.

2 files changed, 22 insertions, 13 deletions

diff --git a/ext/js/comm/api.js b/ext/js/comm/api.js
index de12bb6c..72d2ba07 100644
--- a/ext/js/comm/api.js
+++ b/ext/js/comm/api.js
@@ -181,6 +181,10 @@ class API {
         return this._invoke('loadExtensionScripts', {files});
     }
 
+    openCrossFramePort(targetTabId, targetFrameId) {
+        return this._invoke('openCrossFramePort', {targetTabId, targetFrameId});
+    }
+
     // Utilities
 
     _createActionPort(timeout=5000) {
diff --git a/ext/js/comm/cross-frame-api.js b/ext/js/comm/cross-frame-api.js
index 7892eb4c..fb2a1718 100644
--- a/ext/js/comm/cross-frame-api.js
+++ b/ext/js/comm/cross-frame-api.js
@@ -224,10 +224,13 @@ class CrossFrameAPI {
         this._commPorts = new Map();
         this._messageHandlers = new Map();
         this._onDisconnectBind = this._onDisconnect.bind(this);
+        this._tabId = null;
+        this._frameId = null;
     }
 
-    prepare() {
+    async prepare() {
         chrome.runtime.onConnect.addListener(this._onConnect.bind(this));
+        ({tabId: this._tabId, frameId: this._frameId} = await yomichan.api.frameInformationGet());
     }
 
     invoke(targetFrameId, action, params={}) {
@@ -235,8 +238,8 @@ class CrossFrameAPI {
     }
 
     async invokeTab(targetTabId, targetFrameId, action, params={}) {
-        if (typeof targetTabId !== 'number') { targetTabId = null; }
-        const commPort = this._getOrCreateCommPort(targetTabId, targetFrameId);
+        if (typeof targetTabId !== 'number') { targetTabId = this._tabId; }
+        const commPort = await this._getOrCreateCommPort(targetTabId, targetFrameId);
         return await commPort.invoke(action, params, this._ackTimeout, this._responseTimeout);
     }
 
@@ -265,8 +268,8 @@ class CrossFrameAPI {
             }
             if (details.name !== 'cross-frame-communication-port') { return; }
 
-            const otherTabId = details.sourceTabId;
-            const otherFrameId = details.sourceFrameId;
+            const otherTabId = details.otherTabId;
+            const otherFrameId = details.otherFrameId;
             this._setupCommPort(otherTabId, otherFrameId, port);
         } catch (e) {
             port.disconnect();
@@ -297,14 +300,16 @@ class CrossFrameAPI {
         return this._createCommPort(otherTabId, otherFrameId);
     }
 
-    _createCommPort(otherTabId, otherFrameId) {
-        const details = {
-            name: 'background-cross-frame-communication-port',
-            targetTabId: otherTabId,
-            targetFrameId: otherFrameId
-        };
-        const port = yomichan.connect(null, {name: JSON.stringify(details)});
-        return this._setupCommPort(otherTabId, otherFrameId, port);
+    async _createCommPort(otherTabId, otherFrameId) {
+        await yomichan.api.openCrossFramePort(otherTabId, otherFrameId);
+
+        const tabPorts = this._commPorts.get(otherTabId);
+        if (typeof tabPorts !== 'undefined') {
+            const commPort = tabPorts.get(otherFrameId);
+            if (typeof commPort !== 'undefined') {
+                return commPort;
+            }
+        }
     }
 
     _setupCommPort(otherTabId, otherFrameId, port) {