coder_iyke Posts - Answer Overflow

coder_iyke

•Created by coder_iyke on 10/25/2024 in #👾extension

Plasmo rerendering CSUI infinitely and using up PC memory

I have the code below that uses and anchorlist to inject multiple instances of the same component. Anchorlist is supported by plasmo but for some reason it runs in an infinite rerender loop:

import React, { useEffect, useRef, type FC } from 'react';

// import './components/SearchResults/SearchResults.scss';
import type { PlasmoCSConfig, PlasmoCSUIJSXContainer, PlasmoCSUIProps, PlasmoGetInlineAnchorList, PlasmoGetRootContainer, PlasmoRender } from 'plasmo';
import rootCss from 'data-text:../root.scss';
import { createRoot } from 'react-dom/client';

export interface SearchResultsProps {
  index?: number; // Add index to the props
  id?: string;
}

const SearchResults = ({ index, id }: SearchResultsProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    console.log(containerRef.current);
  }, []);

  return <div id={id} ref={containerRef} className={`SearchResults`}>SearchResults (Index: {index})</div>;
}

export default SearchResults;

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  // console.log('%c calling getInlineAnchorList', 'color: red; font-weight: bold;');
  const elements = document.querySelectorAll(`[data-testid="regular-listings"] > div  a:first-of-type > div > div:nth-of-type(3) > h2`);
  return elements;
  // return Array.from(elements).map((element, index) => {
  //   element.setAttribute('data-card-id', index.toString());
  //   return {
  //     element,
  //     insertPosition: 'afterend',
  //     props: { index } // Pass the index as a prop
  //   }
  // });
}

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = `
      ${rootCss}
    `;
  return style;
}

export const getRootContainer = ({ anchor }) => anchor?.element;

import React, { useEffect, useRef, type FC } from 'react';

// import './components/SearchResults/SearchResults.scss';
import type { PlasmoCSConfig, PlasmoCSUIJSXContainer, PlasmoCSUIProps, PlasmoGetInlineAnchorList, PlasmoGetRootContainer, PlasmoRender } from 'plasmo';
import rootCss from 'data-text:../root.scss';
import { createRoot } from 'react-dom/client';

export interface SearchResultsProps {
  index?: number; // Add index to the props
  id?: string;
}

const SearchResults = ({ index, id }: SearchResultsProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    console.log(containerRef.current);
  }, []);

  return <div id={id} ref={containerRef} className={`SearchResults`}>SearchResults (Index: {index})</div>;
}

export default SearchResults;

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  // console.log('%c calling getInlineAnchorList', 'color: red; font-weight: bold;');
  const elements = document.querySelectorAll(`[data-testid="regular-listings"] > div  a:first-of-type > div > div:nth-of-type(3) > h2`);
  return elements;
  // return Array.from(elements).map((element, index) => {
  //   element.setAttribute('data-card-id', index.toString());
  //   return {
  //     element,
  //     insertPosition: 'afterend',
  //     props: { index } // Pass the index as a prop
  //   }
  // });
}

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = `
      ${rootCss}
    `;
  return style;
}

export const getRootContainer = ({ anchor }) => anchor?.element;

2 replies

Gaming

Programming