Adek Posts - Answer Overflow

Adek

•Created by Adek on 2/25/2025 in #🔰newbie

Append content ui to an existing element on the page

I have a react component I will like to append to an element on the page, but I am unable to figure how to get it done using Plasmo. for example, below is how I do it in a vite project. I'll appreciate if someone can point me to a guide or example project

<imports here>

const EXTRASCAN_ROOT_ID = "extrascan-root";

function createReactRoot(container: HTMLElement) {
    const root = createRoot(container);
    root.render(<ExtrascanTab />);
    return root;
}

function init() {
    // Only run on address pages
    if (!window.location.pathname.startsWith("/address/")) return;

    // Check if contract has code
    const codeElement = document.querySelector("#dividcode .wordwrap.scrollbar-custom");
    if (!codeElement) return;

    // Find the tab container
    const tabContainer = document.querySelector("#nav_tabs.nav_tabs1");
    if (!tabContainer) return;

    // Create new tab
    const newTab = document.createElement("li");
    newTab.id = "ContentPlaceholder1_li_extrascan";

    // Create tab link
    const tabLink = document.createElement("a");
    tabLink.className = "nav-link";
    tabLink.href = "javascript:;";
    <set other attributes>

    // Append elements
    newTab.appendChild(tabLink);
    tabContainer.appendChild(newTab);

    // Create content container
    const contentContainer = document.createElement("div");
    contentContainer.id = "extrascan";
    <set other attributes>

    // Create React root container
    const reactContainer = document.createElement("div");
    reactContainer.id = EXTRASCAN_ROOT_ID;
    contentContainer.appendChild(reactContainer);

    // Find and append to tab content container
    const tabContent = document.querySelector("#pills-tabContent");
    if (tabContent) {
        tabContent.appendChild(contentContainer);
        createReactRoot(reactContainer);
    }
}

// Run when DOM is fully loaded
if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
} else {
    init();
}

2 replies

Gaming

Programming