Question

我正在创建我的自定义元素侧边栏窗格，如下所示：

chrome.devtools.panels.elements.createSidebarPane(
    "MyPane",
    function (sidebar) {
        sidebar.setPage('my-pane.html');
    }
);

MY-pane.html：

<html>
    <head>
    <script src="my-pane.js"></script>
    </head>
    <body>
    <!-- custom UI -->
    </body>
</html>

在my-pane.js中我正在观看当前选中的元素：

chrome.devtools.panels.elements.onSelectionChanged.addListener(function() {
    chrome.devtools.inspectedWindow.eval("$0", function (res) {
       <!-- process res and want to push detailed results into custom panel -->
    });
});
// expecting request from panel here
chrome.extension.onMessage.addListener(function (msg, _, sendResponse) {
    console.log(msg, _, sendResponse);
});

到目前为止，一切都运行得很好：我可以选择并在窗格中围绕它构建自定义HTML UI。更进一步，我想在另一个Panel中显示一些更详细的UI。这就是我正在尝试的（创建窗格后立即）：

chrome.devtools.panels.create(
    'My details',
    'icon.png',
    'my-panel.html',
    function (panel) {
        panel.onShown.addListener(function (window) {
            chrome.extension.sendMessage({}, function (response) {
                console.log(response);
            });
        });
    }
);

这些行以（in）着名的方式失败：

端口错误：无法建立连接。接收端没有存在。

sendMessage / onMessage模式是否在窗格和面板之间进行通信的正确方式，两者都表示为.html页面？

修改

试图完全避免DevTools物流并通过DOM访问页面（ my-pane.html 和 my-panel.html 似乎都在<iframe/>在单个父页面内）：

..
panel.onShown.addListener(function (window) {
    console.log(["PANEL",
       window
           .top
           .frames[0] // Assume this is my-pane.html
           .document
           .getElementsByTagName('ol')
    ]);
});
..

这不起作用：

不安全的JavaScript尝试使用URL访问框架 chrome-extension：//＆lt; ..＆gt; /devtools.html来自带URL的框架铬 - 延伸：//＆LT; ..＆GT; /devtools.html。域，协议和端口必须匹配。

编辑2

傻傻的我！当然，关于第一个<iframe/>是正确的假设的上述假设是完全错误的。以下产生了更有意义的结果：

panel.onShown.addListener(function (window) {
    for (var i = 0; i < window.top.frames.length; i++) {
        try {
            console.log(["PANEL",
                window.top.frames[i].document.getElementsByTagName('ol')
            ]);
            break;
        } catch (e) {
            console.log('BAD!', e);
        }
    }
});

编辑3（解决方案但不是答案）

chrome.devtools.panels.create(
    'My Panel',
    'icon.png',
    'my-panel.html', // Must define function callbackInMyPanelPage(doc) { .. }
    function (panel) {
        panel.onShown.addListener(function (window) {
            for (var i = 0; i < window.top.frames.length; i++) {
                try {
                    // Use any unique marker to identify our pane document,
                    // at worst case a security exception will be thrown..
                    var $el = window.top.frames[i].document.getElementById('myPane');

                    if ($el) {
                        try {
                            // pass pane's document to panel page
                            window.callbackInMyPanelPage(window.top.frames[i].document);
                        } catch(ex) {} // Don't interfere with a handler below 
                        break;
                    }
                } catch (e) {
                    console.warn('Cannot access <iframe/>', e);
                }
            }
        });
     }
 );

奖励：我想要实现什么样的沟通（绿色箭头）的可视化

Answer 1

根据您的上次评论

到目前为止，onMessage事件处理程序在放入后工作了 background.js。但这就是我想要完全避免的。相反，我我希望my-pane.html和my-panel.html直接与每个人交谈其他。当不将HTML页面用作窗格时，这当然是可行的和小组内容。

我弄清楚发生了什么...

您的面板/窗格不是扩展程序，它被视为内容脚本。因此，您需要使用chrome.tabs.sendMessage代替chrome.extension.sendMessage。

自定义DevTools Elements侧边栏窗格如何与面板通信？

1 个答案: