Chrome Extension: Manipulating Google Docs DOM to Adjust Companion Sidebar

Question

I'm working on a Chrome extension that adds a custom companion sidebar to Google Docs. I want to adjust the Google Docs UI when my sidebar is active, including moving certain toolbar buttons to ensure they remain accessible and don't overlap with my sidebar.

Here's the JavaScript function I've written to manipulate the DOM for this purpose:

function adjustDocs() {
    let companionPlaceholder = document.querySelector(
        ".docs-full-height-sidebar-placeholder"
    );
    if (companionPlaceholder) {
        companionPlaceholder.classList.add("expanded");
    }

    let companionSidebar = document.querySelector(".docs-companion-sidebar");
    if (companionSidebar) {
        companionSidebar.style.right = "0px";
        companionSidebar.style.display = "";
    }

    let appSwitcherContainer = document.querySelector(
        ".docs-companion-app-switcher-container"
    );
    if (appSwitcherContainer) {
        appSwitcherContainer.style.right = "300px";
    }

    let primaryToolbars = document.getElementById("docs-primary-toolbars");
    if (primaryToolbars) {
        primaryToolbars.style.maxWidth = "799px";
    }

    let rulerInner = document.querySelector(".docs-ruler-inner");
    if (rulerInner) {
        rulerInner.style.left = "92px";
    }

    let rotatingTileManager = document.querySelector(".kix-rotatingtilemanager");
    if (rotatingTileManager) {
        rotatingTileManager.style.width = "920px";
    }

    let rotatingTileManagerContent = document.querySelector(
        ".kix-rotatingtilemanager-content"
    );
    if (rotatingTileManagerContent) {
        rotatingTileManagerContent.style.left = "6.5px";
    }

    let outdentButton = document.getElementById("outdentButton");
    let parentElement = outdentButton.parentElement;

    // Function to move an element before the outdentButton
    function moveBeforeOutdentButton(elementId) {
        console.log("In adjust docs 111");
        let element = document.getElementById(elementId);

        if (element && parentElement) {
            console.log(element);
            parentElement.insertBefore(element, outdentButton);
        }
    }

    let idsToMove = [
        "insertLinkButton",
        "insertCommentButton",
        "insertImageButton",
        "alignButton",
        "lineSpacingMenuButton",
        "addChecklistButton",
        "checklistPresetMenuButton",
        "addBulletButton",
        "bulletedListPresetMenuButton",
        "addNumberedBulletButton",
        "numberedListPresetMenuButton",
    ];

    // Loop through each ID and move the corresponding element above the outdentButton
    idsToMove.forEach(moveBeforeOutdentButton);

    let moreButton = document.getElementById("moreButton");
    if (moreButton) {
        moreButton.style.left = "0px";
        moreButton.style.right = "";
        moreButton.style.display = "";
    }

    let toolbarWrapper = document.getElementById("docs-toolbar-wrapper");
    if (toolbarWrapper) {
        console.log("reducing this width");
        console.log(toolbarWrapper.style.width);
        toolbarWrapper.style.width = "1000px";
        console.log(toolbarWrapper.style.width);
    }

    let featureLevelBanner = document.getElementById("docs-feature-level-banner");
    if (featureLevelBanner) {
        console.log("reducing this width");
        console.log(featureLevelBanner.style.width);
        featureLevelBanner.style.width = "1000px";
        console.log(featureLevelBanner.style.width);
    }

    let docsEditor = document.getElementById("docs-editor");
    if (docsEditor) {
        docsEditor.classList.add("companion-enabled");
        docsEditor.style.width = "1039px";
    }

    let additionalBars = document.getElementById("docs-additional-bars");
    if (additionalBars) {
        var currentMaxWidth = parseInt(
            additionalBars.style.maxWidth.replace("px", "")
        );
        if (!isNaN(currentMaxWidth)) {
            additionalBars.style.maxWidth = currentMaxWidth - 300 + "px";
        }
    }
}

Could anyone guide me on how to efficiently manipulating the DOM? Is there any better way to do this?