Freezing and crashing without reason
import type {
PlasmoCSConfig,
PlasmoCSUIJSXContainer,
PlasmoCSUIProps,
PlasmoRender
} from 'plasmo';
import { type FC } from 'react';
import { createRoot } from 'react-dom/client';
import cssText from 'data-text:../style.css';
import { App } from '~youtube-video-sidebar/components';
// Specific Url Where Extension Injects
export const config: PlasmoCSConfig = {
matches: [
'https://www.youtube.com/',
'https://www.youtube.com/watch*',
'https://www.youtube.com/@*'
]
};
export const getStyle = () => {
if (document.getElementById('plasmo-styles')) {
return;
}
const style = document.createElement('style');
style.id = 'plasmo-styles';
style.textContent = cssText;
document.head.insertAdjacentElement('afterbegin', style);
};
// Youtube Sidebar Root
export const getRootContainer = () => {
return new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector(
'#secondary.ytd-watch-flexy'
); // Sidebar Id
if (rootContainerParent) {
clearInterval(checkInterval);
getStyle();
const rootContainer = document.createElement('div');
rootContainerParent.insertBefore(
rootContainer,
rootContainerParent.firstChild
);
resolve(rootContainer);
}
}, 137);
});
}
// 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;
this is my content.tsx, im building my extension at youtube.com/watch
PlasmoCSConfig,
PlasmoCSUIJSXContainer,
PlasmoCSUIProps,
PlasmoRender
} from 'plasmo';
import { type FC } from 'react';
import { createRoot } from 'react-dom/client';
import cssText from 'data-text:../style.css';
import { App } from '~youtube-video-sidebar/components';
// Specific Url Where Extension Injects
export const config: PlasmoCSConfig = {
matches: [
'https://www.youtube.com/',
'https://www.youtube.com/watch*',
'https://www.youtube.com/@*'
]
};
export const getStyle = () => {
if (document.getElementById('plasmo-styles')) {
return;
}
const style = document.createElement('style');
style.id = 'plasmo-styles';
style.textContent = cssText;
document.head.insertAdjacentElement('afterbegin', style);
};
// Youtube Sidebar Root
export const getRootContainer = () => {
return new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector(
'#secondary.ytd-watch-flexy'
); // Sidebar Id
if (rootContainerParent) {
clearInterval(checkInterval);
getStyle();
const rootContainer = document.createElement('div');
rootContainerParent.insertBefore(
rootContainer,
rootContainerParent.firstChild
);
resolve(rootContainer);
}
}, 137);
});
}
// 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;
this is my content.tsx, im building my extension at youtube.com/watch
