🧩 Plasmo Developers•2y ago

How Insert CSUI when Extension Action Icon is clicked

Hi, I am using React to write Plasmo. I just want to click the icon to inject CSUI when I want to use the extension. I don't want CSUI to inject automatically because I may not need to use it in most cases. Is there a good way to do this?

6 Replies

lab•2y ago

You can use this API: https://developer.chrome.com/docs/extensions/reference/scripting/#method-executeScript

yuuki-yuunaOP•2y ago

Thank you for your reply, but I am unable to load files in relative paths when using this API. Just like this.

// /src/background/index.ts
chrome.action.onClicked.addListener((tab) => {
  console.log('action click', tab.id)
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['../menu/index.tsx'] // I have a tsx file at /src/menu/index.tsx
  })
})

// /src/background/index.ts
chrome.action.onClicked.addListener((tab) => {
  console.log('action click', tab.id)
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['../menu/index.tsx'] // I have a tsx file at /src/menu/index.tsx
  })
})

YAGPDB.xyz•2y ago

Gave +1 Rep to @louis

lab•2y ago

You will need to use it with this: https://docs.plasmo.com/framework/import We don't transform chrome's call directly yet, but through these import schemes perhaps one day we will make an abstraction on top of these xd...

yuuki-yuunaOP•2y ago

It doesn't work. like this:

import Menu from 'url:~/menu'

chrome.action.onClicked.addListener((tab) => {
  console.log('action click', tab.id)
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: [Menu] // can not load
  })
})

import Menu from 'url:~/menu'

chrome.action.onClicked.addListener((tab) => {
  console.log('action click', tab.id)
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: [Menu] // can not load
  })
})

or this:

chrome.action.onClicked.addListener((tab) => {
  console.log('action click', tab.id)
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['url:~/menu/index.tsx'] // can not load
  })
})

chrome.action.onClicked.addListener((tab) => {
  console.log('action click', tab.id)
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['url:~/menu/index.tsx'] // can not load
  })
})

lab•2y ago

yeah it needs a relative path xD you will need to massage the received string - console log it out try to get just the last portal :d Something like this:

import menuUrl from 'url:~/menu'

menuUrl.split("/").pop()

import menuUrl from 'url:~/menu'

menuUrl.split("/").pop()

Gaming

Programming

How Insert CSUI when Extension Action Icon is clicked