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
38 Replies
why i am putting the youtube.com it self in my config is because, i can then render the content, on youtube.com without being seen, like its hidden or what then when user goes to video, there is the extension, but im facing one issue that getStyles() is making my app laggy,
when we are in the video, and user clicks on the youtube logo to go back to home page, it stucks and freezes in loading of the youtube for seconds, browser gets really heavy and then it fixes
when i comment the getStyles() it fixes
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Roboto', sans-serif;
}
button {
font-family: inherit;
}
input {
font: inherit;
}
input[type='number'].number-input-arrow-hidden::-webkit-inner-spin-button,
input[type='number'].number-input-arrow-hidden::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-text-fill-color: #000 !important;
}
input[type='number'].number-input-arrow-hidden::-webkit-inner-spin-button,
input[type='number'].number-input-arrow-hidden.number-input-arrow-hidden::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Range slider /
.range-slider input[type='range'] {
background-color: #ff4524;
position: absolute;
top: -8px;
left: -4px;
width: 101%;
-webkit-appearance: none;
pointer-events: none;
background: none;
outline: none;
}
/ range slider thumb /
.range-slider input::-webkit-slider-thumb {
pointer-events: auto;
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 8px;
border: 3px solid #eee;
background: #666;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.51);
border-radius: 50px;
cursor: pointer;
}
.tooltip {
font: inherit;
}
/ Tooltip bottom arrow /
.tooltip-arrow-background {
position: absolute;
width: 0;
height: 0;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #020202;
}
/ Tooltip bottom arrow */
this is my styles
@louisgv can you help me please?
@louisgv can you please check my issue?
I'd check your interval and increase that to debug, the code looks about what I'd do beside maybe how you watch youtube for change <- that require a fair bit of experimentation
@louisgv let me explain,
look when we for the first time go to the Youtube.com it works perfectly, we enter any video, the content is there working really great.
and if we now go back, it again works really ok, because no reloading happens in youtube when navigating.
now think this case, you open the video directly from a url, you didnot load the youtube.com home page and instead load the video
now when you click on youtube.com because it's gonna load youtube home page, it freezes at loading,
note that when i comment the getStyle() it works really performant and nothing happens
it just happens in the senario i explained
it's likely due to the injection did happen but onto a wrong component I think
try logging out anywhere you are injecting the component
iirc, youtube has a habit of reusing ID and identifiers
um, im sure that you've saw, when you are on the homepage, elements of the video are in the DOM
So for example, this selector:
secondary.ytd-watch-flexy <- I've seen youtube spawns 2 similar element but they overlap each other
(just a thought for something to checkout)so what do you suggest me to do?
im really stuck on this for weeks now
note that when i comment the getStyle() it works really performant and nothing happenshmm... so if you remove getStyle, it works flawlessly? (on all cases?)
why should getStyle() do this?
yes it works like butter.
lol..
this project has gone a lot, if i knew tailwind would do this, i would use even raw css
this really annoyed me
i tryed moving getStyle() else where
in my app component
in useEffect, any where you imagine
Yeah, generally I'd use emotion (it encapsulate style into runtime js, works better for extension than tw for these complex cases)
Tho your app is using a custom getStyle...
i dont know why should styles make the whole youtube stuck
can you elaborate on "stuck"?
stuck as in the whole page lag and won't interact
or stuck as in some element can't be clicked on?
home page of youtube, shows a loading spinner without any videos, and browser lags
its like
youtube pauses on execution
waiting for sth
i dont know if im doing everything correctly, but i checked all your examples,
and i think what im writing is really ok
you are my kind a last hope 🙂