🧩 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

Messaging API compatibility

Hi is @plasmohq/messaging works on every web browser or only in chrome? I need to work in safari and firefox.

Not grokking message passing

I'm trying to click a button in a popup and get the current url of the active tab. I can get a content.ts that does this onload, but I'm unsure how to use plasmo to do this onclick of a popup button. I've not slept so I've probably missed something but putting "relay" in my content.ts and passing "sendviarelay" didn't work....

Blog post linked in docs is 404'ing

Following the supabase quick start and it links to this post about creating a consistent id that 404s: https://www.plasmo.com/blog/posts/how-to-create-a-consistent-id-for-your-chrome-extension I was able to find it on wayback so I'm ok but worth fixing maybe....

CSUI with Vue3's CompositionAPI

I'm creating an extension that utilizes CSUI to provide a sidebar, overlay style UI instead of the traditional popup style. I'm attempting to utilize Vue3's with CompositionAPI in lieu of React. My code is below: ```ts <template> <div className="apd-container"> <span>Testing 1 2 3</span>...

Plasmo does not compile a tsx file.

Hello, I'm developing an extension with Plasmo and I'm facing an issue during the compilation of a tsx file. For more context, my content.ts file creates an iframe element and injects it into the HTML page where the extension runs. Initially, I created a frame.html file that was successfully injected as an iframe on the page. The problem is that I want to replace this frame.html file with frame.tsx, but this file is not being compiled. As a result, I'm getting the following error message: 'Denyi...

Hot reloading a CSS file not working

Hi! When I modify a css file in my project, the app reloads automatically and I get the "Extension re-packaged" as in my .tsx files, but the web page where my extension is running doesn't reload. Reloading the web page doesn't do anything, and I have to restart the development server to be able to see the new style. Is this something I can configure somewhere? In general, I did not see where I could configure Plasmo to see or modify which folders it observes when hot-reloading....

Injection and styling a button into the YouTube player

Hi! I'm trying to inject a button into the YouTube player, next to the Miniplayer button, but so far I've been unsucessful at styling. Here is my current code: ```ts import { useEffect, useState } from "react"; import cssText from "data-text:~style.css";...

Setting up Plasmo manually

I'm trying to migrate an extension to the framework but even after installing all the dependencies I seemingly need, I get an error ``` 🔴 ERROR | r.map is not a function 🟡 5 | TypeError: r.map is not a function at file:///C:/repositories/extensions/youtube-like-dislike-shortcut/node_modules/.pnpm/[email protected][email protected]/node_modules/plasmo/dist/index.js:150:14351...

I want to fill in a form in page from a popup input & button

Can anyone help give me an outline of how to perform this action ?

help w/ mantine notifications

i've got mantine modals working in content.tsx but notifications don't seem to work, probably not mounting them correctly. can anyone provide some help (or code) on how to use mantine notifications in content.tsx [https://mantine.dev/others/notifications/] here's the modal: ``` import { useState } from 'react';...

Send message from popup to cs and back

I have something like: content.ts ```ts chrome.runtime.onMessage.addListener((_, __, sendResponse) => { sendResponse(...)...

React Components render twice?

So I'm trying to split my code into components, but this ends in the component rendering twice on my page. How can I prevent this behavior?
No description

Charging money with PayPal

Is there a best practice for charging money with PayPal in a Chrome extension? The main reason I didn't do this step is that I don't know how to do it right without leaking user data or compromising security, as I'm not a security expert nor know how to manage user data correctly P.S. Stripe isn't an option in my country...

Having to add import react from "react" for each file

i just made a new extension by git cloning my old one and just one small issue is that I have to add import react from "React" in each ,tsx file and in tsconfig, I have to add "jsx": "react", "compilerOptions": {...

Help with inline csui

I'm attempting to add a button above the highlighted section, but I don't really understand how the in-line mounting works. My button always seems to end up below the section. Could anyone clarify and possibly give me some pointers?

Production Source Map?

How would i get sourcemaps to build in production so i can upload them to something like sentry? i'm finding that they work in dev, but when i do build / package, they are no where to be found

How can I not use a Shadow DOM on content?

I need to make it so the content.tsx is fixed to the top of the page (kind of like position-fixed) and push the rest of the open page down, not be "above" it,

Error Monitoring and Metric Gathering

What do people use for error monitoring and metric gathering? I have experience using Sentry, but not sure if that's an "accepted standard" in chrome extensions and no idea how to integrate it (any examples)...

How can I import a font (Roboto) inside content.tsx and keep my style?

I have 2 files: base.css where it only imports the font (from Google API) and style.css where there's all the stylesheet....

window undefined on background script when trying to login via firebase

I'm using React + Firebase. I have a hook that handles user details and a background script that handles the auth via chrome.identity.getAuthToken after I approve the consent screen, the background script throws "window is not defined" any ideas? I followed this link - https://www.plasmo.com/blog/posts/firebase-chrome-extension...