🧩 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

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": [...

How to inject content.tsx into the opened tab when installing or updating the plugin

When installing or updating the plugin, you can directly inject content.tsx into the opened tab page. Now you need to refresh the original web page.

How can I override the extension action behaviour to show a CSUI instead.

background.ts ``` chrome.action.onClicked.addListener((tab) => { chrome.sidePanel.open({ windowId: tab.windowId }); });...