質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1032閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/03/10 06:30

編集2022/01/12 10:55

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2021/03/10 12:55

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

退会済みユーザー

2021/03/10 21:56

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

2021/03/11 00:24

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

退会済みユーザー

2021/03/11 00:33

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

2021/03/11 00:37

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

退会済みユーザー

2021/03/11 00:39

失礼しました。target.contentDocumentにした時のエラー内容はこちらでした。(いろいろ試していたので・・) Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. at jsLoaded (content.js:14)
guest

回答1

0

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

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

投稿2021/03/11 02:58

編集2021/03/11 03:01
int32_t

総合スコア20672

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/03/11 03:13

「Google Hangout の URL でもコンテントスクリプトが動くようにマニフェストを修正」というのは マニフェストに下記を追記するということでしょうか。 "all_frames": true 記載いただいている通りバックグランドでは通信はしているのでその情報を取得するようにできたらいいのでしょうか。 浅い知識で恐縮ですが、ご教授いただきますと幸いです。
int32_t

2021/03/11 04:53

はい、all_frames を true にするのと、matches で Google Hangout の URL を対象にすることですね。
退会済みユーザー

退会済みユーザー

2021/03/11 05:03 編集

記載が漏れていて恐縮ですが、その辺りは当初実施済で・・ 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

2021/03/11 07:00

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

退会済みユーザー

2021/03/11 07:32

なるほど。 「Google Hangout のフレームの中で動くコンテントスクリプト」 manifest.json で指定した"content_scripts":でページのロード完了タイミングも併せて、きちんとそのDOM要素なりを参照するように書かれているかといったところでしょうか。つまり、質問で記載したJavaScriptがきちんと動作するかどうかといったことでしょうか。。 個人的にはChatやGmail等きわめて個人的な内容は安易にアドオンから接続できないようにGoogleで設定している?のように考えていました。方法は分かっていないのですが。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問