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();
}0 Replies