🧩 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

Can i inject a content script UI at a specific time?

I want to inject some components into the host page using content script UI at a specific time, such as clicking the action icon, how can I control the timing of triggering the injection?

CSUI custom render function create default shadow DOM

I'm following this tutorial: https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer to make a custom renderer. However, I'm getting this error when the call to createRootContainer() is called (this should make the default shadow DOM: ``` ui.ts:51 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type') at injectAnchor (csui.ts:51:14)...

How does the service worker hot reload mechanism work?

Hello, hello... Very impressed with my initial look at Plasmo. Some lovely ideas and implementations in the framework 👏 I have my own internal framework that does many of the things Plasmo does including live reload on all scripts, but I'm blocked in migrating to manifest v3 as I don't know what the mechanics would be to reload a service worker....

tsconfig warning

tsconfig options "importsNotUsedAsValues" and "preserveValueImports" are deprecated. Either set "ignoreDeprecations" to "5.0" in your tsconfig.json to silence this warning, or replace them in favor of the new "verbatimModuleSyntax" flag
tsconfig options "importsNotUsedAsValues" and "preserveValueImports" are deprecated. Either set "ignoreDeprecations" to "5.0" in your tsconfig.json to silence this warning, or replace them in favor of the new "verbatimModuleSyntax" flag
thonk

How do I analyze the bundle?

I noticed my app bundle increased from 8mb to 40mb after I installed a couple of deps. Is there a way I can figure out exactly what is causing the larger bundles?

v0.71.0 builds broken

Builds from 0.70.1 work but not in v0.71.0. The error when I load the page:
caught SyntaxError: Invalid or unexpected token (at newtab.37e84fdd.js:138:183)
caught SyntaxError: Invalid or unexpected token (at newtab.37e84fdd.js:138:183)
...
Solution:
This was resolved in 0.71.1, thank you!

react-router HMR Issues when lazy-load

Is HMR working correctly for everyone? I noticed that it's no longer working for me and I have to manually refresh the page each time. The only major change I did was switch to the new React Router 6.4 system: https://reactrouter.com/en/main so it might be that

CSS selector bug

I thought I was going insane In a popup, apply a sibling selector (~) , e.g. https://codepen.io/vescoyez/pen/wMyRLP?editors=1100 It appears that Plasmo uses autoprefixer to only apply -moz- selectors, but no prefix-free ones, despite running ```shell plasmo dev --verbose...

Is it possible to specify per browser permissions?

So, the context around this question is that my extension leverages the tabGroups API, which isn't available in Firefox, and doesn't seem likely to be implemented for a very long time, but I would still like to be able to release something for Firefox. I know that I can add logic that only executes code on certain browsers, which is checked at compile-time, but is there anything I can do to have the tabGroups permission (for example) only be requested in compiled manifests targeting a specific browser?...

Not seeing background hits with use of relay

Tried out several things to have the relay package hit my BGSW. Currently attempting this: ``` import type { PlasmoCSConfig } from "plasmo"...

Using @plasmohq/messaging separately?

I have a web app that has a signup/signin process. I want to "sync" the auth state between the extension and the page. I was thinking maybe I can send a relay message from my web app using this package with a content script that's only injected on that webpage and handle it from there. The web app does NOT use plasmo but it's a plain react app, but I was wondering if I can just install the messaging package and use it there. Is this possible? Any other solution you guys have found? Thanks!...

Better way to inject scripts that allows file splitting and arguments

hey so i currently have this https://github.com/Tricked-dev/betternexus/blob/master/src/background/index.ts that executes a script but i kinda want to split it in multiple files so i can organize it more but how would i still be able to have it have the config?

Add a custom class to <plasmo-csui>

I find myself needing to add class="ytp-button" to the <plasmo-csui> so that the element shows correctly where it's injected With Svelte, of course...

Type error on CSUI

I copied and pasted the example (https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer) of the docs and it's throwing errors. Anyone knows how to fix? (ignore the component error, it does not exist)...

MUI Select component attachment point in CSUI?

Just wondering if anyone else has ran into this and what the correct fix should be. Seems like for <Select> components in CSUI when you open the dropdown the corresponding <Popover> doesn't attach to the correct element, and is appended to the document body instead, leading to the dropdown being rendered at the bottom of the page rather than directly underneath the <Select> input. The following queries also return null/empty. What am I missing here?
console.log(document.getElementById('plasmo-shadow-container')) # null
console.log(document.getElementsByClassName('plasmo-csui-container')) # []
console.log(document.getElementById('plasmo-shadow-container')) # null
console.log(document.getElementsByClassName('plasmo-csui-container')) # []
...

CSUI Styling React components without getStyle() on each component

Long time no see! I haven't been keeping up lately with Plasmo, I'm surprised with how much it has changed over a few months. Congratulations in the progress! That said, I'd love to know if there's still no way to style content scripts by just importing the style files in each individual component. Something like this, without using getStyle(): ```js...

vscode error opening .plasmo/static/common/*.tsx and .plasmo/static/common/*.ts files

how do i fix these errors in .plasmo/static/content.tsx ``` [{ "resource": "/extensionname/.plasmo/static/content.tsx", "owner": "typescript",...

browser.tabs.query({}) functionality?

Hi, is there a plasmo API to interface with the browser.tabs.query({}) API> If not, it would be nice to see, I've got a usecase for it where I need my background script to send a message to my content script. I know it would be possible to use the current plasmo messaging API to poll for new data, but that seems rather inefficient. I may be missing something here, but it doesn't seem to be possible to just send a message to the content script, without the content script having to request to be sent something....