🧩 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 do I make a CSUI container fill the anchor's width and height?

Working on my first browser extension and ran into this issue - I want to have the CSUI container fill anchor's width and height, so I can then use much simpler CSS to position the contents of the CSUI container wherever I want across the anchor element. In my case, the anchor element is a simple textarea(I don't need to handle the case where the textarea gets resized)....

Opening content script only if an element is present on the page?

I want to show my extension in a sidebar only if a certain value is present in the html of the page. Im looking to show the extension content sidebar only if the json+ld schema matches @article. I have a scraper function that returns content if it exists (which I already have working perfectly) but lets just pretend for this question that it simply returns a boolean. for example could this:...

how to import/use external component libraries? and how to register components?

Hello, I would like to know how to import a library that will be used throughout the project (options / popup / content / CSUI...) example: https://vuetifyjs.com/en/getting-started/installation/ And another doubt would be how do I import previously created components (.vue), mainly within the CSUI....

which is a good/scalable folder structure for a big extension?

Hi, If I want to create an extension that has several content scripts that are very long (has many lines of code) and some content scripts share some functions or classes, the same for background.ts, how should I organize my folder structure to make it scalable and easy to work with?

HMR for other chromium browsers

Is it possible to run a development server for opera, firefox, brave, edge, etc? I tried chaining run commands by specifying a dev target and haven't had any luck.
plasmo dev --target=<some-chromium-target>-dev
plasmo dev --target=<some-chromium-target>-dev
From what I can tell it's this addition to the manifest that achieves this dev server behavior: ```{...

Is there an extension repository that shows how the testing should be done?

Is there an extension repository that shows how the testing should be done? I want to see how the background and content scripts, popup, options, etc tests should be done. Thank you...

How can I put breakpoints in vs code to debug? Or if you can't, what is the correct way to debug?

Hello, how can I put breakpoints in vs code to debug? Or if you can't, what is the correct way to debug?

How to access the methods or variables of another third-party extension

hello, is there any way to access the methods or variables of another third-party extension (I suppose these are declared in its content script)? I want to modify the behavior of a third party extension and it would be easier for me to access its variables or methods, and make small changes to it, or call methods from my extension,than scraping the HTML it adds to the web, or doing everything from scratch Thanks...

Build time slowed by switching to plasmo with src

Build time with src: ~8854ms Build time without src: ~1656ms Is there a build time improvement by not using plasmo with src as shown here: https://github.com/PlasmoHQ/examples/tree/main/with-src ? I recently migrated my file structure to use src and builds are about 5x slower. Any guidance would be great thank you!...

Importing Material Symbols to Content UI

How can I import Material Symbols to a content ui script? Tried to follow the custom font guide in the documentation but didn't have any success
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
...

GmailJS + Plasmo

Anyone tried integrating GmailJS with Plasmo? Been using InboxSDK but I need to inject custom react components as an overlay when a user clicks an attachment. thought plasmo would be a good fit, but need gmailjs's DOM action observers.

Using context between sidepanel tabs

Is it possible to use a context with a firebase hook to handle authentication between multiple sidepanel tabs ? Because I'd like to be able to navigate between multiple sidepanels for differents features in my extensions....

Freezing and crashing without reason

import type { PlasmoCSConfig, PlasmoCSUIJSXContainer, PlasmoCSUIProps, PlasmoRender...

Modifying HttpOnly cookies

There is a specific cookie that I am trying to extend the expiration date of, but I can't figure out how to modify it. At first, I tried modifying it with a content.ts file that edits the document.cookies, but that doesn't include httpOnly cookies. I then made a BSGW and tried to use the webReqeuest API to listen to the onHeadersReceived event, but that also doesn't include the set-cookie headers. Does anyone have any ideas on how to go about doing this?

Local Storage Item does not show up in service worker dev tools ?

I am saving simple key value string (id: "123") in my background script which I'm able to read it (and can console) every time but it doesn't appear on service workers Application/Local Storage I'm not sure if it's expected behaviour or not. I have checked host websites Local storage as well it doesn't show up there as well. Interesting part is that plasmo can read it magically from somewhere

CSS loading order

Hi everyone, Context: I've built an extension using the content-scripts-ui [1] template as foundation - specifically the google-sidebar variant. I've kept the same 2 CSS files i.e. google-sidebar-base.css and google-sidebar.css for styling whereby the former is loaded into the parent page (import "./google-sidebar-base.css") and the latter is loaded into the shadow DOM (via getStyle). I've modified isOpen to be closed/false by default. Problem: The first time the extension is rendered, the styles from google-sidebar-base.css don't get loaded and the extension panel renders on the left hand side and with a smaller width than normal. Once I refresh it, the problem goes and stays away for some time, until I close my browser or if I refresh after some time has passed. Any idea why this might be happening? Feels like a race condition until the stylesheets are cached maybe. Any help would be appreciated....

Messaging-chrome.runtime.sendMessage() called from a webpage must specify an ExtensionID (string)

TypeError:error invocation of runtime.sendMessage(optional string extensionId, any message....): chrome.runtime.sendMessage() called from a webpage must specify an ExtensionID (string) for its first argument. I'm using sendToBackground from a function injected into the webpage from the content script through the 'MAIN' world. The website is also already is listed under "externally_connectable" and have an async API call set up in a file under background/messages. The code is like this:...

How to add additional icons into the extension build

Is there a way to include other icons in the build so that I can customise my extension icon depending on which url I'm on? In the icon page within the documentation, I can see there are options to include icons for specific builds, however I would like to ask if there is a way to include other icons for the same build? My psudo-code usecase:...

Can't import useChat from Vercel's AI SDK

Fails on a new project as well. ``` 🔴 ERROR | Failed to resolve 'ai/react' from './popup.tsx' 🔴 ERROR | Cannot load file './react' from module 'ai'...

github action permission denied

I'm doing this to an existing chrome extension. Am I not supposed to use github actions to an already existing extension? any ideas?...
No description