オリジナルのメニューバーが既存の要素と被らないようにしたい

Question

実現したいこと

Google Chromeでウェブページの一番上にオリジナルのメニューバーを表示する拡張機能を開発している。
後ろの要素や既存のメニューなど、既存のページに被らない形で表示し、スクロール後も固定されるようにしたい。

発生している問題・エラーメッセージ

一部のページ(Googleの検索ページなど)で、後ろの要素や既存のメニューとオリジナルのメニューバーが被ってしまう。

該当のソースコード

window.addEventListener('load', function() {
    var divblock = document.createElement("div");
    divblock.setAttribute('id', "my-addon-area");
    document.body.insertBefore(divblock, document.body.firstChild);
    var html = document.getElementsByTagName("html")[0];
    var new_element = html.insertBefore(document.createElement("div"), null);
    new_element.className = "my-addon-menu";
    var shadowRoot = document.getElementsByClassName("my-addon-menu")[0].attachShadow({mode: 'open'});
    shadowRoot.host.style = "height: 30px; border: none; position: fixed; top: 0px; left: 0px; margin-bottom: 0px; margin-left: 0px; z-index: 2147483647; width: 100%; box-sizing: border-box; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px;";
    shadowRoot.innerHTML = 
    `<div class="my-addon-navwrappe" style="z-index: 2147483647; top: 0; width: 100%; border: 0px; background: #4DB56A; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px;">
        <div class="my-addon-nav">
            <ul>
                <li><a href="https://youtube.com/">YouTube</a></li>
                <li><a href="https://twitter.com/">Twitter</a></li>
            </ul>
        </div>
    </div>
    <style type="text/css">
    .my-addon-navwrappe {
        margin: 0 auto;
        background-color: #4DB56A;
        height: 30px;
        width: 100%;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .my-addon-navwrappe .my-addon-nav, .my-addon-navwrappe .my-addon-nav ul{
        padding: 0;
        margin: 0;
        list-style: none;
        font-family: Arial,Helvetica,sans-serif;
    }

    .my-addon-navwrappe .my-addon-nav {
        -webkit-font-smoothing: antialiased;
        font-family: Arial,Helvetica,sans-serif!important;
        font-size: 13px;
        /*padding-top: 4px;*/
        width: 100%!important;
    }

    .my-addon-nav {
        margin-left: 8px!important;
    }

    .my-addon-nav ul li {
        cursor: pointer;
        font-family: Arial,Helvetica,sans-serif!important;
        float: left!important;
        position: relative!important;
        line-height: 30px!important;
        height: 30px!important;
        font-size: inherit!important;
        margin: 0!important;
        padding: 0!important;
        border: 0!important;
        list-style: none!important;
        background: transparent!important;
    }

    .my-addon-navwrappe .my-addon-nav a {
        font-family: Arial,Helvetica,sans-serif!important;
        display: block!important;
        padding: 0 7px;
        line-height: 30px!important;
        height: 30px!important;
        text-decoration: none;
        font-weight: normal;
        color: white;
    }

    .my-addon-navwrappe .my-addon-nav a:hover {
        opacity: 0.75;
    }
    </style>`;
}, true);

.my-addon-area {
    height: 30px !important;
    width: 100% !important;
    display: block !important;
}

試したこと

• body要素に[padding-top: 30px !important;]を記述した。

Answer 1

オリジナルのメニューバーの高さを下記のように確保すればどうでしょヴ。

document.createElement("div");
    divblock.setAttribute('id', "my-addon-area");
    divblock.style.height = "30px"; //追加

Comments

[woody_1227]

失礼しました。
指摘いただいた点、訂正しましたが、相変わらずといった感じです。

既存のメニューなどに[top: 0;]や[position: sticky;]などと記載されているためかもしれません。
これらの既存のメニューなどを書き換えるしかないのでしょうか。

[hatena19]

body要素をメニューバーの高さ分下にずらしたらどうだろう。

document.body.style.transform = "translatey(30px)";