🧩 Plasmo Developers•12mo ago

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!

22 Replies

hgil•12mo ago

@Pallas

filthytone•12mo ago

check out https://github.com/PlasmoHQ/plasmo/pull/757 .. it's in 0.83.0 .. you can use this in any context that "$WHATEVER" vars are processed by plasmo (like in a content script config)

GitHub

feat: Introduces JSON type to non-public env variables by sleekslus...

Details Note: I'm open to conversation on this idea, so please let me know your thoughts and whether something like this would be useful. Also, would be curious to know if any alternative solut...

hgil•12mo ago

Thanks @filthytone , it's not working for me. It's being read as-is, you can see the "json([ ... " wrapper. I checked that I'm in 0.83.0. Here's my .env.development. Anything I'm doing wrong?

PLASMO_PUBLIC_SHOPADVISOR_BACKEND_ENDPOINT=https://shopadvisor-465c7c7d7b57.herokuapp.com
PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_DOMAIN=`json([
    "*://*.amazon.com/*",
    "*://*.hivebrands.com/*",
    "*://*.getbezel.com/*",
    "*://*.shortylove.com/*"
])`
PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_PRODUCT_PAGE=`json([
    "*://*.amazon.com/**/dp/*",
    "*://*.hivebrands.com/**/products/*",
    "*://*.getbezel.com/**/listing/*",
    "*://*.shortylove.com/**/products/*"
])

PLASMO_PUBLIC_SHOPADVISOR_BACKEND_ENDPOINT=https://shopadvisor-465c7c7d7b57.herokuapp.com
PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_DOMAIN=`json([
    "*://*.amazon.com/*",
    "*://*.hivebrands.com/*",
    "*://*.getbezel.com/*",
    "*://*.shortylove.com/*"
])`
PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_PRODUCT_PAGE=`json([
    "*://*.amazon.com/**/dp/*",
    "*://*.hivebrands.com/**/products/*",
    "*://*.getbezel.com/**/listing/*",
    "*://*.shortylove.com/**/products/*"
])

export const config: PlasmoCSConfig = {
  matches: ["$PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_DOMAIN"]
}

export const config: PlasmoCSConfig = {
  matches: ["$PLASMO_PUBLIC_SHOPADVISOR_CUSTOMER_DOMAIN"]
}

YAGPDB.xyz•12mo ago

Gave +1 Rep to @filthytone

Arcane•12mo ago

@hgil has reached level 4. GG!

filthytone•12mo ago

Don’t use the plasmo_public prefix

hgil•12mo ago

Ah. Ok wasn't sure what was meant by non-public in the Github Issue. Thx let me try!

hgil•12mo ago

Works! Thx @filthytone . One note though, I directly copied the example from the Github Issue which had its own square brackets [], so at compilation I got an error "expected string" (instead it got another list []). I removed the brackets and all good. Should i have based it off some documentation?

YAGPDB.xyz•12mo ago

Gave +1 Rep to @filthytone

filthytone•12mo ago

Yea has to be a string value so removing brackets was correct The final result will be an array as you see None of this is documented .. I had the exact same need but in a manifest context , so I implemented it There’s technically a typescript error on the config object, but that easily fixed too

hgil•12mo ago

Oh you're sleekslush! Sweet man thanks a ton for implementing!!

YAGPDB.xyz•12mo ago

Gave +1 Rep to @filthytone

hgil•12mo ago

Yeah figured about the documentation just wondering

filthytone•12mo ago

no problem! and yea, lol same guy you can fix the typescript error like this

type JSONPlasmoCSConfig = Omit<PlasmoCSConfig, "matches"> & {
  matches: string
}

export const config: JSONPlasmoCSConfig = {
  matches: "$BLAH_BLAH"
}

type JSONPlasmoCSConfig = Omit<PlasmoCSConfig, "matches"> & {
  matches: string
}

export const config: JSONPlasmoCSConfig = {
  matches: "$BLAH_BLAH"
}

and then rejoice w/ the typescript gods

hgil•12mo ago

Ok took me a bit to figure out but first I celebrated early when I said it worked. I actually had an empty list in matches. The fix was the code you just shared (I thought you meant there was a benign error). But in that code I I had to then add back the square brackets because previously i had

matches: ["$BLAH"]

matches: ["$BLAH"]

So now my .env matches what you had in the Github Issue So now one more question for you before I spend too much time trying to get this to work: I also need this to dynamically set class names in my getOverlayAnchorList()

export const getOverlayAnchorList: PlasmoGetOverlayAnchorList = async () => {
  // TODO Map from JSON to class list
  return document.querySelectorAll("$SHOPADVISOR_ANCHOR_CLASSES")
}

export const getOverlayAnchorList: PlasmoGetOverlayAnchorList = async () => {
  // TODO Map from JSON to class list
  return document.querySelectorAll("$SHOPADVISOR_ANCHOR_CLASSES")
}

Is that possible? Idk if I need to use process.env in that case @filthytone also what about in a content.css lol

SHOPADVISOR_ADD_THUMBNAIL_BUTTON_OFFSET="0px"

SHOPADVISOR_ADD_THUMBNAIL_BUTTON_OFFSET="0px"

.shopadvisor-addremove-button-overlay {
  position: absolute;
  top: "$SHOPADVISOR_ADD_THUMBNAIL_BUTTON_OFFSET";
  right: "$SHOPADVISOR_ADD_THUMBNAIL_BUTTON_OFFSET";
}

.shopadvisor-addremove-button-overlay {
  position: absolute;
  top: "$SHOPADVISOR_ADD_THUMBNAIL_BUTTON_OFFSET";
  right: "$SHOPADVISOR_ADD_THUMBNAIL_BUTTON_OFFSET";
}

Hm actually just realized I need a map

{
  "*://*.amazon.com/*": ".s-product-image-container, .a-dynamic-image, .product-image, .a-image-container, .a-dynamic-image-container",
  "*://*.hivebrands.com/*": ".product-grid__image-container",
  "*://*.getbezel.com/*": "a:has(img)",
  "*://*.shortylove.com/*": ".feature-section"
}

{
  "*://*.amazon.com/*": ".s-product-image-container, .a-dynamic-image, .product-image, .a-image-container, .a-dynamic-image-container",
  "*://*.hivebrands.com/*": ".product-grid__image-container",
  "*://*.getbezel.com/*": "a:has(img)",
  "*://*.shortylove.com/*": ".feature-section"
}

Gaming

Programming

Adding array of values in env