Plasmo config
hey guys i was just wondering, does plasmo package your code for you similar to how webpack does it? im currently migrating to the plasmo framework right now and im trying to figure everything out. apparently you can make a file called plasmo.config.js to set it up simular to webpack but i dont know how true that is. thanks in advance for the help
npm run dev gives: SyntaxError: missing ) after argument list
Here is my package.json
```
{
"name": "meets-helper",
"displayName": "Meets helper",...
want to avoid duplicate wasm files during the build process.
loading wasm in both the background and content script. When build in this state, the same wasm gets duplicated. How can we use the same wasm in both the background and content script without duplication?
```
rw-r--r-- 1 user staff 10655 5 18 23:55 icon128.plasmo.3c1ed2d2.png
-rw-r--r-- 1 user staff 857 5 18 23:55 icon16.plasmo.6c567d50.png
-rw-r--r-- 1 user staff 1960 5 18 23:55 icon32.plasmo.76b92899.png...
Altering an anchors markup/inline styles
Is there a way (maybe involving the main world?) to append some inline styles to a webpage to effect layout.
If my selector for the content scripts anchor returns something like
```...
How to share service worker API response to many content scripts
I have several content scripts that require the response (HTML) that a service worker background script provides. Only one of these content scripts is able to scrape the URL that is required by this background scripts fetch that it makes (Passed via the sendToBackground body payload). I cant figure out how I can share this HTML string response from the background script to all the content scripts (like react context etc).
For this to happen I can see that the Card.tsx (containing the sendToBackground call with the required URL to call in) would need to be the first CS to run and possibly store the response so that the other CS's could call a different message that retrieves the stored value via an identifier?
Any help will be much appreciated....
Re-rendering with a custom render function
I'm using a custom render and getRootContainer function in order to mount a custom element directly onto a specific pre-existing div without the use of shadow root (in order to adopt the existing page styles) and to avoid using any typical Plasmo parent elements. However, unlike the default exported component which automatically re-renders when the root is removed and added back in, this custom render does not adopt the functionality. When my custom root container that I've declared is removed from the page and added back in, my custom BetterInput component does not re-render. What is the best way to solve this problem? The following is my code:
```tsx
export const getRootContainer = () =>
new Promise((resolve) => {...
Can not render react component inside Overlay
I am trying to render a component from deepchat.dev in the overlay to make a floating chat box, but it ends up showing no overlay at all. I tried to render the component alone, inside the span,... but it didn't work and inspecting shows no CSUI has been rendered.
However, when I remove the <DeepChat> component, the span is rendered fine.
The <DeepChat> component works perfectly fine in the pop-up, the bug happens only on CSUI
Anyone encountered this before?
...
How do I call functions and get the return values from a popup?
I've been trying to put together a simple proof-of-concept for an idea I had to create an extension that could call some functions and get data from a content script running on a page.
I can't seem to figure out how to get the communication between the popup and the content script.
I keep coming across information that says to either use the underlying
chrome.runtime in the content script or use plasmo's messaging, but whenever I try to do any kind of messaging in the content script, I get an error saying that chrome.runtime effectively doesn't exist (trying to access a property of a non-object)....Can a Browser Extension look like Apple's Dynamic Island?
I've never built a browser extension, but I had an inkling of a UI idea to build something akin to https://emilkowal.ski/ui/dynamic-island that could show up in the user's top right corner and morph around.
This is probably a stupid question, but in the spirit of the Post Guidelines of "Ask anything here, and we mean anything!", is this possible?...
How do you debug a problem when yarn dev just exits?
I've got a bug where when I run yarn dev, it exists without printing anything useful:
(base) james@MacBook-Pro ~/workspace/ts/packages/cardstacker (ts)$ yarn dev
🟣 Plasmo v0.86.1
🔴 The Browser Extension Framework...
Send data from content script or popup to main content script.
I want to manipulate some dom items on the main world, how do I send a message from my popup or my overlay content script to the main world using the messaging api?
Loading a content script on a specific tab
Howdy folks,
I'm wanting to explicitly load a content script on a specific tab, so it doesn't interfere with other tabs. I have this working outside of Plasmo using the following:
await chrome.scripting.executeScript({
target: { tabId: tabID },...
Help: chrome.scripting.executeScript executes only once
Hey guys, I need help with the below code. I have created a popup with a button that calls the below mentioned handleClick function which executes the function foo from foo.ts
The code works but it is executed only for the first button click. I see "bar" logged in the console window but nothing happens on further clicks.
popup.tsx:
import foo from "url:~scripts/foo.ts"...
Web Worker
hey im working with a web worker and it seems to be huge in dev but much smaller in the prod build. Is there a sprint I can make/run to bundle the worker so i can use that version in dev also as it takes a long time for it to mount in dev?
Integrating Web Authentication with Plasmo Extension
I'm new to Plasmo and currently working on creating a Vue extension. My web application utilizes Clerk authentication, and I want to handle extension authentication based on the web session. Essentially, I aim to pass the JWT token or user data from the web session to the extension. This way, when calling any endpoint (such as implementing a comments functionality in the extension), I can use the token in the endpoint header to process the next flow from the backend/database.
I've cloned the PlasmoHQ/with-vue repository and set up my sidebar and other UI components in the extension. However, I'm uncertain about the best approach to achieve seamless authentication between the web and the extension. Should I integrate Clerk into the extension project as well? Or are there alternative methods available to obtain the session from the web?
I'd appreciate any insights or suggestions on the best practices and methodologies to handle this scenario efficiently....
Using Stripe and setup an API inside the extension
Hello !
I am able to make queries to stripe using what was explained on the website :
https://docs.plasmo.com/quickstarts/with-stripe
...
Hey all. Anyone know how to inject styles as a .css file to some webpage?
im rewriting some extension since we are going to mv3, also i decieded to use Plasmo framework for this, all cool i like it so far but im not sure where to put my files so they get bundled in final code. I have this .css file that im trying to inject when website loads.
const insertCSSRule = async (request, sender) => {
return chrome.scripting.insertCSS({...
remount csui on url change
i have built an extension using plasmo which injects some ui into the dom using getRootContainer
the component where i am injecting my csui unmounts when the url changes, hence i want to make it remount on each url change
basically my getRootContainer and render functions must re-run on each url change...
Is there something special you need to do to get a side panel to refresh on changes?
Is there something special you need to do to get a side panel to refresh on changes? If I load and reload the side panel the changes are there, but that's kind of painful.