PD
🧩 Plasmo DevelopersAP

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!
Jeremy
Jeremy•46d 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
AP
AP•39d ago
yep did something similar
Want results from more Discord servers?
Add your server
More Posts
Pin Side Panel like google searchI've been searching for a way to enable a direct button for my extension Side Panel. Accessing it eaHow to listen to all HTTP requests?I'm trying to build an extension that allows me to listen to HTTP requests, much like `chrome.webReqHow do I disable the popup in dev mode?Hi, newbie here. I'm trying to make it so that I can disable/enable the popup in the options page buAdding Supabase later instead of starting with it?Hey everyone, I started a Plasmo project initially `--with-nextjs`, now I want to use the MessagingHow to send API requests with messaging?Hey everyone, I can't seem to figure out on my own how to send API calls using Plasmo? I see a lot Is Vanilla JavaScript supported?Hey! Does Plasmo support vanilla JavaScript only?Struggling with Plasmo Messaging API: Sending Message from CSUI to BGSW IssueHey guys, I've tried so far to understand how Plasmo Messaging API works (from CSUI to BGSW) and altHow can I listen to all requests?I am trying to create an extension that will intercept all requests that were made on the webpage. H