chrome devtools 侧边栏窗格，设置多标题 object

Question

在开发过程中 chrome 扩展在创建多标题侧边栏窗格时遇到困难。

根据手册setObject将object设置为侧边栏内容，但只有一个标题：

sidebar.setObject({ some: 'qwe' }, 'title');

结果如下：

但我的目标是 object 满足以下要求：

我试过使用 multi setObject，但是，正如我所料，它不会附加数据，而是会覆盖它。我知道 setPage，并且能够通过 JS 设置这样的 object，但我对使用普通 chrome API 的解决方案很感兴趣工具

Answer 1

这其实很简单。您必须摆脱 title，它是 可选的 ，如果提供，则用作 root 表达式树。（来源：DevTools API）。

因此，如果您按如下方式调用 setObject：

var jsonObj = {
    first: {some: 'foo'},
    second: {some: 'bar'},
    third: {some: 'baz'}
};

sidebar.setObject(jsonObj);

您将获得：

请注意，与 Event Listeners 侧边栏相比，输出有点不同，因为我们只是输出一个 JSON 对象。但这可能符合您的需要，而且我个人认为无需打开每个元素即可获得摘要这一事实很有用。如果您确实需要 Event Listener 侧栏中显示的内容，我想您必须进一步查看 setObject

Answer 2

不可能将 setObject 用于此目的，因为它总是像您的测试一样删除以前的对象（在第 307 行）。因此只有一个对象具有一个 header/title 部分。

如果你查看 eventListener Sidebar Pane you can see that it is building a page rather than using setObject, making use of functions that are not available to an extension, and building this tree by itself (so there isn't really a clean builder for this view type that could be exposed. But the logic needed in such a sidebar page is easier to follow in properties Sidebar Pane 的来源而不是 eventListener Sidebar Pane 如果你不需要过滤器 views/etc。）

要获得外观，您可以从您通过 setPage 提供的页面的源代码中复制 CSS。

chrome devtools 侧边栏窗格，设置多标题 object

chrome devtools sidebar pane, set multi titled object

google-chrome

google-chrome-devtools