🧩 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

How do I share state variables between two anchored React components?

I understand well how to inject independent React components as described here: https://docs.plasmo.com/framework/content-scripts-ui However, I don't understand how to share state variables between those two components. In a regular React application you'd typically "lift the state up", but here I don't understand how that would work. Do I have to create an ancestor component without an anchor that would wrap the two components?...

Pass data from Content Script to Popup

Hi all! First of all: many thanks for this awesome framework, it absolutely makes building an extension a breeze 💪 I am working on an extension with the following setup:...

Uncaught Error: Extension context invalidated.

Hi, I'm getting the following error:
Uncaught Error: Extension context invalidated.
Uncaught Error: Extension context invalidated.
And I'm sending messages when an
iconEle
iconEle
is clicked from
content.ts
content.ts
to
background.ts
background.ts
like this:...

What exactly invalidates the context?

When testing my extension, I noticed that it was often showing me the "Context Invalidated, Press to Reload" tooltip in the bottom right of the screen. In the dev tools, I can see the "Script Runtime - reloading" message too. The problem is that this happens even when I don't update any file in my project. I don't see any update in my terminal neither. This is something new, so it must be something I've done, but I can't figure out why. Is there a way to tell more precisely what invalidated the context?...
No description

How Insert CSUI when Extension Action Icon is clicked

Hi, I am using React to write Plasmo. I just want to click the icon to inject CSUI when I want to use the extension. I don't want CSUI to inject automatically because I may not need to use it in most cases. Is there a good way to do this?

working with https in development?

Hey all, Been working with plasmo for all of 1 day, and like it so far. I am in test/dev mode right now, and want to work with a local https server. I found the following link on the React side to run npm with HTTPS=true, https://create-react-app.dev/docs/using-https-in-development/ ...

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 ?