🧩 Plasmo Developers•11mo ago

Multiple Content Scripts on One Page Not Working As Expected

I have a project where I need to add two elements to a webpage. A button absolutely positioned / fixed on the right side of the screen. And then a button relatively positioned to another button already on the webpage. I approach it like this

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

const CustomButton = () => {
  const [expanded, setExpanded] = useState(false)
  const { user } = useFirebaseUser()

  return (
    <button
      style={{ fontFamily: "Inter" }}
      onClick={() => {
       //...
      }}
      className={`w-[300px] h-[50px] fixed transition-all duration-300 ease-in-out top-24 right-2 bg-red-500 px-4 py-2 rounded text-lg text-white font-semibold`}>
      //...
    </button>
  )
}

export const config: PlasmoCSConfig = {
  matches: ["https://jobs.netflix.com/jobs/*"],
  css: ["../font.css"]
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
  document.querySelector("main")

export default CustomButton

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

const CustomButton = () => {
  const [expanded, setExpanded] = useState(false)
  const { user } = useFirebaseUser()

  return (
    <button
      style={{ fontFamily: "Inter" }}
      onClick={() => {
       //...
      }}
      className={`w-[300px] h-[50px] fixed transition-all duration-300 ease-in-out top-24 right-2 bg-red-500 px-4 py-2 rounded text-lg text-white font-semibold`}>
      //...
    </button>
  )
}

export const config: PlasmoCSConfig = {
  matches: ["https://jobs.netflix.com/jobs/*"],
  css: ["../font.css"]
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
  document.querySelector("main")

export default CustomButton

This is my fixed button, then am trying to add this component

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

function CustomButtonTwo() {
  return (
    <div style={{ fontFamily: "Inter" }} className="">
      <span className="">Test</span>
    </div>
  )
}

export const config: PlasmoCSConfig = {
  matches: ["https://jobs.netflix.com/jobs/*"],
  css: ["../font.css"]
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
  document
    .querySelector("#additional-file")
    .parentElement.querySelector("label > button")

export default CustomButtonTwo

export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}

function CustomButtonTwo() {
  return (
    <div style={{ fontFamily: "Inter" }} className="">
      <span className="">Test</span>
    </div>
  )
}

export const config: PlasmoCSConfig = {
  matches: ["https://jobs.netflix.com/jobs/*"],
  css: ["../font.css"]
}

export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
  document
    .querySelector("#additional-file")
    .parentElement.querySelector("label > button")

export default CustomButtonTwo

I get something like the image attached NOTE The first CSUI element is no where to be found, but previously it was showing before I added the second CSUI component. Is there some sort of limit when using multiple components? How do I anchor these to different parts of the page?

4 Replies

Sleigh•11mo ago

The more I dive into this the weirder it gets lol. It seems be intermittent, sometimes both elements are on the screen, sometimes only one is, and sometimes weird things like fonts not loading ends up happening A big part of this seems to be intermittent errors around React

Uncaught Error: Cannot find module 'react'

Uncaught Error: Cannot find module 'react'

Arcane•11mo ago

@Sleigh has reached level 2. GG!

Sleigh•11mo ago

It 100% is the react import. I added another useState in the other component that didn't have one. For some reason the react import is killing the components @Pallas Why is my CSUI component throwing this error whenever I import useState or useEffect from React? Uncaught Error: Cannot find module 'react'

Pallas•11mo ago

At your service! The "Uncaught Error: Cannot find module 'react'" error typically occurs when the React module is not properly installed or imported in your project. Here are a few possible reasons and solutions for this issue: 1. Missing React installation: Make sure you have installed React in your project. You can do this by running the following command in your project's root directory:

   npm install react

   npm install react

If you are using Yarn, you can run:

   yarn add react

   yarn add react

2. Incorrect import statement: Double-check your import statement for useState or useEffect. It should look something like this:

   import React, { useState, useEffect } from 'react';

   import React, { useState, useEffect } from 'react';

3. Incorrect file path: Ensure that the file path to the React module is correct. Make sure the 'react' module is located in the specified path. 4. Dependency conflict: It's possible that there is a conflict between different versions of React in your project. Check your package.json file for any conflicting dependencies and try to resolve them by updating or removing unnecessary packages. If none of the above solutions work, please provide more details about your project setup, such as the version of React you are using, the bundler you are using (e.g., Webpack, Parcel), and any relevant code snippets. This will help me provide a more specific solution. By the way, did you know that the name "Plasmo" comes from the Latin word "plasma," which means "something molded or formed"? It's a fitting name for a browser extension development tool that helps you mold and shape your extensions!

Gaming

Programming

Multiple Content Scripts on One Page Not Working As Expected