🧩 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

Chrome storage API vs Dexie.js (IndexedDB)

Anyone using Dexie or something similar instead of the Chrome storage API? Dexie is a wrapper around IndexedDB. I'm considering migrating to using Dexie from the Chrome storage API for a few reasons: - Dexie has database versioning, making it easier to modify your data structures - Dexie has the option to sync to the cloud - Dexie makes it easier to perform queries/search ...

Issues with using react-markdown

Hi, I'm trying to use react-markdown in my extension, but when I try to include it I get a strange error. I've installed it using pnpm install react-markdown and then have imported it in my content.tsx file import Markdown from "react-markdown". I then just try to use it through <Markdown>{markdown}</Markdown>. However, I'm getting the following error: ...

Registering a content message from a library

I want to create a HTTP library for plasmohq, that I can easily include in my extensions, how do I register a background message class from a library?

Firefox not loading extension files

Hi all, I tried loading my extension by going to about:debugging#/runtime/this-firefox and clicking load temporary add-on. I selected the file the manifest.json. The extension doesn't load the icons and html files. This works perfectly well on chrome. Any ideas...
No description

Not able to print an API response in content script despite getting the response in network logs

Have a content script that, when a button is clicked, uses Plasmo's messaging framework to make an API request via a background script Everything works fine: the relevant data is sent, received by the API, and a good response is sent back from the API ('healthy'), but for some reason the background script is not passing the response back to our content script. When we log the response, it's an empty object. Images:...
No description

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?...