🧩 Plasmo Developers•15mo 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

hgilOP•15mo ago

@Pallas

filthytone•15mo 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...

hgilOP•15mo 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•15mo ago

Gave +1 Rep to @filthytone

Arcane•15mo ago

@hgil has reached level 4. GG!

filthytone•15mo ago

Don’t use the plasmo_public prefix

hgilOP•15mo ago

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

hgilOP•15mo 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•15mo ago

Gave +1 Rep to @filthytone

filthytone•15mo 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

hgilOP•15mo ago

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

YAGPDB.xyz•15mo ago

Gave +1 Rep to @filthytone

hgilOP•15mo ago

Yeah figured about the documentation just wondering

filthytone•15mo 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

hgilOP•15mo 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"
}

filthytone•15mo ago

It depends .. if normally you can use $WHATEVER and plasmo replaces it with some value, you can use the json directive .. it only works on non-public variables (not prefixed with PLASMO_PUBLIC) And yeah you can use anything that JSON.parse will succeed with So arrays and objects both work

Arcane•15mo ago

@filthytone has reached level 4. GG!

filthytone•15mo ago

There are some things that plasmo will inject vars that work with both private and public variable names, but there are other things that you can only really access the public prefixed ones

hgilOP•15mo ago

Ok yeah I think this is the latter case :/ When I run it it logs "$SHOPADVISOR_ANCHOR_CLASSES is not a valid query selector"

filthytone•15mo ago

And those don’t have json support because they generally are accessed from process.env , which forces EVERYTHING to a string That’s something nodejs does so that’s why only the private var names get the magical json treatment Anywhere else you could use a json value for the variable , but you have to JSON.parse it yourself in the code that accesses it

hgilOP•15mo ago

Gotcha ok. Yeah I have some ideas of how to do it. Maybe just fetch a config on start and store in memory Thanks a ton for your help with this!!

filthytone•15mo ago

Look at data-env in plasmo .. I use that sometimes for runtime JSON data

Gaming

Programming

Adding array of values in env