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 🙂
If you swap that cssText assignment
with an empty string
does it work??
let me check
Replace getStyle with this:
I want to isolate the problem to see if it's TW or if it's like any style that get injected into youtube
yes it fixed.
when i assigned style to "" now it works really great
Hmm...
I think it's your style then
Basically whatever it is that's injected into that
cssText
so your best bet is to just
bisect it and see which is the problematic statement
Maybe remove the tailwind stuffs first and see how that goes
and then swap them out as you goi commented out
@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;
}
}
and it again fixed the problemHmm
try remove just the
baseit's
/* @tailwind utilities; */
this is causinginteresting..
hmm
perhaps tailwind overrode one of the keyframe animation declaration maybe??
Maybe try namespacing your tailwind with a prefix in the tw config
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{tsx,html}', './src/components/**/*.{tsx,html}'],
darkMode: 'class',
corePlugins: {
preflight: false,
},
theme: {
colors: {
gray: {
1: '#F2F2F2',
2: '#E6E6E6',
3: '#D6D6D6',
4: '#C3C3C3',
5: '#888888',
6: '#3F3F3F',
7: '#EDEEF0',
},
black: { 1: '#020202', 2: '#0F0F0F', 3: '#212121' },
success: '#60C445',
error: '#CC1F00',
'form-error': '#E13742',
white: '#fff',
'button-border': 'rgba(255, 255, 255, 0.30)',
},
extend: {
backgroundColor: {
transparent: 'transparent',
},
borderColor: {
transparent: 'transparent',
},
},
},
plugins: [require('@tailwindcss/forms')],
};
this my configthat might help prevent any potential conflict
Configuration - Tailwind CSS
A guide to configuring and customizing your Tailwind installation.
If that doesn't work, then yeah might need to figure out what's going on with the tw utils
so i need to put tw- for all my styles right?
no not at all
that prefix setting will apply it for you automatically
(check their docs for more info xD)
now all my classes got shutdown because now they need tw-
maybe i can comment all the components and just test one with tw-?
text-lg
Should now be tw-text-lg
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/@*'
]
};
const getStyle = () => {
if (document.getElementById('plasmo-styles')) {
return;
}
const style = document.createElement('style');
style.id = 'plasmo-styles';
style.textContent = cssText;
document.head.appendChild(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);
}
}, 1000);
});
};
// Starting Point
const PlasmoOverlay: FC<PlasmoCSUIProps> = () => {
return <p className='tw-text-5xl tw-text-error'>TESTTTT</p>;
};
// 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;
checkout the PlasmoOverlay
now i put a p tag
with tw-
now it works completely ok
but i dont know if i add tw- for all my classes will it be ok or nothmm that's annoying, I thought the prefix only affect compiled code and not your own code Xd...
mb I'm the one who needed to read their docs lol
I think it's your call for this one, either remove utilities if you don't need it, or use the prefix
when i comment utilities, whole styles vanish
all the utilities are responisible for classes?
do you think it could be from the tw- thing?
because when i commented all the components and add classes with tw- it fixed the problem
I'm not sure, but iirc utilities maps to a lot of the flex/layout style, so yeah that's likely not viable
I'd just use the prefix then
so let me do it at least for some components and check the results
i'll reach to you, thanks for your help
np - and sorry for late reply I've been pretty busy
thank you so much, its okay.
I dont know how to thank you man, IT WORKEDDD!!! you dont know how glad i am, Thanks for your help, you saved me. wish you the best..😍
Gave +1 Rep to @louisgv