coder_iyke Posts - Answer Overflow

coder_iyke

•Created by coder_iyke on 5/21/2025 in #👾extension

Manifest.json includes web_accessible_resources I didn't add

I am having an issue where the web_accessible_resources array includes a resources array with resources I didn't add. This is causing issues with uploading to Edge extension store as the extension is rejected during the validation process. I was able to get rid of one of the resources array by deleting the getStyle function in one of the content UIs but it hasn't worked for the second one. I once had some of these resources in the project but have sice removed them, cleared .plasmo folder and deleted node_modules but no luck whatsoever. Below is my index.tsx PlasmoCSConfig

export const config: PlasmoCSConfig = {
  matches: [
    "https://*.chatgpt.com/*",
    "http://*.chatgpt.com/*",
    "https://*.deepseek.com/*",
    "http://*.deepseek.com/*",
    "https://*.claude.ai/*",
    "http://*.claude.ai/*",
    "https://*.gemini.com/*",
    "http://*.gemini.com/*",
    "http://gemini.google.com/*",
    "https://gemini.google.com/*",
  ],
  all_frames: false
}

export const config: PlasmoCSConfig = {
  matches: [
    "https://*.chatgpt.com/*",
    "http://*.chatgpt.com/*",
    "https://*.deepseek.com/*",
    "http://*.deepseek.com/*",
    "https://*.claude.ai/*",
    "http://*.claude.ai/*",
    "https://*.gemini.com/*",
    "http://*.gemini.com/*",
    "http://gemini.google.com/*",
    "https://gemini.google.com/*",
  ],
  all_frames: false
}

Below is the web_accessible_resources section of the generated manifest.json

 "web_accessible_resources": [
        {
            "matches": [
                "https://*.chatgpt.com/*",
                "http://*.chatgpt.com/*",
                "https://*.deepseek.com/*",
                "http://*.deepseek.com/*",
                "https://*.claude.ai/*",
                "http://*.claude.ai/*",
                "https://*.gemini.com/*",
                "http://*.gemini.com/*",
                "http://gemini.google.com/*",
                "https://gemini.google.com/*"
            ],
            "resources": [
                "contents.0f5514bd.css",
                "contents.5f512ce2.png"
            ]
        }
    ]

 "web_accessible_resources": [
        {
            "matches": [
                "https://*.chatgpt.com/*",
                "http://*.chatgpt.com/*",
                "https://*.deepseek.com/*",
                "http://*.deepseek.com/*",
                "https://*.claude.ai/*",
                "http://*.claude.ai/*",
                "https://*.gemini.com/*",
                "http://*.gemini.com/*",
                "http://gemini.google.com/*",
                "https://gemini.google.com/*"
            ],
            "resources": [
                "contents.0f5514bd.css",
                "contents.5f512ce2.png"
            ]
        }
    ]

I did not add any contents.css, contents.scss or contents.png but they appear in the array but not in the generated resources.

2 replies

PD🧩 Plasmo Developers

•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