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');
});

たくさんのように思えますが、これが私がそれを機能させる唯一の方法でした。それが役立つことを願っています!