🧩 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

Chormium-based browser extension to Firefox

Hi, I have created an extension that works fine for all chromium-based browsers using Plasmo, but now i am thinking of make it for firefox browser as well. Can anyone tell me what necessary steps I need to take to achieve it and how can fix various issues, like service workers and all.

anyone using react-markdown?

I am trying to make react-markdown work with Plasmo but no luck so far. The first issue was this: https://github.com/remarkjs/react-markdown/issues/801 ...

Error while comunicating between CS and BGSW.

Hey all! I'm trying to build this extension that reads particular URLs in Discord (web) messages and replaces them with a custom UI that shows images, buttons, etc. This project is for an hackathon and we have a deadline by tomorrow morning, so I guess it's pretty urgent. The UI part works fine, the problem is that I cannot perform fetch calls from the content script since it gets blocked by Discord CSP. So I'm trying to send a message from the content script to the background service worker using @plasmohq/messaging, the problem is that I get a CSP error regarding the connection to ws://localhost:1815 and the messages stay hanging....

Would it be possible to hide DOM changes via shadow DOMs to evade LinkedIn's detection system

The title says it all, LinkedIn doesn't like people using chrome extensions and I want to hide my extension from LinkedIn. The guy who made the "LinkedIn Helper" extension did a great write up about it here: https://bamf.com/bamf-expert-guest-post-linkedin-automation-safety/ Then settled on just creating a browser around LinkedIn so he wouldn't have to inject anything into it....

New Tab Sizing

when creating a newtab, seeing that trying to max out the height and width of the newtab using height: 100vh, etc. still leaves gaps around the edges. There is also a scroll bar that appears. Wondering if there is a better way to size the newtab component to take over the whole screen.
Solution:
Ended up resolving this by just editing the window styles as such : useEffect(() => { document.body.style.margin = "0" document.body.style.overflow = "hidden" })...

Default with-supabase template doesn't work

Node version: 20.15.0 Error: Uncaught TypeError: Cannot destructure property 'PostgrestClient' of '(0 , _indexJsDefault.default)' as it is undefined....

Inline CSUI Component + ShadowDOM not rendering elements that enter DOM tree later, correctly.

I'm using Shad-cn & React.JS. (confirmed shad-cn is ok) I've created inline anchor. Within the content script, I have a Select input, which opens as the user click it. As the user clicks over it, the options cuts to the bottom of the extension going outside of the extension as you can see in the screenshot attached. * Points to consider...
No description

resolve critical package vulnerabilities

hi im seeing 2 critical and 68 high severity package vulnerabilities. can this be addressed?
No description

Storage API syncing

Hi there, I was wondering if there was any information on getting the storage API to work with cross browser syncing (https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync).

how to deal with connect-src 'self'?

i'm with a problem when its used fetch. When in my code its used fetch, occur an error like connect-src 'self'. But i have tryied to get the request using webRequest when occurs fetch-paused, but when i try to fetch-continue after removing header: content-polity-security, still returning error

unable to set up authentication

hi, i was following along the tutorial located here for google auth in my chrome extension: https://www.plasmo.com/blog/posts/firebase-chrome-extension however, when i ran pnpm run dev at the end, i get the following error message: node:internal/process/esm_loader:40...

[BUG] Error "$RefreshSig$ is not a function" if I use state in a nested component

If I define a state in nested react component I get this error: $RefreshSig$ is not a function. This bug is reproducible in latest plasmo version. Here's the code:...
No description

Check if an extension is installed

How can I securely verify from my Next.js app that my browser extension is installed and active? I've tried using relaytobackground, but since the extension is inactive, there are no content scripts, hence not working, nor giving any response

Do I have to publish a .zip manually to get the extension id?

When constructing SUBMIT_KEYS for google chrome extension store in github, I need the extension id.

Issue with using Radix Components with extension and framework

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
When importing and using Radix Components -- https://github.com/radix-ui/primitives -- I run into this error. What could be causing this. They are react components which I believe should be compatible with the framework?...

How to inject React component on page?

Hi I want to render an icon next to a div on the webpage and when that icon is clicked I want to render a React component on the top right of the page. I've found docs on how to inject a React component on the page but I'm not sure how to render it based on clicking another component. Thanks!

local storage dev tools plasmo

Hi all, I am trying to locate the storage api data. I am aware the data is stored in chrome.storage and I tried going to the devtools to get the data. However, I am not able to get the data set in chrome.storage why?. In the extension console I have tried getting it with: await chrome.storage.local.get(console.log); but I cannot find it there. I am storing the data by just setting a key like storage.set('123','value'). ...

Extension rejected by Google due to RHC violation in Firebase Auth

We have been building an extension which uses Firebase ecosystem. Recently we tried submitting the extension to Google but we got a rejection due to Remotely Hosted Code. Details are as follow: ``` Hi there, ...
No description

Publishing to TestFlight through BPP

Hey folks! I have an extension published to Chrome and Safari (through TestFlight). I was able to get Chrome publishing automated through Github Actions no problem using https://github.com/PlasmoHQ/bpp, but now I'm trying to do the same for Safari and I'm lost. I found https://github.com/PlasmoHQ/safari-webstore-api and tried configuring my BPP_KEYS based on it, but I'm getting a "No supported browser found" error. Is the safari-webstore-api package supported through BPP? Or would I just need to call it directly with the Node API? Or maybe I'd be better off using fastlane directly instead?...

How can i solve this?

Hi everybody. I am new programming in this framework and basically in React. I want to make an extension that in first instance returns me the text that I select with the mouse and shows it on the screen but as attached in the screenshot it doesn't work correctly. I copy the repository because I really don't know what I have wrong, could someone know how to solve it? Repository:https://github.com/pablo2899/Plasmo-framework Thank you very much in advance...
No description
Next