google-chrome-extension - Chrome 拡張機能の devtools パネルでコンテンツを変更するには?

Question

私は開発者ツールに新しいパネルを追加している Google 拡張機能に取り組んでおり、うまく機能しているようです。しかし、JavaScript を使用してパネルのコンテンツを変更する方法がわかりません。

誰でも私を啓発できますか？

Answer 1

パネルにコンテンツを表示することはそれほど難しくありません。まず、ドキュメンテーションに従って基本拡張機能 ( manifest.json、devtools.htmlおよびで構成される) を作成したと仮定します。少なくとも が含まれています。devtools.jsdevtools.html<script src="/devtools.js"></script>

を使用してパネルを作成する場合chrome.devtools.panel.create、コールバックを指定できます。このコールバックは、タイプの引数を受け取りますExtensionPanel。このオブジェクトは、onShownおよびonHiddenイベント リスナーを定義します。イベントリスナーは追加の引数を受け取ります: パネルのオブジェクトへの参照
です。これで、やりたいことは何でもできます。onShownwindow

たとえば、ユーザーが初めて devtools パネルを開いたときに、パネルにテキストを追加します。

chrome.devtools.panels.create("devtools Test", "/icon.png", "/panel.html",
  function(extensionPanel) {
    var runOnce = false;
    extensionPanel.onShown.addListener(function(panelWindow) {
        if (runOnce) return;
        runOnce = true;
        // Do something, eg appending the text "Hello!" to the devtools panel
        panelWindow.document.body.appendChild(document.createTextNode('Hello!'));
    });
});