背景、コンテンツ、devtoolsを一緒に使っている

Question

私はドキュメントやサンプルからこれを理解しようとしていますが、まだ十分ではありませんか？

私はデベロッパーツールパネルを作成したいが、私はコンテンツのスクリプトで取得するように私はまだ検査ウィンドウのDOMにアクセスしたいです。今のところ、検査されたウィンドウのコンテキストでは、私の選択肢は何か評価されていますが、私がそれを避けることができれば、実際にはそうしないでしょう。私はdevtoolsのページ/スクリプトと一緒にコンテンツスクリプトを使用することはできますが、アイデアだと思っていますが、それは私が期待するように動作していないようです - バックグラウンドページを使ってメッセージを送信できないようです私のdevtoolsページと私のコンテンツスクリプト。

また、彼らは要素のパネルまたは素晴らしいホバー/ハイライト機能と一緒にコンソールで行うように表示するには、これらのクールなDOMのサブツリーを取得する方法はありますか？

UPDATE

だから私は、検査ウィンドウのタブIDを転送すると、私の背景ページでそれを引き出してパネルページからコンテンツスクリプトに接続することができます。だから私はこの

// devtools.js 
chrome.extension.sendMessage({ 
    'to': chrome.devtools.inspectedWindow.tabId, 
    'message': 'whatever' 
}); 

と

//background.js 
chrome.extension.onMessage.addListener(function(message,sender,callback) { 
    message.from = sender.tab.id; 
    chrome.tabs.sendMessage(message.to, message, callback); 
}); 

そして、私のcontent.jsスクリプトがうまくメッセージを取得しなければならない...と私は、送信者のタブのIDから戻って物事を送信するために働くだろうと思いましたコンテンツのスクリプトが、それはしません。バックグラウンドスクリプトはメッセージを受け取りますが、devtoolsページはそれを返すことはありません。

私は、devtools拡張を適切にデバッグする方法を理解するのに少し問題があります。コンテンツスクリプトはページのコンソールにログを記録し、バックグラウンドスクリプトは拡張ページから検査できるバックグラウンドページにログを記録しますが、devtoolsページはどこにログインしますか？

Answer 1

私はもともとテストはクローム26+となりました正常に動作したコード...私は、私が働いているはずです何かをやっていたと思いますが、私は見ていた行動を起こした時にしませんでした。

@Konrad Dzwinelさんのコメントは非常にデベロッパーツールをデバッグする上で助けと、この方法は、実際に必要があり、仕事をしているという事実に注目しました。ありがとう！また、デバッグのデベロッパーツールの拡張苦労可能性があり、誰のための

Answer 2

だけで簡単に2016年からの更新（とChrome 54+）：カスタムデベロッパーツールを追加した後

が正常にペインとそれにAngular2アプリを示し、私はその延長ISN」が見つかりDevToolsコンソールとソースに接続します。上記のようにDevToolsウィンドウF12を押しても機能しません（自分のシステムでChrome自体に問題があるかどうかはわかりません）、DevToolsページが閉じられます。しかし、DevToolsウィンドウのCtl + Alt + Iを押すと、カスタムペインのアプリケーションソースとコンソールが接続されたもう1つのDevToolsウィンドウが開きました。