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

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

ただいまの
回答率

88.76%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,240

one__nne

score 8

前提・実現したいこと

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

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

該当のソースコード

//background.js

var callback = function (details) {
  console.log(details.url);
  // 現在のタブを取得する
  chrome.tabs.query({
    active: true,
    windowId: chrome.windows.WINDOW_ID_CURRENT
  }, function (result) {
    var currentTab = result.shift();
    // 取得したタブに対してメッセージを送る
    chrome.runtime.sendMessage(details.url, function() {});
  });
}

chrome.webRequest.onBeforeRequest.addListener(callback,{urls: ['<all_urls>']},[]);
//popup.js

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  var elemLi = document.createElement('li');
  elemLi.textContent = message.toString();
  document.getElementById('list').appendChild(elemLi);
  return true;
});
<html>
<meta charset="utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="popup.js"></script>
<body>
    <h1 id="title">NetworkWatcher!</h1>
    <ul id="list">
    </ul>
</body>
</html>

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

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

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

{
  "frameId": 0,
  "method": "GET",
  "parentFrameId": -1,
  "requestId": "40790",
  "tabId": 233,
  "timeStamp": 1481435843916.365,
  "type": "main_frame",
  "url": "https://teratail.com/questions/58186"
}

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/13 10:33

    ありがとうございます!ポップアップではなく、別ウインドウにすることにしました。

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

    キャンセル

  • 2016/12/13 21:52 編集

    別ウィンドウだと、普通に Chrome の別ウィンドウが開いているので新しくページを開くなどしてもそのウィンドウは消えません
    やり方は、単純にやるなら私の回答本文にあるように
    ・ manifest の default_popup を削除
    ・ chrome.browserAction.onClicked.addListener を設定
    とするだけでとりあえず別ウィンドウに結果通信内容が表示されます

    ただ すべてのウィンドウのすべてのタブでの通信が通信された順にずらっと並んでしまうので、今のアクティブなタブの通信だけみたいなら background.js の chrome.runtime.sendMessage する側でいろいろ制御します
    やることは、
    ・タブ切り替えやリロード、ページ遷移などがあったときに別ウィンドウに表示しているものをリセットする命令を送信する(自分で適当に作る {reset: true} というプロパティと決めて、受け取る側で reset :true ならクリアするとか)
    ・送るときにアクティブなタブの ID じゃない場合は無視する(タブを切り替えたときに別ウィンドウの中身が0からじゃなくてページ開いたときからの全部表示するならポップアップと同様に保存しておく必要あり)
    といったところでしょうか

    キャンセル

  • 2016/12/14 22:22

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

    キャンセル

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

  • ただいまの回答率 88.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る