tailwind not injecting styles
hi, this is my tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{tsx,html}'],
darkMode: 'class',
extend: {
theme: {
colors: {
gray: {
1: '#F2F2F2',
2: '#E6E6E6',
3: '#D6D6D6',
4: '#C3C3C3',
5: '#888888',
6: '#3F3F3F',
},
black: { 1: '#020202', 2: '#0F0F0F', 3: '#212121' },
success: '#60C445',
error: '#CC1F00',
white: '#fff',
'button-border': 'rgba(255, 255, 255, 0.30)',
},
},
},
};
tailwind base:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['../src/**/*.{tsx,html}'],
darkMode: 'media',
corePlugins: {
preflight: false,
},
};
style.css:
@config "../cfg/tailwind.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Roboto', sans-serif;
}
button {
font-family: inherit;
}
}
/* Range slider */
.range-slider input[type='range'] {
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 */
15 Replies
base.css:
@config "../cfg/tailwind.base.js";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@tailwind base;
and content.tsx:
import cssText from 'data-text:~style.css';
import type {
PlasmoCSConfig,
PlasmoCSUIJSXContainer,
PlasmoCSUIProps,
PlasmoRender,
} from 'plasmo';
import type { FC } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from '~components';
import '~base.css';
console.log(cssText);
// Specific Url Where Extension Injects
export const config: PlasmoCSConfig = {
matches: ['https://www.youtube.com/watch*'],
};
export const getStyle = () => {
const style = document.createElement('style');
style.textContent = cssText;
return style;
};
// window.addEventListener('yt-navigate-start', function () {
// console.log('YouTube video page navigation started.');
// });
// Youtube Sidebar Root
export const getRootContainer = () =>
new Promise((resolve) => {
console.log('Plasmo Worked!');
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector('#secondary'); // Sidebar Id
const rootContainer = document.createElement('div');
if (rootContainerParent) {
clearInterval(checkInterval);
rootContainerParent.insertBefore(
rootContainer,
rootContainerParent.firstChild
);
resolve(rootContainer);
}
}, 137);
});
// Starting Point
const PlasmoOverlay: FC<PlasmoCSUIProps> = () => {
console.log('App component rendered!');
return <App />;
};
// React Render
export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
createRootContainer,
}) => {
const rootContainer = await createRootContainer();
const root = createRoot(rootContainer);
root.render(<PlasmoOverlay />);
};
export default PlasmoOverlay;
styles are not being applyedSince you're using a custom root container, you will need to mount that style yourself - i.e just call the getStyle function inside your getRootContainer callback
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*'],
};
export const getStyle = () => {
const style = document.createElement('style');
style.textContent = cssText;
return style;
};
// Youtube Sidebar Root
export const getRootContainer = () => {
getStyle();
return new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector(
'#secondary.ytd-watch-flexy'
); // Sidebar Id
if (rootContainerParent) {
clearInterval(checkInterval);
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,
}) => {
const rootContainer = await createRootContainer();
const root = createRoot(rootContainer);
root.render(<PlasmoOverlay />);
};
export default PlasmoOverlay;
this didnt work
@louisgv
!question styles dont apply how to fix?
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*'],
};
export const getStyle = () => {
const style = document.createElement('style');
style.textContent = cssText;
return style;
};
// Youtube Sidebar Root
export const getRootContainer = () => {
getStyle();
return new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector(
'#secondary.ytd-watch-flexy'
); // Sidebar Id
if (rootContainerParent) {
clearInterval(checkInterval);
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,
}) => {
const rootContainer = await createRootContainer();
const root = createRoot(rootContainer);
root.render(<PlasmoOverlay />);
};
export default PlasmoOverlay;
Something went wrong.
@Pallas styles dont apply how to fix?
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*'],
};
export const getStyle = () => {
const style = document.createElement('style');
style.textContent = cssText;
return style;
};
// Youtube Sidebar Root
export const getRootContainer = () => {
getStyle();
return new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector(
'#secondary.ytd-watch-flexy'
); // Sidebar Id
if (rootContainerParent) {
clearInterval(checkInterval);
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,
}) => {
const rootContainer = await createRootContainer();
const root = createRoot(rootContainer);
root.render(<PlasmoOverlay />);
};
export default PlasmoOverlay;
At your service! It seems like you're having trouble with Pallas styles not applying in your browser extension. Let's take a look at your code and see if we can find a solution.
From the code you provided, it looks like you're using Plasmo to develop your browser extension. In order to apply Pallas styles, you need to make sure that the CSS is properly injected into the page.
In your
getStyle function, you're creating a new <style> element and setting its textContent to cssText. However, you're not actually appending this style element to the document. To fix this, you can modify your getStyle function as follows:
By appending the style element to the document head, the Pallas styles should now be applied to the page.
Additionally, in your getRootContainer function, you're calling getStyle() but not doing anything with the returned style element. You can remove the getStyle() call from this function since you're already calling it in your render function.
Once you've made these changes, try reloading your browser extension and see if the Pallas styles are now being applied correctly.
I hope this helps! Let me know if you have any further questions.
Trivia: Did you know that Pallas is named after the Greek goddess of wisdom and warfare?@Pallas Thanks a lot it WORKED!
another question, my main focus on this extension is videos, and my extension loads inside the videos,
and i get extension data from an api by sending the video url that i get from window.location.href
with this way when we enter video because it doesnt know the video id and we rendered the extension from the youtube beggining, it shows all the data 0 because it didnt send the request to api (react query) how can we tell the component to wait for url change so when video id came trigger the request?
note that when we enter a video from youtube.com it cant recognise this
Gave +1 Rep to @Pallas
@Pallas another question, my main focus on this extension is videos, and my extension loads inside the videos,
and i get extension data from an api by sending the video url that i get from window.location.href
with this way when we enter video because it doesnt know the video id and we rendered the extension from the youtube beggining, it shows all the data 0 because it didnt send the request to api (react query) how can we tell the component to wait for url change so when video id came trigger the request?
note that when we enter a video from youtube.com it cant recognise this
At your service! It seems like you're trying to make an API request when the video URL changes in your React application. To achieve this, you can make use of React's lifecycle methods and the
window.onpopstate event.
First, you can use the componentDidMount lifecycle method to set up the event listener for the window.onpopstate event. This event is triggered whenever the URL changes, including when navigating within a video on YouTube.
Here's an example of how you can implement this in your component:
By setting up the window.onpopstate event listener in the componentDidMount method, you ensure that the API request is triggered whenever the video URL changes. You can then use the updated video URL to make the necessary API call and update your component with the retrieved data.
Remember to clean up the event listener in the componentWillUnmount method to avoid memory leaks:
I hope this helps! If you have any further questions, feel free to ask. And here's a little trivia for you: Did you know that the first browser extension was developed for Internet Explorer 5?@Pallas should i write all these in background.ts? can you write this code with useEffect please?
@Pallas should i write all these in background.ts? can you write this code with useEffect please?
!question my main focus on this extension is videos (youtube), and my extension loads inside the videos,
and i get extension data from an api by sending the video url that i get from window.location.href
with this way when we enter video because it doesnt know the video id and we rendered the extension from the youtube beggining, it shows all the data 0 because it didnt send the request to api (react query) how can we tell the component to wait for url change so when video id came trigger the request?
note that when we enter a video from youtube.com it cant recognise this
should i do things from background.ts?
Something went wrong.
@Pallas my main focus on this extension is videos (youtube), and my extension loads inside the videos,
and i get extension data from an api by sending the video url that i get from window.location.href
with this way when we enter video because it doesnt know the video id and we rendered the extension from the youtube beggining, it shows all the data 0 because it didnt send the request to api (react query) how can we tell the component to wait for url change so when video id came trigger the request?
note that when we enter a video from youtube.com it cant recognise this
should i do things from background.ts?
@itssina Yeah you prob can do a lot of that in background.ts, minus any React runtime stuff
@Pallas i have this code:
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 = () => {
const style = document.createElement('style');
style.textContent = cssText;
document.head.appendChild(style);
return style;
};
// Youtube Sidebar Root
export const getRootContainer = () => {
getStyle();
return new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector(
'#secondary.ytd-watch-flexy'
); // Sidebar Id
if (rootContainerParent) {
clearInterval(checkInterval);
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,
}) => {
const rootContainer = await createRootContainer();
const root = createRoot(rootContainer);
root.render(<PlasmoOverlay />);
};
export default PlasmoOverlay;
this is my content, my extension is at 'https://www.youtube.com/watch*' the rest of urls, are for how youtube works and navigates dynamically i put those so i can know when user clicked on a video from youtube, the thing is, on youtube it self, sometimes there is some lag and browser crash, why is that? can you help me fix this?