【Chrome拡張機能】backgroundで取得したタブ情報をポップアップに表示させたい

###前提・実現したいこと
表示しているページ上で発生している通信を監視する、というChromeの拡張機能を作っています。
拡張機能のアイコンをクリックすると、ポップアップで通信の一覧をリストで表示させたいです。

background.jsで通信をコンソールに表示させるのはできたのですが、それをpopup.htmlに出力したいです。

###該当のソースコード

javascript
1//background.js
2
3var callback = function (details) {
4  console.log(details.url);
5  // 現在のタブを取得する
6  chrome.tabs.query({
7    active: true,
8    windowId: chrome.windows.WINDOW_ID_CURRENT
9  }, function (result) {
10    var currentTab = result.shift();
11    // 取得したタブに対してメッセージを送る
12    chrome.runtime.sendMessage(details.url, function() {});
13  });
14}
15
16chrome.webRequest.onBeforeRequest.addListener(callback,{urls: ['<all_urls>']},[]);

javascript
1//popup.js
2
3chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
4  var elemLi = document.createElement('li');
5  elemLi.textContent = message.toString();
6  document.getElementById('list').appendChild(elemLi);
7  return true;
8});
9

html
1<html>
2<meta charset="utf-8" />
3<link rel="stylesheet" href="main.css" type="text/css" />
4<script type="text/javascript" src="popup.js"></script>
5<body>
6    <h1 id="title">NetworkWatcher!</h1>
7    <ul id="list">
8    </ul>
9</body>
10</html>

このコードだと、一応エラーなく動くのですが、なんだか中身が違っています…
そもそも、background.jsで取得したdetailsには何が入っているのでしょうか？

初心者で初歩的な質問で申し訳ありませんが、どなたかご教示ください。

行動規範の内容に同意します

回答1件

中身が違っているというのはどういうものを期待されていますか？
私が試してみたところ deitals.url でちゃんと通信されてる URL がとれていました

deitals の中身ですが onBeforeRequest なのでここにかいてるあるものです
https://developer.chrome.com/extensions/webRequest#event-onBeforeRequest

このページだとこうなりました

json
1{
2  "frameId": 0,
3  "method": "GET",
4  "parentFrameId": -1,
5  "requestId": "40790",
6  "tabId": 233,
7  "timeStamp": 1481435843916.365,
8  "type": "main_frame",
9  "url": "https://teratail.com/questions/58186"
10}

表示先がポップアップなので、開いたときにそのポップアップを開くための通信が起きて、その拡張機能の popup.html で使われてる main.css と popup.js が表示されると思います

開いてる間に画像などを読み込む通信があれば追加されていきます。
ただし、ポップアップを使っているので新しくページを開いたり、リンクを開いたりした時にはポップアップが消えてしまうのでそれを見ることはできません（background.js の変数に保持しておくなら可能）

一応、 popup.html に対して devtools を起動しているとアクティブなタブでリンクを開いたときにポップアップが消えないので、見ることができますがタブ切り替えでは消えてしまいます
GoogleMaps のような同じページ内で通信が続くものを監視するにはいいですが、そうでない場合はポップアップではなく別にウィンドウを開くのがいいと思います

方法を書いておくので参考にどうぞ
マニフェストの browser_action または page_action の "default_popup": "popup.html" でポップアップを指定してると思うのでそれを削除して、 background.js に↓を追加します

javascript
1chrome.browserAction.onClicked.addListener(_ => {
2	chrome.windows.create({url: "popup.html"}, win => {})
3})

これでボタンを押したきにポップアップじゃなくてウィンドウが開きます

投稿2016/12/11 06:22

ryls-nmm

総合スコア633

one__nne

2016/12/11 08:13

ご回答ありがとうございます！期待していたのはURLなんですが、実際はpopup.htmlで読み込んだcssとjsが表示されていましたが、そのポップアップを開くための通信が起きているためだったのですね。納得です。理想は、例えばYahoo!のページを開いたときに、そこで起きている通信を確認するためにツールバーのアイコンを押して、ポップアップで確認する、というようなものです。 onBeforeRequest以外のものを使うべきなのでしょうか？

ryls-nmm

2016/12/11 08:32

onBeforeRequest を他に変えても基本的に表示される項目は変わらないですリダイレクトなどを考慮済みの最終的な受け取るデータのみがほしいのだと onResponseStarted や onComplete がいいと思いますが、「Yahoo を開いてポップアップを開いたら今のページの通信すべてが表示されてる」というものを作るのだとするとそこは関係ないですポップアップにこだわるなら、background.js の中で url を受け取る度に sendMessage で送るのではなく変数にタブIDごとにURLのリストを保存しておいて、ポップアップが開かれたときにアクティブなタブIDのリストを sendMessage で送るのがいいと思いますこの場合、タブが更新されたことを監視して保存してるリストをリセットする必要がでてきますまた、ポップアップを開いた後に遅れて受信したデータも表示させるために url を受け取ったときにポップアップが開かれていた場合は保存に加えて「追加」というかたちで送る必要があります

one__nne

2016/12/13 01:33

ありがとうございます！ポップアップではなく、別ウインドウにすることにしました。「新しくページを開いたり、リンクを開いたりした時にはポップアップが消えてしまうのでそれを見ることはできません（background.js の変数に保持しておくなら可能）」とのことですが、それは別ウインドウ表示にしても同じことですか？やり方を教えていただけるとありがたいです。

ryls-nmm

2016/12/13 12:52 編集

別ウィンドウだと、普通に Chrome の別ウィンドウが開いているので新しくページを開くなどしてもそのウィンドウは消えませんやり方は、単純にやるなら私の回答本文にあるように・ manifest の default_popup を削除・ chrome.browserAction.onClicked.addListener を設定とするだけでとりあえず別ウィンドウに結果通信内容が表示されますただすべてのウィンドウのすべてのタブでの通信が通信された順にずらっと並んでしまうので、今のアクティブなタブの通信だけみたいなら background.js の chrome.runtime.sendMessage する側でいろいろ制御しますやることは、・タブ切り替えやリロード、ページ遷移などがあったときに別ウィンドウに表示しているものをリセットする命令を送信する（自分で適当に作る {reset: true} というプロパティと決めて、受け取る側で reset :true ならクリアするとか）・送るときにアクティブなタブの ID じゃない場合は無視する（タブを切り替えたときに別ウィンドウの中身が0からじゃなくてページ開いたときからの全部表示するならポップアップと同様に保存しておく必要あり）といったところでしょうか

one__nne

2016/12/14 13:22

ありがとうございます！参考になりました。頑張ってみます！

行動規範の内容に同意します