🧩 Plasmo Developers•10mo ago

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!

2 Replies

Jeremy•8mo ago

@AP Did you figure this out ? Currently also struggling to make this work :/ @AP Figured it out you need to use the Storage hook: In background.ts

import { Storage } from "@plasmohq/storage" 

chrome.action.onClicked.addListener(async (tab) => {

  console.log(" I waass clicked")
  await storage.set("isOpen", true)
})  const storage = new Storage()storage.watch({
  "isOpen": (c) => {
    console.log(c.newValue)
  },
})

In Content.tsx const [isOpenStorage, setIsOpenStorage] = useStorage("isOpen", false) And render conditionally on the isOpenStorage

APOP•8mo ago

yep did something similar

Gaming

Programming

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