youtube videos need to refresh when clicked from youtube
this is my content.tsx file:
import type {
PlasmoCSConfig,
PlasmoCSUIJSXContainer,
PlasmoCSUIProps,
PlasmoRender,
} from 'plasmo';
import type { FC } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';
import { App } from '~components';
// Specific Url Where Extension Injects
export const config: PlasmoCSConfig = {
matches: ['https://www.youtube.com/watch*'],
};
// Youtube Sidebar Root
export const getRootContainer = () =>
new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector('#secondary'); // 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.tsx file, i want this extension to load to youtube videos sidebar, the sidebar has id of #secondary so it loads when you copy the link of a youtube video and go inside of it, or you open the video from youtube itself and refresh once, the extension loads,
but when i click a video from youtube, content.tsx doesnt understand that the url changed and now it matches the url, can you help me with this?10 Replies
!question this is my content.tsx file:
import type {
PlasmoCSConfig,
PlasmoCSUIJSXContainer,
PlasmoCSUIProps,
PlasmoRender,
} from 'plasmo';
import type { FC } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';
import { App } from '~components';
// Specific Url Where Extension Injects
export const config: PlasmoCSConfig = {
matches: ['https://www.youtube.com/watch*'],
};
// Youtube Sidebar Root
export const getRootContainer = () =>
new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector('#secondary'); // 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.tsx file, i want this extension to load to youtube videos sidebar, the sidebar has id of #secondary so it loads when you copy the link of a youtube video and go inside of it, or you open the video from youtube itself and refresh once, the extension loads,
but when i click a video from youtube, content.tsx doesnt understand that the url changed and now it matches the url, can you help me with this?@itssina has reached level 3. GG!
Something went wrong.
!question this is my content.tsx file:
import type {
PlasmoCSConfig,
PlasmoCSUIJSXContainer,
PlasmoCSUIProps,
PlasmoRender,
} from 'plasmo';
import type { FC } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';
import { App } from '~components';
// Specific Url Where Extension Injects
export const config: PlasmoCSConfig = {
matches: ['https://www.youtube.com/watch*'],
};
// Youtube Sidebar Root
export const getRootContainer = () =>
new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector('#secondary'); // 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.tsx file, i want this extension to load to youtube videos sidebar, the sidebar has id of #secondary so it loads when you copy the link of a youtube video and go inside of it, or you open the video from youtube itself and refresh once, the extension loads,
but when i click a video from youtube, content.tsx doesnt understand that the url changed and now it matches the url, can you help me with this?
Something went wrong.
!question this is my content.tsx file:
import type {
PlasmoCSConfig,
PlasmoCSUIJSXContainer,
PlasmoCSUIProps,
PlasmoRender,
} from 'plasmo';
import type { FC } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';
import { App } from '~components';
// Specific Url Where Extension Injects
export const config: PlasmoCSConfig = {
matches: ['https://www.youtube.com/watch*'],
};
// Youtube Sidebar Root
export const getRootContainer = () =>
new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector('#secondary'); // 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.tsx file, i want this extension to load to youtube videos sidebar, the sidebar has id of #secondary so it loads when you copy the link of a youtube video and go inside of it, or you open the video from youtube itself and refresh once, the extension loads,
but when i click a video from youtube, content.tsx doesnt understand that the url changed and now it matches the url, can you help me with this?
Something went wrong.
!question this is my content.tsx file:
import type {
PlasmoCSConfig,
PlasmoCSUIJSXContainer,
PlasmoCSUIProps,
PlasmoRender,
} from 'plasmo';
import type { FC } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';
import { App } from '~components';
// Specific Url Where Extension Injects
export const config: PlasmoCSConfig = {
matches: ['https://www.youtube.com/watch*'],
};
// Youtube Sidebar Root
export const getRootContainer = () =>
new Promise((resolve) => {
const checkInterval = setInterval(() => {
const rootContainerParent = document.querySelector('#secondary'); // 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.tsx file, i want this extension to load to youtube videos sidebar, the sidebar has id of #secondary so it loads when you copy the link of a youtube video and go inside of it, or you open the video from youtube itself and refresh once, the extension loads,
but when i click a video from youtube, content.tsx doesnt understand that the url changed and now it matches the url, can you help me with this?
Something went wrong.
@Pallas my main focus on extension im building 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 i can get it from dom too.
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 or dom change so when video id came, trigger the request and fill the data?
note that when we enter a video from youtube.com it cant recognise this because of how youtube works,
should i do things from background.ts? or watchOverlayAnchor? please help me
@Pallas my main focus on extension im building 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 i can get it from dom too.
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 or dom change so when video id came, trigger the request and fill the data?
note that when we enter a video from youtube.com it cant recognise this because of how youtube works,
should i do things from background.ts? or watchOverlayAnchor? please help me