Question

我花了一天的时间来研究这个问题，但仍然没有任何线索，甚至没有开始的地方！

基本上我想要做的就是在DevTools工具栏中添加一个按钮，将整个DevTools窗口作为div或iframe注入任意页面，这样我就可以使用hover / click事件处理程序来显示/隐藏它更容易。

在13＆＃34;笔记本电脑没有选择购买第二台显示器（我很糟糕，因此需要这样做，让我的网络开发业务启动和运行），这是绝对必要的。令人沮丧的是，不得不不断地展开/折叠窗口或将其移开并移动它以便能够同时检查和更改页面的任意部分。

如前所述，我花了大约2个小时的时间进行淘汰the DevTools Protocol docs，在我的硬盘耗尽空间之前尝试从源头构建我自己的Chromium约3个小时，并且在其他网站上花了无数个小时研究这个主题。但Chrome是如此庞大而复杂的野兽，我完全被过于简单化的DevTools extension API docs以及我发现的其他不完整资源所困惑。

有人能为我解释一下吗？我已经使用以下devtools.js创建了一个DevTools扩展程序：

chrome.devtools.panels.create('\u25b2\u25bc', '', 'panel.html', function(panel) {
    panel.onShown.addListener(function() {
        chrome.extension.sendMessage({
            tabId: chrome.devtools.inspectedWindow.tabId,
            action: "code",
            content: "var newItem = document.createElement('div');    // Create a new div node\n" +
                "newItem.innerHTML = '<p>Boo!</p>';" +
                "var body = document.getElementsByTagName('body')[0]; // Get the body element to insert the header into\n" +
                "body.insertBefore(newItem, body.childNodes[0]);      // Insert header before the first child of the body"
        });
    });
});

添加了一个面板，当切换到正确插入div时，即使是那么微小的进度花了大约4个小时制作!!我是世界上最差的网络开发者，还是这个API是有史以来最复杂，最难记录的？一些帮助使按钮实际上做我想要的将非常感谢！

我还想知道扩展路由是否是我要遵循的最佳路由，还是应该使用DevTools协议？这似乎更强大，但所有谈论＆＃34;远程调试＆＃34;和＃34;外部客户＆＃34;在前面提到的文档页面上只是让我更加困惑（因为我已经在本地运行Apache了，所以我只能在我自己的浏览器中模仿DevTools吗？）。

MTIA并为这个冗长的问题道歉！

如何在Chrome DevTools工具栏中添加额外按钮？

0 个答案: