Dynamic Roots and all queries
hi, im developing this extension that adds an emoji to the textbox in youtube textboxes, the problem is all textboxes are hidden, there is a reply button on every comment and when you press it the textbox shows up now here i want to show the emoji icon from my extension, the problem is this works only once and when i close the reply or open another one its not there
export const config: PlasmoCSConfig = {
matches: ['https://studio.youtube.com/*']
};
const getStyle = () => {
if (!document.getElementById('mastertube')) {
const style = document.createElement('style');
style.id = 'mastertube';
style.textContent = cssText;
document.head.appendChild(style);
return style;
}
};
// Youtube Sidebar Root
export const getRootContainer = () => {
return new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector(
'#reply-dialog-container > #reply-dialog-id > div#body > div#main > #input-container > #outer > #child-input > tp-yt-iron-autogrow-textarea#textarea > div.textarea-container'
); // Sidebar Id
console.log(rootContainerParent);
if (rootContainerParent) {
clearInterval(checkInterval);
getStyle();
const rootContainer = document.createElement('div');
rootContainerParent.insertBefore(
rootContainer,
rootContainerParent.firstChild
);
resolve(rootContainer);
}
}, Infinity);
});
};
// Starting Point
const PlasmoOverlay: FC<PlasmoCSUIProps> = () => {
return <App />;
};
// React Render
export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
createRootContainer
}) => {
if (!createRootContainer) {
console.error('Could not create root container');
return;
}
const rootContainer = await createRootContainer();
const root = createRoot(rootContainer);
root.render(<PlasmoOverlay />);
};
export default PlasmoOverlay;
1 Reply
@louisgv