fix: restore compatibility with Safari 18

dessant · Sep 26, 2024 · 2de3409 · 2de3409
1 parent f46b754
commit 2de3409
Show file tree

Hide file tree

Showing 9 changed files with 218 additions and 41 deletions.
diff --git a/src/background/main.js b/src/background/main.js
@@ -31,7 +31,8 @@ import {
   getNetRequestRuleIds,
   getAppTheme,
   showPage,
-  getOpenerTabId
+  getOpenerTabId,
+  addTabRevision
 } from 'utils/app';
 import {
   getText,
@@ -1614,6 +1615,13 @@ async function processMessage(request, sender) {
     }
 
     return executeScript(params);
+  } else if (request.id === 'addStorageItem') {
+    const storageId = await registry.addStorageItem(
+      request.data,
+      request.params
+    );
+
+    return Promise.resolve(storageId);
   }
 }
 
@@ -1623,7 +1631,11 @@ async function processConnection(port) {
 
     await setMessagePort(id, port);
 
-    port.postMessage({transfer: {type: 'connection', complete: true, id}});
+    // Safari 18: messages sent from the runtime.onConnect event handler
+    // are no longer delivered, the message needs to be delayed.
+    self.setTimeout(function () {
+      port.postMessage({transfer: {type: 'connection', complete: true, id}});
+    }, 100);
   }
 }
 
@@ -1681,6 +1693,10 @@ async function onStartup() {
   await setup({event: 'startup'});
 }
 
