🧩 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

Plasmo's dev server doesn't always properly watch for file changes

Suppose I run plasmo dev --target=firefox-mv2 I tried to modify https://github.com/avi12/youtube-auto-hd/blob/main/src/popup/components/PromotionLinks.svelte but did not see any change in the dev server Plasmo version: 0.83.0...

Plasmo crashes when debugging on Firefox for Android

I'm trying to simultaneously run a Firefox debug session via web-ext run --target=firefox-android and run plasmo dev --target=firefox-mv2 When I modify a script, often I get: ``` Error: ENOENT: no such file or directory, unlink 'C:\repositories\extensions\youtube-auto-hd\build\firefox-mv2-de v\popup.2727c4f1.js.1756.2e'...

CSUI; can I reinject?

Alright, I'm pretty beginner at React & Plasmo, so apologize if I mess up some of my terminology here. My goal is to add custom buttons to the send window in the ChatGPT UI, and it actually worked pretty awesome first-try with Plasmo CSUI. I just exported my component as default and also exported getInlineAnchor(), and now my buttons appear each time I load the site. The issue is that, every time you change chats in the ChatGPT UI, the the element is replaced with a new one, so whenever I switch chats, my buttons disappear again. They obviously come back when the page refreshes, but refreshing each time is not ideal. Example video: https://share.cleanshot.com/vd6nQDPD...
Solution:
AFAIK you can't "reinject" CSUI Your best bet right now is it to inject the CSUI manually from a regular content script and have a listener (e.g. https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver ) to know when to reinject...

Additional permissions for development vs production

Considering that I'm working on an ext that will also have a backend, it makes a lot of sense for Plasmo to automatically set the final host_permissions with the proper hostnames I.e. during development I will have ```json { "manifest": {...
Solution:
Nevermind, I figured that I can just do ```json { "manifest": { "host_permissions": ["$PLASMO_PUBLIC_SERVER_URL"]...

Persist config with some key in sync, and some keys in local

I would like to only persist in chrome sync some keys, and leave other persisted in local. How can I do this ?...

Segfault error when building

Hey @lab, I've had this error for the past 2 days. ```🔵 INFO | Loaded environment variables from: [] 🟡 0 | @plasmohq/parcel-transformer-manifest 🟡 1 | Adding icons...

Browsers support

Hi team, I want to know how many browser extension we can make with plasmo?

use with-vue template with element-plus as ui, package too big

Dear all, I create ext use the with-vue template and use element-plus as ui component,but when I call build,all the component from element-plus are build into the js file, it's so big, event if I just use el-button Is there a way just package the components i used? thanks....
No description

process.env is empty

I am using env vars I created //.env.development PLASMO_PUBLIC_WEB_SITE_URL=VALUE I can use this value in package.json but can't load anything in code. It's empty...
No description

Can't connect to content script on first load of extension.

Hey guys when I first open my extension, I get the following error in chrome: "Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist." If i reopen the same window or open a new window, I don't get this error. Any help would be appreciated. Thanks...

Adding array of values in env

My extension will run on several sites e.g. amazon, ebay, alibaba. Each site has some specific configurations like the website domain and the specific div classes that I use to locate products on the site. Currently I have these configurations in their own .env.amazon, .env.ebay, .env.alibaba and create a build for each ... ``` // AMAZON PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_PRODUCT_PAGE="amazon.co//dp/"...

Inline vs Overlay vs Custom Root Container

I'm trying to put a border on specific divs around images on Amazon. They should only appear on hover (therefore I probably need to set pesuo-classes on that div). And I want to have a label ShopAdvisor with a + button next to it (therefore I think I need to add new divs regardless of if I decorate the existing HTML). The ShopAdvisor/+ div should be right-justified, which seems unimportant but it does mean the div needs context of its containing ancestor, right now it's only on the top left bc it's anchored. I know I have access to the anchor and can do all that like so ``` anchor.element.setAttribute(...
No description

Cannot setup Storybook with import scheme base64, raw, etc

Hello, storybook do not resolve the imports with schemes etc, is there a way to import a configuration into the storybook webpack ?

content.tsx only consistently works if refresh page

I am trying to create a browser extension for GitHub. For now, I just want to add a button on a page using a content.tsx. It works, but I often find it necessary to refresh the page for the button to appear. Trying to figure out if I am doing something wrong or if the code needs to get more complicated and add a custom MutationObserver or something like this. I have several customizations like this example. Some of them seem to work more consistently than others, which always require Refresh. I am thinking it maybe has to do with the specifics of the page and how much it has been converted to React by GitHub. Here is example:...

Messaging From Ext-Pages to CS

Hello guys, I am facing a hard time figuring how to send messages from popup to content script, I did it from before without using any framework but I want to try it with this framework, docs are not mentioning this. do I need to send a message from Ext-Page to BGSW then from BGSW to CS? or is there another way?...
No description

Call Storage API with callback?

Chrome has an option to provide a callback when using .set(), wondering if the same is possible with Plasmo's Storage API?
chrome.storage.sync.set({ products: aoProduct }, function () { console.log( "Added product ",...

declarativeNetRequest

I want to use the declarativeNetRequest API, and I have it working for chrome, but when I test it on firefox, its not working: ```javascript async function setRedirectRule(newRedirectUrl: string) { let newRedirectRule = { id: RULE_ID,...

MUI with content-script-ui

HTML is rendered to the extension, but I have no styles from MUI, How to fix that? I think that is why my extension is isolated from css, but I don't understand how I can add styles from MUI to the content-script import { Autocomplete, Button, TextField } from "@mui/material" import iconBase64 from "data-base64:~assets/icon.png" import cssText from "data-text:~/contents/google-sidebar.css"...
No description

Is it possible to add timer in badge on the icon for MV3?

I wanted to try plasmo but not sure if the MV3 which supported by plasmo can have this kind of feature. When user click on a button on the Content script, it will add a badge showing the timer until the timer runs out. I’m aware that we can persist the timer by saving the endTime for the timer. But not sure about having a timer running on the service worker....
No description

How do I get firebase auth in a content script?

I have authentication working in popup.tsx. But I need the user details in content.ts so I can scrape the current email and make POST requests to my server. Any help would be greatly appreciated.