如何在 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);
}