从Chrome扩展程序打开除网页之外的div（例如开发工具面板显示）

Question

在我当前正在开发的扩展中，我想在基础网页中打开一个div。尽管我能够做到这一点，但现在我想像打开chrome dev工具面板一样显示该div。

这是当前显示的方式。

我希望它如何显示。

目前，如第一张图片所示，div覆盖了网站内容。我想以一种显示开发工具面板的方式显示黄色div。

content.js

    document.documentElement.style.height = '100%';
    document.body.style.height = '100%';
    document.documentElement.style.width = '70%';
    document.body.style.width = '100%';

    var div = document.createElement( 'div' );
    var btn = document.createElement( 'BUTTON' );

    var content = document.createTextNode( `Lorem Ipsum is simply dummy text of the printing...`);

    document.documentElement.appendChild( div );
    div.appendChild(btn)
    div.appendChild(content)

    div.id = 'myDivId';
    div.style.position = 'fixed';
    div.style.top = '0%';
    div.style.left = '70%';
    div.style.width = '30%';   
    div.style.height = '100%';
    div.style.overflowY = "auto"
    div.style.zIndex = 150000
    div.style.backgroundColor = 'yellow';

    btn.type = 'button';
    btn.innerHTML = 'Create';
    btn.style.marginTop = "5%"
    btn.style.backgroundColor = "green";
    btn.style.position = 'absolute';
    btn.style.left = '50%';