🧩 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

Am I using Port Messaging correctly?

I have the following: background/ports/alarms.ts ``` // don't need anything from here. The entire goal here is to have background -> foreground comms...

How to re-render content script on URL change (youtube)

I'm building a Plasmo extension for YouTube - youtube updates their pages dynamically, so the content script is not being re-run when page content is changed. So for example, I want to re-run a Plasmo CSUI each time the user goes to a different video. I imagine I'd have to detect change in the DOM tree somehow, and then trigger my content script to re-run. However, my question is, how would I go about triggering a content script to rerun in Plasmo?...

web accessible resources extension_ids: [] is an empty array in production but present in dev

web accessible resources extension_ids: [] is an empty array in production but present in dev $CRX_ID, how to fix?

Vue Components

I've broken my sidebar out into multiple components: a header, a body, a footer, and an opener. The opener is a tab that shows when the sidebar is closed and allows the user to open it back up. Everything displays properly, but I'm getting a set of errors in console for the sidebar components which I don't feel comfortable ignoring. An image of these errors is provided. These components are all imported into a Sidebar.vue file, which is then imported into a container that is used on whichever site that particular container supports. I'm willing to provide more context on this code if it would prove useful. Any help is appreciated. I would love to see and help Plasmo improve in its support of the Vue framework, both from a documentation and bug squashing standpoint....

Popup -> Content Script messaging

After clicking button in the popup I'd like to trigger some function defined in the Content Script. How should I approach it? I was reading the https://docs.plasmo.com/framework/messaging docs page but I don't saw this particular scenario. Should I use native Chrome API in that case? https://developer.chrome.com/docs/extensions/mv3/messaging/

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?