🧩 Plasmo Developers•11mo ago

Building a standalone Embed

Hey everyone! I have an extension I've been building with Plasmo for work and we were asked to also bundle it as an embeddable widget for sites to include on their page without needing the chrome extension installed. I was wondering if anyone here had any tips on how to go about doing this. Obviously there are a lot of extension-specific APIs that can't be re-used, but we'd like to re-use as much as the UI as possible and bundle it in a similar way. We've tried using the parcel bundler like parcel build ./src/widget/index.tsx --target widget with the target specified in the package.json, but we're running into a lot of dependency resolution issues, specifically with the ~/* configured to be ./src/*, and pnpm workspace modules. Seems like Plasmo has a lot of custom parcel configuration to make it's magic work, so I was wondering any of that can be re-used for building standalone bundles.

4 Replies

filthytone•11mo ago

i would suggest factoring out common things into library code that you can keep separate from both the extension and a web site .. basically treat it like a shared library that you can install and bundle w/ your specific deployment platform (either website or extension) basically i'd try as much as possible to NOT include anything plasmo-specific in it could be tricky to do whatever you're doing tho depending on the context and use case .. but making some attempt at building for both w/ 1 codebase sounds like it could be a nightmare imo

gclark-eightfoldOP•11mo ago

Oh absolutely. That's been the direction we've been going in with our "ui" package. We're using turborepo and pnpm workspaces (w/ "no-hoist") based on the https://github.com/t3-oss/create-t3-turbo template, but we're fighting with the parcel bundler to just get our workspace modules resolved. For instance, if the UI package has:

{
  "name": "@repo/ui",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "exports": {
    "./button": "./components/button.tsx"
    // ... other components
  }
}

{
  "name": "@repo/ui",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "exports": {
    "./button": "./components/button.tsx"
    // ... other components
  }
}

Plasmo has no problem resolving @repo/ui/button, but Parcel alone seems to only resolve it if it's @repo/ui/components/button.

filthytone•11mo ago

sadly i'm not super familiar with parcel .. if you're stuck here tho and haven't really been able to focus on business logic separation, then let me know .. i can help test or maybe hit up one of my coworkers who's a js master

Arcane•11mo ago

@filthytone has reached level 7. GG!

Gaming

Programming

Building a standalone Embed