🧩 Plasmo Developers

PD

🧩 Plasmo Developers

Join the community to ask questions about 🧩 Plasmo Developers and get answers from other members.

Join

👾extension

👟framework

🔰newbie

🦉pallas

Trigger a function when opening the Popup?

I know you can create a popup.tsx file, to show JSX when clicking on the extension icon. Is it possible to trigger a function instead of render content, when clicking on the extension icon? For example, when user clicks on the extension icon, instead of showing content in the popup window - trigger a function to change storage state? Thanks in advance...

Scoping Tailwind to the extension

I have an extension and tailwind css is working very well, however on some sites I see that the content page is being effected by the page styles and all the tailwind styles are reset. Is there a way to scope tailwindcss to the content of the extension? For example this is a page that is affecting the tailwind styles (Spicy Black Bean Soup) And this is what it looks like on most pages...
No description

How do I set globalthis.__VUE_PROD_DEVTOOLS__

I'm getting an error stating that __VUE_OPTIONS_API__ and __VUE_PROD_DEVTOOLS__ are not defined. While the error was definitely present, it didn't really cause an issue when developing my newtab but now that I've moved on to to popup, it throws the error every time I click on the extension icon and the popup is empty. The exact error is: ```VUE_OPTIONS_API, VUE_PROD_DEVTOOLS are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle. ...

Live reloading showing extension one state older than current code

Whenever I save some files, and the extension reloads, the page refreshes and shows me extension built using older version of code. So I have to reload the extension twice after each change so that the browser reflects the latest code and not the old code. I am using Google Chrome. Is there any way to fix this bug?...

Injecting content-ui component to several same-class elements

I'm developing a chrome extension for gmail which injects an input in the compose box, probkem is whenever i create a new compose box (you can craete several boxes in gmail), the component doesn't inject, although it has the same classes and everything. i tried using an anchor list but still no result.

having trouble with matching

Hi, im having trouble with matching certain url's with queries. is this even possible in plasmo?

how to stop "Context Invalidated, Press to Reload"?

It used to appear when I refreshed my extension, but after some new changes in my codebase, it seems to be appearing repeatedly without any changes in extension. I want to disable "Context Invalidated, Press to Reload". What would be a quick way (just make it disappear) to stop this, and what would be the right way (fix my codebase, but what?) to stop this?

Can't get tailwind CSS to import

I set up plasmo with the with-src flag and replaced react with vue and then added tailwind. Everything is working great until I try to import the style.css file. I am working with an index.vue file in the /src/newtab directory. I have tried adding an index.html file and load the stylesheet the traditional way with a link element, I have tried importing in both the style and script tags of the vue component and I've tried adding it with the background.ts file. Every time, no matter which method I use, I get the following error: Unexpected token Number { has\_sign: false, value: 50.0, int\_value: Some(50) } In the style tag of the vue component I used the following syntax: @import "~/style.css" ...

Triggering Data fetch while Plasmo not knowing about url change

my main focus on extension im building is videos (youtube), and my extension loads inside the videos, and i get extension data from an api by sending the video url that i get from window.location.href i can get it from dom too. with this way when we enter video because it doesnt know the video id and we rendered the extension from the youtube beggining, it shows all the data 0 because it didnt send the request to api (react query) how can we tell the component to wait for url change or dom change so when video id came, trigger the request and fill the data? note that when we enter a video from youtube.com it cant recognise this because of how youtube works, should i do things from background.ts? or watchOverlayAnchor? please help me...

Opening & Closing Content(CSUI) Script when extension icon is clicked

i've some entire react component tree that is rendered using in context.tsx file, it has opening and closing mechanism through state, but i want that my extension(entire should) open & close when i click on browser icon, anybody has idea how to solve this? one of the things that i notice and tried was to render popup.tsx conditionally, and try to give it some css hack. but that didn't work. Also give suggestions if you're mange do something like this using a different approach....

Is there documentation or a tutorial somewhere on how to use the useFirebaseDoc hook?

Im trying to read from cloud firestore. I have already managed to write data. Any help is appreciated!

Triggering popup.tsx from content.tsx

in my application, i should open the popup by clicking button on the content, how can i do that?...

tailwind not injecting styles

hi, this is my tailwind.config.js ` / @type {import('tailwindcss').Config} */ module.exports = { content: ['./src//*.{tsx,html}'],...

youtube videos need to refresh when clicked from youtube

this is my content.tsx file: ` import type { PlasmoCSConfig, PlasmoCSUIJSXContainer,...

Why isn't React router dom working in my popup.tsx?

``` return ( <> <BrowserRouter> <Routes>...

Is plasmo forcing my vs code to use double quotes?

I wonder if my prettier plugin is managed automatically by plasmo.

dev build Emfile error

Hello there, I am working on an extension project using plasmo, since few days I am getting an EMFILE error: « too many open files » on the npm run dev command. I feel that I reach a point where the hot reload can not watch all the files anymore because I don’t have the problem on the npm run build command. ...

Build options page async

Hi, I need to return component in async callback This is current version chrome.storage.sync.get(constants.storageKey, function (value: DSStorageSettings) { const settings = getSettings(value)...

getStyle API not firing?

I'm using the API in one of my content scripts: export const getStyle: PlasmoGetStyle = () => { console.log('RUNNING); const style = document.createElement("style")...

Using Plasmo in Nx Monorepo

Hi guys, I'm trying to integrate Plasmo into Nx Monorepo, want to know if anyone tried and got it working? It would be very grateful if there is a project.json configuration file to share