How can I add an extra button to the Chrome DevTools toolbar? - google-chrome

Question

I have spent the better part of a day researching this, but still have no freaking clue where to even begin!
Basically all I want to do is add a button to the DevTools toolbar that injects the entire DevTools window into an arbitrary page as a div or iframe, so that I can manipuate that with hover/click event handlers to show/hide it more easily.
Working on a 13" laptop with no option to buy a second monitor (I am dirt poor, hence the need to do this and get my web dev business up and running), makes this an absolute necessity. It is so frustrating to have to constantly expand/collapse the window or undock it and move it around to be able to inspect and change arbitrary parts of a page simultaneously.
As mentioned before, I have spent ~2 hours scouring the DevTools Protocol docs, ~3 hours trying to build my own Chromium from source before my hard drive ran out of space, and countless hours researching this topic on other sites. But Chrome is such a massive and complicated beast that I am utterly baffled by the overly-simplistic DevTools extension API docs and other incomplete resources that I've found.
Could anyone shed some light on this for me? I've gotten so far as creating a DevTools extension with the following 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"
});
});
});
That adds a panel, which when switched to inserts the div correctly, but even that tiny amount of progress took ~4 hours to make!! Am I just the world's worst web developer, or is this API the most complicated and poorly-documented one ever created?! Some help to make the button actually do what I want would be very much appreciated!
I'd also like to know whether the extension route is the best one for me to follow, or should I be using the DevTools protocol? That seems to be much more powerful, but all the talk of "remote debugging" and "external clients" on the aforementioned docs page just confuses me even more (can't i just mimic the DevTools locally in my own browser since I'm already running Apache locally?).
MTIA and apologies for the long-winded question!