iframeのgoogle hangout情報の更新を検知し処理したい。

Question

Chromeのアドオンでwebページ内にiframeで存在するgoogle hangoutの情報が更新されたら通知するようにしたいです。
JavaScriptのObserverで監視し、更新されたら、別の動作をさせようとしているのですが、メッセージを更新しても監視後の動きに入りません。
idが取れているのでiframeが完全に読み終わったときに作動させるところまではうまくいっているはずですが、方法についてご教授ください。

window.addEventListener("load", main, false);

function main(e) {
const jsInitCheckTimer = setInterval(jsLoaded, 1000);
function jsLoaded() {
if (document.querySelectorAll('[id^="wb"]').length > 1) {
clearInterval(jsInitCheckTimer);
const iframeElem = document.querySelectorAll('[id^="wb"]');
const target = iframeElem[0];
const iframeDocument = target.document;
const iframeDocument = target.contentDocument;
console.log(target.id);
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
alert("Google hangoutに新しいお知らせが到着しました。");
});
});

    observer.observe(iframeDocument, {
          attributes: true, // 属性変化の監視
          characterData: true, // テキストノードの変化を監視
          childList: true,
          subtree: true
    });
}

}
}

[2021/03/11追記]
上記で実行したエラーは下記になります。
Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. at jsLoaded (content.js:14)

暫定ですが、クロスオリジン対応としてChromeのアドオンに「Allow CORS: Access-Control-Allow-Origin」（https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=ja）を追加したり、
下記リンクを参照させていただき起動時にオプションをつけてエラーを無視する方法をとっています。
https://webbibouroku.com/Blog/Article/cors-browser-setting

Comments

[int32_t]

コンテントスクリプトが動いているフレームと google hangout が動いているフレームは別オリジンですか?

[退会済みユーザー]

ありがとうございます。別オリジンで推奨はされていないですが、ブラウザのクロスオリジン対応はしてみました。
ですが、書いていただいているようにiframeの中身がプログラムから参照できていない感じがあります。

[int32_t]

iframe の内部のドキュメントは target.document ではなく target.contentDocument ですが、それにアクセスするとエラーになりますね?

[退会済みユーザー]

あ、エラーになります。
from accessing a cross-origin frame.
となるのでクロスオリジン対応がきちんとできていないからでしょうか。

[int32_t]

「クロスオリジン対応」というのは具体的に何をしましたか? 質問本文に追記してください。

[退会済みユーザー]

失礼しました。target.contentDocumentにした時のエラー内容はこちらでした。（いろいろ試していたので・・）

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. at jsLoaded (content.js:14)

Answer 1

質問者さんが行った「クロスオリジン対応」というのは、クロスオリジンなリソースを取ってくるときの制限を回避するものです。確か iframe には関係がなかった気がしますが、なんにせよロードできているということは、この点は問題ないのでしょう。

JavaScriptで別オリジンのフレームのDOMを触れるかどうかというのは別の問題です。Chromeでは別オリジンのフレームは別のプロセスで動いているので、DOMを触ることはできません。Google Hangout の URL でもコンテントスクリプトが動くようにマニフェストを修正して、必要なら window.postMessage() やバックグランドページ経由で通信をします。

Comments

[退会済みユーザー]

「Google Hangout の URL でもコンテントスクリプトが動くようにマニフェストを修正」というのは
マニフェストに下記を追記するということでしょうか。
"all_frames": true

記載いただいている通りバックグランドでは通信はしているのでその情報を取得するようにできたらいいのでしょうか。

浅い知識で恐縮ですが、ご教授いただきますと幸いです。

[int32_t]

はい、all_frames を true にするのと、matches で Google Hangout の URL を対象にすることですね。

[退会済みユーザー]

記載が漏れていて恐縮ですが、その辺りは当初実施済で・・
googleがその辺りのセキュリティを高めているのでしょうか。ありがとうございました。

{
"name": "Test Notice Extension",
"version": "1.0",
"manifest_version": 2,
"description": "Google hangoutやGoogle Chatの新着を通知",
"icons": { "128": "test.png"},
"content_scripts": [
{
"matches": ["https://mail.google.com/mail/*",
"https://hangouts.google.com/*"],
"js": ["push.min.js","jquery.min.js", "test.js"],
"run_at" : "document_end",
"all_frames": true
}
]
}

[int32_t]

念の為、「manifest.json が適切ならクロスオリジンiframeのDOMにアクセスできるようになる」という意味ではありませんよ。Google Hangout のフレームの中で動くコンテントスクリプトでそのフレーム内のDOMを監視する必要があるということです。

[退会済みユーザー]

なるほど。
「Google Hangout のフレームの中で動くコンテントスクリプト」
manifest.json で指定した"content_scripts":でページのロード完了タイミングも併せて、きちんとそのDOM要素なりを参照するように書かれているかといったところでしょうか。つまり、質問で記載したJavaScriptがきちんと動作するかどうかといったことでしょうか。。

個人的にはChatやGmail等きわめて個人的な内容は安易にアドオンから接続できないようにGoogleで設定している？のように考えていました。方法は分かっていないのですが。