如何在 safari 應用程序和從 safari 應用程序擴展資源文件夾加載的 html 頁面之間進行通信

Question

我正在嘗試構建一個簡單的 safari 應用擴展。 在about:blank我從擴展的資源文件夾中加載了一個 html 頁面。 以下是代碼。

//script.js - injected script
if(window.location.href=="about:blank"){
    window.location.href = safari.extension.baseURI + "page.html";
}

我想要這個加載的頁面和 safari 應用程序之間的通信。 顯然注入的腳本script.js在加載的 html 頁面上不可用。

我嘗試將script.js鏈接到 html 頁面內聯，但safari對象本身不適用於safari.extension.dispatchMessage或safari.self.addEventListener 。

編輯：
有了這個（注入的腳本 script.js 在加載的 html 頁面/選項卡上不可用）我的意思是在資源選項卡中打開 web 檢查器時，我們看不到任何extension scripts

Answer 1

如果我正確理解您的問題，您需要在頁面的 javascript 和 Safari 應用程序擴展的本機主機應用程序之間進行通信。 只能使用 API safari.extension.dispatchMessage聯系宿主應用程序，該 API 只能從注入的script.js腳本訪問，而不能從頁面的 JS 訪問。

您可以通過從頁面發送請求事件並注冊響應事件來解決此問題。 您的 HTML 頁面將包含腳本：

function sendEventToInjected() {
    var storeEvent = new CustomEvent('myCustomEvent', {"detail": "testData"});
    document.dispatchEvent(storeEvent);

    var responseEventID = 'myResponseEvent';
    document.addEventListener(responseEventID, function respListener(event)
    {
        console.log("Got data from injected script: " + event.detail);
        document.removeEventListener(responseEventID, respListener);
    });
}

您的script.js將通過注冊事件偵聽器來捕獲此事件，然后可以將數據傳遞給擴展的本機主機應用程序。 獲取到本地主機的響應后，可以將響應事件調度回頁面。

document.addEventListener("myCustomEvent", function(event) {
    console.log("myCustomEvent:" + event.detail);
    safari.extension.dispatchMessage(event.detail);
});

// Listens for messages sent from the app extension's Swift code.
safari.self.addEventListener("message", messageHandler);

function messageHandler(event)
{
    var resp = {detail: "respData"};
    var respEvent = new CustomEvent('myResponseEvent', resp);
    document.dispatchEvent(respEvent);
}

Answer 2

您可能不會將頁面“重新定位”到 safari-extensions:// url，而是從 Safari App Extension 獲取要顯示的 HTML 代碼（使用消息傳遞），然后將代碼插入 about:blank 頁面。 結果將是相同的，除了頁面 url 將保持 about:blank

Answer 3

這看起來像是Apple的錯誤。 我已經向 BugReporter 提交了一份。

Answer 4

您可以向 HTML 添加零高度iframe以“強制注入”擴展腳本。

<!DOCTYPE html>
<html lang=en>
   <head>
      <title>My Extension!</title>
   </head>
   <body>
      <noscript><strong>We're sorry but App doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
      <p>Hi!</p>
      <iframe id="myID" src="https://example.com" height="0" style="border: none;"></iframe>
   </body>
</html>

這是可能的JS：

function handleMessage(event) {
    console.log(event.name);
    console.log(event.message);
}

if (window.top === window) {
   document.addEventListener("DOMContentLoaded", function(event) {
       console.log("[app] Content loaded: main");
       safari.extension.dispatchMessage("Hello from Main!");
       safari.self.addEventListener("message", handleMessage);
   });
} else {
   document.addEventListener("DOMContentLoaded", function(event) {
       console.log("[app] Content loaded: iframe");
       safari.extension.dispatchMessage("Hello from iframe!");
       safari.self.addEventListener("message", handleMessage);
   });
}

結果：

如何在 safari 應用程序和從 safari 應用程序擴展資源文件夾加載的 html 頁面之間進行通信

問題描述

4 個解決方案

解決方案1
2 2018-09-26 15:00:17

解決方案2
0 2018-09-28 12:40:31

解決方案3
0 2019-01-26 19:54:06

解決方案4
0 2021-01-05 00:51:33

如何在 safari 應用程序和從 safari 應用程序擴展資源文件夾加載的 html 頁面之間進行通信

問題描述

4 個解決方案

解決方案1 2 2018-09-26 15:00:17

解決方案2 0 2018-09-28 12:40:31

解決方案3 0 2019-01-26 19:54:06

解決方案4 0 2021-01-05 00:51:33

解決方案1
2 2018-09-26 15:00:17

解決方案2
0 2018-09-28 12:40:31

解決方案3
0 2019-01-26 19:54:06

解決方案4
0 2021-01-05 00:51:33