🧩 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

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

messaging between content scripts and tab pages

Hi I am struggling to get my head round how I would communicate between content scripts and tab pages. TlDR I want the ability to control multiple webpages in the background with a UI, is this the best way?...

Where can I see the key/value pairs saved by Plasmo's storage API in the dev tools?

I checked in the the "Application" tab, but there is nothing in storage there. Thank you!...

Why my extension doesn't update automatically sometimes?

Sometimes I'm writing code and saving it multiple times, then I save it a last time before testing, it says its re-packaged but it's actually behind, so I have to restart the dev server to see the changes.

Facing ERR_PNPM_WORKSPACE_PKG_NOT_FOUND Error while trying with-nextjs repo from examples

examples/with-nextjs on  main is :package: 0.0.1 via ⬢ v18.16.0
➜ pnpm i
 ERR_PNPM_WORKSPACE_PKG_NOT_FOUND  In : "@plasmohq/prettier-plugin-sort-imports@workspace:*" is in the dependencies but no package named "@plasmohq/prettier-plugin-sort-imports" is present in the workspace
examples/with-nextjs on  main is :package: 0.0.1 via ⬢ v18.16.0
➜ pnpm i
 ERR_PNPM_WORKSPACE_PKG_NOT_FOUND  In : "@plasmohq/prettier-plugin-sort-imports@workspace:*" is in the dependencies but no package named "@plasmohq/prettier-plugin-sort-imports" is present in the workspace
...
No description

Using environment variable for array

I'd like to do something like this in my .env file:
PLASMO_PUBLIC_DOMAINS=["http://foo.com/*", "http://bar.com/*"]
PLASMO_PUBLIC_DOMAINS=["http://foo.com/*", "http://bar.com/*"]
and then be able to reference it, e.g., in package.json:...

how can I send message to ext from a bookmarklet?

Relay maybe too heavy and I cannot figure out how to use relay in a bookmarklet. And if there is no such function, would you like to add this feature?