🧩 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

HMR becoming less and less reliable as project size grows

Originally the HMR worked very well however as my project has grown in size (over 100 files) it has become less reliable. According to the dev server it is repackaging the extension when I save. However when I then reload the page for the content script those changes are not there. Instead I have to restart the dev server to see the new changes.

Default port and `--serve-port`

Hey framework team. Your docs indicate that the default port is 1012, but my dev server appears to be using 1816 or 6XXXX. The second port changes each time I run the dev server, so I see 63858, 63890, 64191. When I run my Plasmo dev server and then do sudo lsof -i -P | grep LISTEN | grep :$PORT those two ports, plus the expected 1815 for HMR, are the only new ports listed. Secondarily, when I add plasmo dev --serve-host=localhost --serve-port-1012 to my package.json scripts (or another port like 8080) appears to have no effect. I still see 1815, 1816 and 6XXXX. For example, I have "dev": "plasmo dev --serve-host=localhost --serve-port-1012", in my package.json and just ran pnpm dev and the ports are 1815m 1816 and 64191...

different WINDOW variables

I have a script that creates an object that I need to use inside the window variable. I insert this script like this: ```js const script = document.createElement('script') script.type = 'text/javascript'...

Overriding the default renderer

I'm trying to override the default renderer so I can use a custom mutation observer (clicking on next page on the SPA does a scroll to top so I want to wait for it to finish to stop 10 components all requesting data at once). When using an inline anchor, I can see the anchor appearing with a type of inline, but the createContainer seems to throw an exception with: TypeError: Cannot read properties of undefined (reading 'type'). When using an inline anchor list I can't see anything being logged to the console. ...

Messaging Port API BGSW->sidepanel

Hello! I am having a hard time understanding if Plasmo currently supports the Mesaging API for sending a message from the BGSW to a content script (or in my case, a sidepanel). The docs summary seems to say it exists, but then it doesn't look like the documentation is there yet. Also, the design of the port event handlers has a (req, res) as if it is just immediately responding to messages instead of keeping a connection. In order to send a message from the background, I need to have a reference...

Css bundling - Css modules + classnames breaks

Hi! I am quite far in the process of migrating my extension to plasmo framework. I managed to make most of the things work except the following: I use css modules (with sass) and the classnames package to append multiple classes. In most of my react components I receive as prop the className which should also apply to the component(a quite common pattern) like this:...
No description

Remix production cannot sendToBackgroundViaRelay

I use a SAAS of remix at https://github.com/dev-xo/remix-saas/tree/main/docs and intergrate with plasmo extension with sendToBackgroundViaRelay so that i can proxy my apis call from web to extension ```tsx // on index.tsx export default function DashboardIndex() { const { t } = useTranslation()...

how do you change the styling of a page or inject your UI in it.

so I am trying to inject into the youtube secondary div or something but badly failing it, in the content.jsx file.

Refused to evaluate a string as JavaScript

Hello, I'm trying to use Vue with the Vuelidate library to validate my inputs, but when I try to validate it gives me the error: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' http://localhost". How would I go about resolving this?...

Error when upgrading from 0.55 to 0.88

I'm upgrading from v0.55 to latest version 0.88.0, then i run pnpm dev --verbose and got this error. Can anoyone help me sovle this? EISDIR: illegal operation on a directory, read...
No description

Get tab id in side panel for both Chrome and Firefox?

I've been getting the tab id by running this code in the side panel when it's loaded: ``` const tabIdRes = await chrome.tabs.query({ active: true, currentWindow: true...

Error building extension

Hi all. After having been able to successfully build our extension for weeks, we have started to encounter the below error during the build process. We have tried variously bumping node versions up and down, swapping all plasmo-related package versions, etc., to no avail. Any help or insight appreciated....
No description

Issue testing code with plasmo/storage dependancies with Jest

The dependancy that plasmo/storage has on pify causes any jest tests that touch that code to fail with an error Jest encountered an unexpected token ...

Any tips to speed up `plasmo build` build times?

There are times I find myself developing and building my extension using plasmo build instead of plasmo dev in sessions where I need to do lots of code edits, and I don't want the hot-reload firing on every file save - which results in increased CPU load on my machine. But as you can see in the screenshot the builds can take up to 9-13 seconds - not the best when in the flow of things. Are there any ways I can improve this? ...
No description

Build config

Is there a build hook? I want to clear all console.log() related code in the code when building the project file.

Execute csui conditionally

Hi! Q1: How can I invoke chrome.scripting.executeScript, with the files argument, I mean how do I reference the file, let’s suppose I want to execute a script that it’s in src/scripts/customScript.ts. I’ve tried passing the relative path but it doesn’t seem to work. Q2: how can I trigger a CSUI only when a certain action happened (conditionally) (context; In my case only if I received a specific websocket message.) ...

How to use react-select in content script ui

Hi! I am trying to use react-select to display a more complex dropdown in CSUI, but styles are not correctly injected in the shadow dom. I need some help figuring this out, how could I fix the styling for external components. Any help is greatly appreciated!...

Main World Content Script not working on localhost

I've created an extension using plasmo, with default code ``` export const config: PlasmoCSConfig = { matches: ["<all_urls>"], world: "MAIN"...
Solution:
Solved Was able to solve it by modifying the manifest in package json. Updated manifest : ``` "manifest": { "host_permissions": [...