AP Posts - Answer Overflow

Explore posts from servers

•Created by AP on 2/10/2024 in #👾extension

Help with showing script ui. (content.tsx) when clicking on chrome extension

Hi! I'm trying to show the script ui (modal content using a content script ui) when clicking on the chrome extension icon instead of showing a popup. I have this in content.tsx:

export const CustomModal = () => {
  const [open, setOpen] = React.useState(false)
  const [isVisible, setIsVisible] = useState(false)

 {/* Other code content */}

 useEffect(() => {
    const handleMessage = (
      request: Request,
      sender: any,
      sendResponse: any
    ) => {
      if (request.action === "toggleModal") {
        setIsVisible(!isVisible)
      }
    }

chrome.runtime.onMessage.addListener(handleMessage)

    return () => chrome.runtime.onMessage.removeListener(handleMessage)
  }, [isVisible])

  if (!isVisible) return null

  return (
    <div>
      {open && (
        <div
          ref={modalRef}
          style={{
            cursor: "grab",
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)"
          }}
          onMouseDown={onMouseDown}>

 {/* Other modal content */}

export const CustomModal = () => {
  const [open, setOpen] = React.useState(false)
  const [isVisible, setIsVisible] = useState(false)

 {/* Other code content */}

 useEffect(() => {
    const handleMessage = (
      request: Request,
      sender: any,
      sendResponse: any
    ) => {
      if (request.action === "toggleModal") {
        setIsVisible(!isVisible)
      }
    }

chrome.runtime.onMessage.addListener(handleMessage)

    return () => chrome.runtime.onMessage.removeListener(handleMessage)
  }, [isVisible])

  if (!isVisible) return null

  return (
    <div>
      {open && (
        <div
          ref={modalRef}
          style={{
            cursor: "grab",
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)"
          }}
          onMouseDown={onMouseDown}>

 {/* Other modal content */}

my background.ts:

// src/contents/background.ts

chrome.action.onClicked.addListener((tab) => {
  if (tab.id) {
    // Execute a function in the context of the webpage
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: sendMessageToContentScript
    })
    // Send a message directly to the content script
    chrome.tabs.sendMessage(tab.id, { action: "toggleModal" })
  }
})

function sendMessageToContentScript() {
  console.log("Sending message to content script")
  chrome.runtime.sendMessage({ action: "toggleModal" })
}

// src/contents/background.ts

chrome.action.onClicked.addListener((tab) => {
  if (tab.id) {
    // Execute a function in the context of the webpage
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: sendMessageToContentScript
    })
    // Send a message directly to the content script
    chrome.tabs.sendMessage(tab.id, { action: "toggleModal" })
  }
})

function sendMessageToContentScript() {
  console.log("Sending message to content script")
  chrome.runtime.sendMessage({ action: "toggleModal" })
}

What I'm confused on: - do we still have to compile the tsx/ts files to js using tsc? if so, would those compiled files be in the .plasmo or build directory? - do we need to make any changes in package.json or tsconfig.json as well? thanks ahead!

4 replies

Gaming

Programming