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

DTDrizzle Team

•Created by AP on 1/6/2024 in #help

Error: read supabase/migrations/meta: is a directory

Was following a tutorial on using supabase and drizzle locally, and kept running into this problem. I didn't want to move the meta directory for the sake of the tutorial. here is the tutorial I followed: https://orm.drizzle.team/kit-docs/quick https://www.youtube.com/watch?v=_OqMRtg4Gy8&t=469s https://github.com/thorwebdev/edgy-drizzle The command I ran: supabase start

supabase start        
Applying migration 0000_burly_raza.sql...
Applying migration meta...
Error: read supabase/migrations/meta: is a directory
After statement 0: 
Try rerunning the command with --debug to troubleshoot the error.

supabase start        
Applying migration 0000_burly_raza.sql...
Applying migration meta...
Error: read supabase/migrations/meta: is a directory
After statement 0: 
Try rerunning the command with --debug to troubleshoot the error.

not sure why im getting this. In the video, it seemed like it worked even with the meta folder in the migrations directory. tried again in a new repo and followed this tutorial, yet still didn't work. I suspect we do need the meta directory...

2 replies

Gaming

Programming