+async function onTabReplaced(addedTabId, removedTabId) {
+  await addTabRevision({addedTabId, removedTabId});
+}
+
 function addContextMenuListener() {
   if (browser.contextMenus) {
     browser.contextMenus.onClicked.addListener(onContextMenuItemClick);
@@ -1719,6 +1735,14 @@ function addStartupListener() {
   browser.runtime.onStartup.addListener(onStartup);
 }
 
+function addTabReplacedListener() {
+  // Safari 18: tabId changes when an extension page is redirected
+  // to a website, changes are saved to assign tasks to the correct tab.
+  if (['safari'].includes(targetEnv)) {
+    browser.tabs.onReplaced.addListener(onTabReplaced);
+  }
+}
+
 async function setupUI() {
   const items = [setBrowserAction];
 
@@ -1775,6 +1799,7 @@ function init() {
   addAlarmListener();
   addInstallListener();
   addStartupListener();
+  addTabReplacedListener();
 
   setup();
 }

diff --git a/src/capture/App.vue b/src/capture/App.vue
@@ -25,6 +25,7 @@
 import Cropper from 'cropperjs';
 import {App, Button, IconButton, Snackbar} from 'vueton';
 
+import {validateId} from 'utils/app';
 import {getText} from 'utils/common';
 
 export default {
@@ -60,6 +61,31 @@ export default {
     setup: async function () {
       if (this.$env.isFirefox) {
         browser.runtime.onMessage.addListener(this.onMessage);
+
+        browser.runtime.sendMessage({
+          id: 'routeMessage',
+          setSenderFrameId: true,
+          messageFrameId: 0,
+          message: {id: 'saveFrameId'}
+        });
+      } else if (this.$env.isSafari) {
+        window.addEventListener('message', async ev => {
+          const messageId = ev.data;
+
+          if (validateId(messageId)) {
+            const message = await browser.runtime.sendMessage({
+              id: 'storageRequest',
+              asyncResponse: true,
+              saveReceipt: true,
+              storageId: messageId
+            });
+
+            if (message) {
+              this.onMessage(message);
+            }
+          }
+        });
+
         browser.runtime.sendMessage({
           id: 'routeMessage',
           setSenderFrameId: true,

diff --git a/src/confirm/App.vue b/src/confirm/App.vue
@@ -127,7 +127,8 @@ import {
   isPreviewImageValid,
   sendLargeMessage,
   processLargeMessage,
-  getAppTheme
+  getAppTheme,
+  validateId
 } from 'utils/app';
 import {getText} from 'utils/common';
 
@@ -363,6 +364,31 @@ export default {
     init: async function () {
       if (this.$env.isFirefox) {
         browser.runtime.onMessage.addListener(this.onMessage);
+
+        browser.runtime.sendMessage({
+          id: 'routeMessage',
+          setSenderFrameId: true,
+          messageFrameId: 0,
+          message: {id: 'saveFrameId'}
+        });
+      } else if (this.$env.isSafari) {
+        window.addEventListener('message', async ev => {
+          const messageId = ev.data;
+
+          if (validateId(messageId)) {
+            const message = await browser.runtime.sendMessage({
+              id: 'storageRequest',
+              asyncResponse: true,
+              saveReceipt: true,
+              storageId: messageId
+            });
+
+            if (message) {
+              this.processMessage(message);
+            }
+          }
+        });
+
         browser.runtime.sendMessage({
           id: 'routeMessage',
           setSenderFrameId: true,

diff --git a/src/content/main.js b/src/content/main.js
@@ -89,11 +89,27 @@ async function sendQueuedMessage() {
 
 async function messageView(message) {
   if (contentStorage.viewFrameId) {
-    await browser.runtime.sendMessage({
-      id: 'routeMessage',
-      messageFrameId: contentStorage.viewFrameId,
-      message
-    });
+    if (targetEnv === 'safari') {
+      const messageId = await browser.runtime.sendMessage({
+        id: 'addStorageItem',
+        data: message,
+        params: {
+          receipts: {expected: 1, received: 0},
+          expiryTime: 1.0,
+          area: 'memory'
+        }
+      });
+
+      contentStorage.viewFrame.contentWindow.postMessage(messageId, {
+        targetOrigin: browser.runtime.getURL('/')
+      });
+    } else {
+      await browser.runtime.sendMessage({
+        id: 'routeMessage',
+        messageFrameId: contentStorage.viewFrameId,
+        message
+      });
+    }
   } else if (contentStorage.viewMessagePort) {
     await sendLargeMessage({
       target: 'port',
@@ -167,7 +183,7 @@ function main() {
   addViewFrame();
 
   browser.runtime.onMessage.addListener(onMessage);
-  if (targetEnv !== 'firefox') {
+  if (!['firefox', 'safari'].includes(targetEnv)) {
     browser.runtime.onConnect.addListener(onConnect);
   }
 }

diff --git a/src/select/App.vue b/src/select/App.vue
@@ -15,6 +15,7 @@
 <script>
 import {App, IconButton, Snackbar} from 'vueton';
 
+import {validateId} from 'utils/app';
 import {getText} from 'utils/common';
 
 export default {
@@ -40,6 +41,42 @@ export default {
     setup: async function () {
       if (this.$env.isFirefox) {
         browser.runtime.onMessage.addListener(this.onMessage);
+
+        browser.runtime.sendMessage({
+          id: 'routeMessage',
+          setSenderFrameId: true,
+          messageFrameId: 0,
+          message: {id: 'saveFrameId'}
+        });
+      } else if (this.$env.isSafari) {
+        // Safari 18: extension pages loaded in iframes can no longer connect
+        // to the content script of the top-level document with tabs.connect,
+        // event handlers registered with runtime.onConnect
+        // in the content script are no longer called.
+
+        // Messages sent from the background script using tabs.sendMessage
+        // are still not received by the extension page in Safari, so we must
+        // notify the extension page from the content script using
+        // frame.contentWindow.postMessage to retrieve its message
+        // from the background script.
+
+        window.addEventListener('message', async ev => {
+          const messageId = ev.data;
+
+          if (validateId(messageId)) {
+            const message = await browser.runtime.sendMessage({
+              id: 'storageRequest',
+              asyncResponse: true,
+              saveReceipt: true,
+              storageId: messageId
+            });
+
+            if (message) {
+              this.onMessage(message);
+            }
+          }
+        });
+
         browser.runtime.sendMessage({
           id: 'routeMessage',
           setSenderFrameId: true,

diff --git a/src/storage/revisions/session/20240514122825_initial_version.js b/src/storage/revisions/session/20240514122825_initial_version.js
@@ -6,7 +6,8 @@ async function upgrade() {
   const changes = {
     platformInfo: null,
     menuChangeEvent: 0,
-    privateMenuChangeEvent: 0
+    privateMenuChangeEvent: 0,
+    tabRevisions: []
   };
 
   changes.storageVersion = revision;

diff --git a/src/utils/app.js b/src/utils/app.js
@@ -28,7 +28,8 @@ import {
   isAndroid,
   getDarkColorSchemeQuery,
   isValidTab,
-  getRandomInt
+  getRandomInt,
+  requestLock
 } from 'utils/common';
 import {
   targetEnv,
@@ -1821,9 +1822,13 @@ async function sendLargeMessage({
           messagePort = port;
           messagePort.onMessage.addListener(messageCallback);
 
-          messagePort.postMessage({
-            transfer: {type: 'connection', complete: true, id: transferId}
-          });
+          // Safari 18: messages sent from the runtime.onConnect event handler
+          // are no longer delivered, the message needs to be delayed.
+          self.setTimeout(function () {
+            messagePort.postMessage({
+              transfer: {type: 'connection', complete: true, id: transferId}
+            });
+          }, 100);
         }
       };
 
@@ -2100,6 +2105,43 @@ async function requestClipboardReadPermission() {
   return browser.permissions.request({permissions: ['clipboardRead']});
 }
 
+async function addTabRevision({addedTabId, removedTabId} = {}) {
+  return requestLock('tab_revisions', async () => {
+    const {tabRevisions} = await storage.get('tabRevisions', {area: 'session'});
+
+    let entryFound = false;
+
+    for (const tabIds of tabRevisions) {
+      if (tabIds.includes(removedTabId)) {
+        tabIds.push(addedTabId);
+
+        entryFound = true;
+        break;
+      }
+    }
+
+    if (!entryFound) {
+      tabRevisions.push([removedTabId, addedTabId]);
+    }
+
+    await storage.set({tabRevisions}, {area: 'session'});
+  });
+}
+
+async function getTabRevisions(tabId) {
+  return requestLock('tab_revisions', async () => {
+    const {tabRevisions} = await storage.get('tabRevisions', {area: 'session'});
+
+    for (const tabIds of tabRevisions) {
+      if (tabIds.includes(tabId)) {
+        return tabIds;
+      }
+    }
+
+    return null;
+  });
+}
+
 export {
   getEnabledEngines,
   getSupportedEngines,
@@ -2190,5 +2232,7 @@ export {
   getMaxExtensionMessageSize,
   getMaxDataUrlSize,
   hasClipboardReadPermission,
-  requestClipboardReadPermission
+  requestClipboardReadPermission,
+  addTabRevision,
+  getTabRevisions
 };
diff --git a/src/utils/common.js b/src/utils/common.js
@@ -818,6 +818,15 @@ function runOnce(name, func) {
   }
 }
 
+async function requestLock(name, func, {timeout = 60000} = {}) {
+  const params = [name];
+  if (timeout) {
+    params.push({signal: AbortSignal.timeout(timeout)});
+  }
+
+  return navigator.locks.request(...params, func);
+}
+
 function sleep(ms) {
   return new Promise(resolve => self.setTimeout(resolve, ms));
 }
@@ -871,5 +880,6 @@ export {
   filenameToFileExt,
   getStore,
   runOnce,
+  requestLock,
   sleep
 };