hgil Posts - Answer Overflow

hgil

•Created by hgil on 9/14/2024 in #🔰newbie

How do I install multiple examples e.g. -- --with-sidepanel --with-storage with-supabase

Is it possible to do pnpm create plasmo --with-sidepanel --with-storage with-supabase ? It only takes the first or last one I think

6 replies

PD🧩 Plasmo Developers

•Created by hgil on 9/19/2023 in #👟framework

Adding array of values in env

My extension will run on several sites e.g. amazon, ebay, alibaba. Each site has some specific configurations like the website domain and the specific div classes that I use to locate products on the site. Currently I have these configurations in their own .env.amazon, .env.ebay, .env.alibaba and create a build for each ...

// AMAZON
PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_PRODUCT_PAGE="amazon.co/*/dp/*"
PLASMO_PUBLIC_SHOPADVISOR_ANCHOR_CLASSES=".s-product-image-container, .a-dynamic-image, .product-image, .a-image-container, .a-dynamic-image-container"

// EBAY
PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_PRODUCT_PAGE="ebay.co/listing/*"
PLASMO_PUBLIC_SHOPADVISOR_ANCHOR_CLASSES=".ebay-product-grid__image-container .featured-product"

// ALIBABA

// AMAZON
PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_PRODUCT_PAGE="amazon.co/*/dp/*"
PLASMO_PUBLIC_SHOPADVISOR_ANCHOR_CLASSES=".s-product-image-container, .a-dynamic-image, .product-image, .a-image-container, .a-dynamic-image-container"

// EBAY
PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_PRODUCT_PAGE="ebay.co/listing/*"
PLASMO_PUBLIC_SHOPADVISOR_ANCHOR_CLASSES=".ebay-product-grid__image-container .featured-product"

// ALIBABA

But we now want one build that will work on all three sites and any site we may add in the future (we'll be adding sites often). To my understanding, env files only take string values so my only option is to concatenate all the values into a pipe-separated string like so

PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_DOMAIN="amazon.co/* | "ebay.co/*"| "alibaba.co/*""

PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_DOMAIN="amazon.co/* | "ebay.co/*"| "alibaba.co/*""

And then modify my existing code to parse the values

export const config: PlasmoCSConfig = {
  // TODO: Parse from pipe-delimited string
  matches: ["$PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_PRODUCT_PAGE"]
}

export const config: PlasmoCSConfig = {
  // TODO: Parse from pipe-delimited string
  matches: ["$PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_PRODUCT_PAGE"]
}

Is this the only option? I'm worried about having one giant string bc 1. maintenance/readability - we'll be adding a lot of customers soon 2. collisions of div classes, for instance if ".product-image" is the appropriate class for amazon but also exists in ebay it could mess things up I would like to keep them visually separated like in the env above if possible. I'm sure there are JSON based env-type files but does Plasmo work with those? I definitely want to keep the configuration in a separate file (not hardcoded) so that if we sign another customer onboarding them is as easy as adding to the config file Thanks!

38 replies

PD🧩 Plasmo Developers

•Created by hgil on 9/15/2023 in #👟framework

Inline vs Overlay vs Custom Root Container

24 replies

PD🧩 Plasmo Developers

•Created by hgil on 9/12/2023 in #🔰newbie

Is there a way to use Tailwind on Content Script UI Overlays?

Docs don't mention it in the styling section and it doesn't seem to work for me

7 replies

PD🧩 Plasmo Developers

•Created by hgil on 9/10/2023 in #👟framework

Call Storage API with callback?

Chrome has an option to provide a callback when using .set(), wondering if the same is possible with Plasmo's Storage API?
chrome.storage.sync.set({ products: aoProduct }, function () { console.log( "Added product ", oProduct, "to Chrome storage. New products: ", aoProduct ) resolve() })

9 replies

Gaming

Programming