🧩 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

Fresh install with errors

After installing Plasmo and manually adding tailwind I'm getting this error. I've ran audit fix multiple times, but this resulted in bricking the entire installation. Even when removing everything (node_modules, .plasmo and package_lock.json) and resetting the package.json back to it's original state. Not sure what is going on, but something is wrong....
No description

Importing Tailwind CSS stylesheets for every content script UI component: how bad for performance?

So, I've really been struggling getting Tailwind to play nicely with Plasmo, and specifically content script UI components (CSUI). My components are being overlaid into the hosting webpage which means I don't have the ability to just import one stylesheet at a "root" level (or maybe I can? I dunno) and instead have many of my own components inserted into the UI within a shadow root element. Unfortunately, since I don't have a normal root for all my components that means that I need to import the styles for each component individually, and since I'm using Tailwind that seems to mean that I have to import the globals.css file for Tailwind (which also imports other stylesheets into itself) for each component.The overall size of this import is not negligible and since my components append themselves to posts on a social media feed I'm also concerned that the issue could be exacerbated. My question is: how much of an issue is this for performance? I am mostly concerned about each component having a <style> element containing kilobytes of CSS rules. At what point does this become a performance issue? Does each component's stylesheet need to be parsed or is there opportunity for caching? Does the extra size of the DOM also make lookups, etc more costly, etc? Would love some feedback. Thank you!...
No description

Is there a way to hook into the plasmo dev build?

I would like to run something every time the extension rebuilds in development. (This would be before it builds, not after). Something like Parcel macros would be ideal but this is only available in Parcel 2.12.x. Any chance we can bump parcel-core in the next release? Is there another way? Is there a concept of Plasmo plugins (for dev)?...

contents

Hello everyone, I have a question regarding the implementation of contents in the Plasmo framework. Due to the use of Tailwind CSS for styling, the styles of the plugins interfere with the original webpage when I have a content UI. When I don't enable contents, the original webpage's styles are normal. I have set up style isolation following the tutorial, but it's not working. Could anyone advise on how to solve this situation?
No description

wasm file is not accessible from main world

I have an example repo(https://github.com/Lidne/plasmo_example) which shows the problem - wasm file is not accessible from main world. When I try to access it, js crashes with error ``` TypeError: Failed to fetch at loadWasm (wasm_exec.js:684:28) at 1aHT9.raw:~/assets/wasm/main.wasm (wasm_exec.js:692:1) at newRequire (wasm_exec.2b77078d.js:72:24)...

Programmatically adding React components via createRoot + render gives "Invalid Hook Call" error

This really sucks. I want to be able to programmatically mount React components from my content script when I feel like it, but if I try to use createRoot and render from react-dom then I just get an Invalid hook call error. Here is my plasmo-inline.ts content script that I was using from the with-content-scripts-ui example: ``` import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"...

GET chrome-extension://invalid/ net::ERR_FAILED

Hey, I just found out about your framework and trying to make extension that scrape currently viewed linkedin profile, but as soon as I added linkedin to basic plasmo example with changing background to pink I got over 1300 errors, any ideas how to fix it?
No description

How can I add global style into Tab & Popup with emotionjs?

Hi Plasmo Team and Community, I’m currently using Plasmo to develop a Chrome extension and trying to add global styles to a tab page using Emotion. However, I couldn’t find relevant examples or documentation to achieve this. I would appreciate your guidance....

Error with getting started tutorial

I'm new to the framework I just tried to create a new plasmo app using pnpm create plasmo, but every time I do this and cd into the directory to do a pnpm dev I get a malloc error: 🟣 Plasmo v0.89.4 🔴 The Browser Extension Framework 🔵 INFO | Starting the extension development server......

Svelte popup is not working from the with-svelte example

I have cloned the repo, installed using pnpm i and run dev server pnpm run dev. When I load the unpacked extension and click on it, doesnt open the popup. I also checked there is no popup html in the generated manifest in build directory, but it works with popup.tsx...
Solution:
It works now, the problem was with svelte config. ```js import preprocess from "svelte-preprocess" ...

Tree shaking

Hi all! I'm on the SDK team at clerk.com and adapting the SDKs to work with Plasmo and MV3. However, I'm running into an issue where the code doesn't appear to be appropriately tree-shaken. This is causing problems with extension approvals, as code that includes (unused) references to remotely hosted code remains in the bundle. I see several issues/comments about this on GitHub, and I would like to gain some insight into its current state....

@swc/types not resolving?

I had been using CRXjs, but recent chrome updates have made that extension framework unusable. Working on learning plasmo so I can convert my project to it. Trying to setup a basic options page example following the with-options example. When I run plasmo dev, I get the following: ``` 🟣 Plasmo v0.89.3...

How can I change tab title?

I'm still getting undefined as document.title in rendered html 😕

Plasmo with next-js routing?

I noticed that plasmo supports next.js in this example: https://github.com/PlasmoHQ/examples/tree/main/with-nextjs , but I am not sure how mounting works here? Typically with CSUI you indicate when and how to inject elements, but in this case I imagine the file-based routing is somehow leveraged? How does plasmo know what you want?

Is there a way to watch storage changes for all keys, or keys matching a prefix?

I want to get updates on all changes to storage, or all changes to keys matching "example_*"

Svelte 5 support in Plasmo?

Hey just curious if there are any plans to bring Svelte 5 support to Plasmo so we can use svelte.ts and svelte.js files and some of the newer neat syntactic sugar? Thanks.

Installation aborted because the add-on appears to be corrupt.

I submitted the build to firexfox using this command and it's giving me this error when I try to install it: plasmo build --no-minify --no-hoist --zip --target=firefox-mv2 Installation aborted because the add-on appears to be corrupt....
No description

Dynamically Injecting Content Scripts with Plasmo CSUI

I'm working on a browser extension and wondering about the feasibility of loading external scripts dynamically. I understand that Chrome Web Store policies are generally restrictive when it comes to dynamic script injection, especially for security reasons, but I'm interested in whether anyone has found long-term success with this kind of setup (for example for when different users are paying for different features). Specifically: - Has anyone been able to dynamically load external resources or scripts without facing issues during Web Store review or updates?...

Does each CSUI component get a separate React copy?

The Content Script documentation says: "A script that ends with .ts will not have front-end runtime (react/vue/svelte) bundled with it and won't be treated as a ui script, while a script that ends in .tsx, .vue or .svelte, will be." Just curious if each CSUI component gets its own copy of Reach or if somehow Plasmo manages to share the same React dep with all components. Thanks....

Simply adding a file to the root of the chrome-mv3 folder for dev and production when running plasmo

I need to add a schema.json file to the root (for development and production once distributed). Is there a straightforward way to achieve bundling the file and having it located in the root of the bundle? - it must be in the root - see above; so NOT in the assets folder...
Solution:
It's as easy as adding the file to the root and then including it in package.json's manifest 😰 `"web_accessible_resources": [ { "resources": [...
Next