🧩 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 to pass data in contents file?

Hi everyone, I just learned to use plasmo I read this section in the docs https://docs.plasmo.com/framework/content-scripts-ui, So I created a Content Scripts UI file called index.tsx....
No description

Content Security Policy violation when importing Google Analytics

I followed the docs on Google Analytics and took a look at with-google-analytics example. I'm getting the following error when running production build of my extension:
Refused to load the script 'chrome-extension://www.googletagmanager.com/gtag/js?id=XXXXXXX&l=dataLayer&cx=c' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Refused to load the script 'chrome-extension://www.googletagmanager.com/gtag/js?id=XXXXXXX&l=dataLayer&cx=c' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
Reproduction:...

firebase auth in mv3 made my life a joke

hey fam, I hope @everyone is doing great. i'm stuck in a loop of trying for the past full week, i have questioned my life 🥹, I'm so frustrated at this point , it made me feel my life is a joke as a dev. 😭 I would really appreciate if someone can hop on a quick chat, i'll share the code. I have beaten my head so much, i can just pay for this. I tweeted the founder & he sent me here. Please help, thanks 🙂 ...

Overlay button positioning

I'm working on an extension that need to place a custom button on the right side of an input, like the lastpass extension does in the screenshot. I'm having trouble figuring out how to do it, essentially, I'd like to have the element lock icon button look like the button in the first screenshot, but i only have it on the left like in the second. I need to somehow responsively move it to the right side of the input, i thought about writing a custom mounting script, but is that a good way to do it? Below is the jist of my code so far....
No description

Compile inject.ts to build

I am working on an Extension that uses executeScript to execute a script file What I am trying to do is to have a file , ex : "inject.ts" That would be compiled to the build folder...

console.log drop on prod build

If Plasmo uses Parcel 2. Is it possible to drop console.log on prod build? https://github.com/parcel-bundler/parcel/issues/628 Seems that Parcel has this flag by default ...

Importing NPM Module JavaScript into web page issue

Hello everyone, I am working on an extension and have hit a road block. I am trying to import a JavaScript module from the npm package FusionCharts into a webpage. I am running into an issue where the script won't execute due to a MIME type being wrong. ...

Firebase auth in background script

I have followed the with-firebase-auth example correctly. Once I sign in in the popup, it seems like auth is persisted to the options page as well, which is great. However, in the background script I just can't seem to get the auth working. It works for making unauthed Firestore requests though. This is how I initialize the background script: ...

Calculate dynamically matches on config

I have a component (.tsx) that needs to calculate dynamically the
matches
matches
property of
config
config
depending on the current tab url.
export const config: PlasmoCSConfig = {
matches: /*SHOULD BE CALCULATED DYNAMICALLY*/
}
export const config: PlasmoCSConfig = {
matches: /*SHOULD BE CALCULATED DYNAMICALLY*/
}
...

Background script missing === creating one for me

I discovered that if I don't include background.ts, it will create one for me In Chrome's case it will not be an issue, but in Firefox's case, it also makes it a Service Worker, rather than loading as MV2-style background script It's worth noting that I specified the dev target as firefox-mv3...

Background Keep Alive Fails

@lab Didn't want to crowd the github issue but I'm not able to use the keep alive function:
Uncaught TypeError: Cannot read properties of undefined (reading 'runtime')
Uncaught TypeError: Cannot read properties of undefined (reading 'runtime')
...

ffmpeg wasm cannot load

I'm trying to use ffmpeg wasm to extract audio from a video file at a remote URL. Unfortunately I'm not able to even load ffmpeg. By default, the loader tries to fetch from a CDN, which results in a CORS error for me. I've attempted to go around that by referencing the local file like this: import ffmpegCoreFile from "url:../vendor/ffmpeg-core.js" I've tried using this in a background script, through messagings, and in a content script. I am getting a variety of errors depending on the circumstance so I'm wondering: Is this something we have an example for? I see this error most frequently URL.createObjectURL is not a function which is coming from ffmpeg, but I don't think it's a problem with ffmpeg, and is likely just that I don't understand how to implement this properly in Plasmo. There is a non-Plasmo example of this idea here https://github.com/ffmpegwasm/chrome-extension-app...

Can i inject a content script UI at a specific time?

I want to inject some components into the host page using content script UI at a specific time, such as clicking the action icon, how can I control the timing of triggering the injection?

CSUI custom render function create default shadow DOM

I'm following this tutorial: https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#custom-renderer to make a custom renderer. However, I'm getting this error when the call to createRootContainer() is called (this should make the default shadow DOM: ``` ui.ts:51 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type') at injectAnchor (csui.ts:51:14)...

How does the service worker hot reload mechanism work?

Hello, hello... Very impressed with my initial look at Plasmo. Some lovely ideas and implementations in the framework 👏 I have my own internal framework that does many of the things Plasmo does including live reload on all scripts, but I'm blocked in migrating to manifest v3 as I don't know what the mechanics would be to reload a service worker....

tsconfig warning

tsconfig options "importsNotUsedAsValues" and "preserveValueImports" are deprecated. Either set "ignoreDeprecations" to "5.0" in your tsconfig.json to silence this warning, or replace them in favor of the new "verbatimModuleSyntax" flag
tsconfig options "importsNotUsedAsValues" and "preserveValueImports" are deprecated. Either set "ignoreDeprecations" to "5.0" in your tsconfig.json to silence this warning, or replace them in favor of the new "verbatimModuleSyntax" flag
thonk

How do I analyze the bundle?

I noticed my app bundle increased from 8mb to 40mb after I installed a couple of deps. Is there a way I can figure out exactly what is causing the larger bundles?

v0.71.0 builds broken

Builds from 0.70.1 work but not in v0.71.0. The error when I load the page:
caught SyntaxError: Invalid or unexpected token (at newtab.37e84fdd.js:138:183)
caught SyntaxError: Invalid or unexpected token (at newtab.37e84fdd.js:138:183)
...
Solution:
This was resolved in 0.71.1, thank you!

react-router HMR Issues when lazy-load

Is HMR working correctly for everyone? I noticed that it's no longer working for me and I have to manually refresh the page each time. The only major change I did was switch to the new React Router 6.4 system: https://reactrouter.com/en/main so it might be that