Как добавить дополнительную кнопку на панель инструментов Chrome DevTools?

Я потратил большую часть дня на изучение этого вопроса, но до сих пор понятия не имею, с чего начать!

По сути, все, что я хочу сделать, это добавить кнопку на панель инструментов DevTools, которая вводит все окно DevTools на произвольную страницу как div или iframe, чтобы я мог управлять этим с помощью обработчиков событий наведения / щелчка, чтобы легче отображать / скрывать.

Работа на 13-дюймовом ноутбуке без возможности купить второй монитор (я ужасно бедный, поэтому необходимость сделать это и запустить свой бизнес в области веб-разработки) делает это абсолютной необходимостью. Это так неприятно, что приходиться постоянно расширять / сворачивать окно или откреплять его и перемещать, чтобы иметь возможность одновременно проверять и изменять произвольные части страницы.

Как упоминалось ранее, я потратил ~ 2 часа на изучение документация по протоколу DevTools, ~ 3 часа, пытаясь собрать свой собственный Chromium из исходников, прежде чем на моем жестком диске закончится место, и бесчисленные часы, исследуя эту тему на других сайтах. Но Chrome - такой массивный и сложный зверь, что я совершенно сбит с толку чрезмерно упрощенным Документация по API расширения DevTools и другими неполными ресурсами, которые я нашел.

Может ли кто-нибудь пролить свет на это для меня? Я дошел до создания расширения DevTools со следующим devtools.js:

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? Это кажется гораздо более мощным, но все разговоры об «удаленной отладке» и «внешних клиентах» на вышеупомянутой странице документации только сбивают меня с толку (не могу ли я просто имитировать DevTools локально в моем собственном браузере, раз уж я уже работает Apache локально?).

MTIA и извинения за многословный вопрос!