browser-extension - 使用 iFrame 中的 Kango API

Question

使用 Kango，我在页面中添加了 iFrame。此 iFrame 指向内部资源。我希望这个 iFrame 能够与后台脚本通信。我很想真正获得可从 iFrame 访问的 Kango API，但如果这不可能，我想知道如何使用内容脚本来定位这个 iFrame。

Answer 1

从 iFrame 内的应用程序中，您可以执行以下操作：

top.window.postMessage({ type: 'EVENT', data: {} }, "*");

然后在您的 Kango 扩展 HTML 链接中，一个 JS 文件具有：

KangoAPI.onReady(function () {
  window.addEventListener('message', function (event) {
    console.log('host.js -> message', event);
    kango.dispatchMessage('MessageToWindow', event);
  });

  document.body.onload = function () {
    try {
        document.getElementById('iFrameID').src = 'URL';
    } catch (ex) {
        throw ex;
    }
}
});

然后在 background.js 里面

kango.addMessageListener('MessageToWindow', function (event) {
  console.log('background.js -> MessageToWindow', event);
  kango.browser.tabs.getCurrent(function (tab) {
    console.log('background.js -> TAB', tab || 'NONE');
    console.log('background.js -> TYPE', event.data.data.type || 'NONE');
    console.log('background.js -> DATA', event.data.data.data || 'NONE');
    tab.dispatchMessage(event.data.data.type, event.data.data.data);
  });
});

最后，在 content.js 中

kango.addMessageListener('EVENT', function(event) {
  kango.console.log('got event');
});

看起来很多，但这是我可以让它工作的唯一方法。希望有帮助！