🧩 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

Can i integrate plasmo into an existing Vite project or do i have to migrate to Next?

I noticed that there is no with-vite example, why is that? Can i use Vite or is there a major compatibility issue? PS: it might be good to address this in the docs (I apologize if it is actually mentioned, I have not seen it)...

Is it possible to make page navigation inside the options of the extension?

For example, imagine you open the options page at extensionid/options.html and you click a button inside this page that takes you to extensionid/options/dashboard.html.

When should you actually use getShadowHostId?

There are a few examples of getShadowHostId being used in the examples git repo. In the example here for google, the sidebar no longer shows when I rename or remove the getShadowHostId line. (https://github.com/PlasmoHQ/examples/blob/main/with-content-scripts-ui/contents/google-sidebar.tsx#L20) But in this example on the plasmo website, it still works perfectly whether I remove it or not, or rename it. https://github.com/PlasmoHQ/examples/blob/main/with-content-scripts-ui/contents/plasmo-inline.tsx#L11...

What is the correct way use an image url from assets to show notification?

I use this: ```ts import iconUrl from "url:/assets/icon.png" ...

How do I troubleshoot my plasmo production build?

My app is working well in development, but when I tried moving to the production build it no longer opens when the extension icon is clicked. I'm using ^0.80.0 with a side panel.

From popup.tsx to content.ts

I want to make a function from my content.ts that executes when a button on popup.tsx is clicked. I wanted to use the sendToContentScript from messaging but it seems to be undocumented, does anyone has any idea how to use it (Both in the popup and content) Thanks a lot !!!

How to install the plasmo build target in firefox?

in chrome just “Load the unpacked extension”

Wrapper component for all content scripts?

When using multiple content scripts UI, is there a way to wrap them all in a React component? Thanks

Browser-agnostic Google OAuth 2

I need to allow the user to log in with his Google account, regardless of the browser he's using. I'm not using Firebase BTW The issue is that Google's documentation (https://developer.chrome.com/docs/extensions/mv3/tut_oauth/#identity_permission) is not relevant to Edge, since Edge only allows https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/identity/launchWebAuthFlow What am I missing?...

Trigger a function when opening the Popup?

I know you can create a popup.tsx file, to show JSX when clicking on the extension icon. Is it possible to trigger a function instead of render content, when clicking on the extension icon? For example, when user clicks on the extension icon, instead of showing content in the popup window - trigger a function to change storage state? Thanks in advance...

Scoping Tailwind to the extension

I have an extension and tailwind css is working very well, however on some sites I see that the content page is being effected by the page styles and all the tailwind styles are reset. Is there a way to scope tailwindcss to the content of the extension? For example this is a page that is affecting the tailwind styles (Spicy Black Bean Soup) And this is what it looks like on most pages...
No description

How do I set globalthis.__VUE_PROD_DEVTOOLS__

I'm getting an error stating that __VUE_OPTIONS_API__ and __VUE_PROD_DEVTOOLS__ are not defined. While the error was definitely present, it didn't really cause an issue when developing my newtab but now that I've moved on to to popup, it throws the error every time I click on the extension icon and the popup is empty. The exact error is: ```VUE_OPTIONS_API, VUE_PROD_DEVTOOLS are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle. ...

Live reloading showing extension one state older than current code

Whenever I save some files, and the extension reloads, the page refreshes and shows me extension built using older version of code. So I have to reload the extension twice after each change so that the browser reflects the latest code and not the old code. I am using Google Chrome. Is there any way to fix this bug?...

Injecting content-ui component to several same-class elements

I'm developing a chrome extension for gmail which injects an input in the compose box, probkem is whenever i create a new compose box (you can craete several boxes in gmail), the component doesn't inject, although it has the same classes and everything. i tried using an anchor list but still no result.

having trouble with matching

Hi, im having trouble with matching certain url's with queries. is this even possible in plasmo?

how to stop "Context Invalidated, Press to Reload"?

It used to appear when I refreshed my extension, but after some new changes in my codebase, it seems to be appearing repeatedly without any changes in extension. I want to disable "Context Invalidated, Press to Reload". What would be a quick way (just make it disappear) to stop this, and what would be the right way (fix my codebase, but what?) to stop this?

Can't get tailwind CSS to import

I set up plasmo with the with-src flag and replaced react with vue and then added tailwind. Everything is working great until I try to import the style.css file. I am working with an index.vue file in the /src/newtab directory. I have tried adding an index.html file and load the stylesheet the traditional way with a link element, I have tried importing in both the style and script tags of the vue component and I've tried adding it with the background.ts file. Every time, no matter which method I use, I get the following error: Unexpected token Number { has\_sign: false, value: 50.0, int\_value: Some(50) } In the style tag of the vue component I used the following syntax: @import "~/style.css" ...

Triggering Data fetch while Plasmo not knowing about url change

my main focus on extension im building is videos (youtube), and my extension loads inside the videos, and i get extension data from an api by sending the video url that i get from window.location.href i can get it from dom too. with this way when we enter video because it doesnt know the video id and we rendered the extension from the youtube beggining, it shows all the data 0 because it didnt send the request to api (react query) how can we tell the component to wait for url change or dom change so when video id came, trigger the request and fill the data? note that when we enter a video from youtube.com it cant recognise this because of how youtube works, should i do things from background.ts? or watchOverlayAnchor? please help me...