It's Sina Posts - Answer Overflow

It's Sina

•Created by It's Sina on 8/31/2023 in #👟framework

Dynamic Roots and all queries

hi, im developing this extension that adds an emoji to the textbox in youtube textboxes, the problem is all textboxes are hidden, there is a reply button on every comment and when you press it the textbox shows up now here i want to show the emoji icon from my extension, the problem is this works only once and when i close the reply or open another one its not there export const config: PlasmoCSConfig = { matches: ['https://studio.youtube.com/*'] }; const getStyle = () => { if (!document.getElementById('mastertube')) { const style = document.createElement('style'); style.id = 'mastertube'; style.textContent = cssText; document.head.appendChild(style); return style; } }; // Youtube Sidebar Root export const getRootContainer = () => { return new Promise((resolve) => { const checkInterval = setInterval(() => { const rootContainerParent = document.querySelector( '#reply-dialog-container > #reply-dialog-id > div#body > div#main > #input-container > #outer > #child-input > tp-yt-iron-autogrow-textarea#textarea > div.textarea-container' ); // Sidebar Id console.log(rootContainerParent); if (rootContainerParent) { clearInterval(checkInterval); getStyle(); const rootContainer = document.createElement('div'); rootContainerParent.insertBefore( rootContainer, rootContainerParent.firstChild ); resolve(rootContainer); } }, Infinity); }); }; // 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;

3 replies

PD🧩 Plasmo Developers

•Created by It's Sina on 8/27/2023 in #👟framework

Api requests not sending in Firefox

i've built this extension, there are a lot of api requests, these are working in chrome smoothly, when i build my extension with --target of firefox all works great but non of my requests even fire

50 replies

PD🧩 Plasmo Developers

•Created by It's Sina on 7/23/2023 in #👾extension

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

93 replies

PD🧩 Plasmo Developers

•Created by It's Sina on 7/12/2023 in #🔰newbie

Triggering Data fetch while Plasmo not knowing about url change

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

3 replies

PD🧩 Plasmo Developers

•Created by It's Sina on 7/7/2023 in #🔰newbie

Triggering popup.tsx from content.tsx

in my application, i should open the popup by clicking button on the content, how can i do that?

25 replies

PD🧩 Plasmo Developers

•Created by It's Sina on 7/6/2023 in #🔰newbie

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 */

21 replies

PD🧩 Plasmo Developers

•Created by It's Sina on 7/5/2023 in #🔰newbie

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?

12 replies

Gaming

Programming