🧩 Plasmo Developers•8mo ago

Dynamically load script

Based on https://docs.plasmo.com/quickstarts/with-google-analytics , I should be able to load https://developers.google.com/maps/documentation/javascript/examples/place-search#maps_place_search-typescript as well I tied to do it in a CSUI Svelte component:

<script lang="ts">
  import "https://maps.googleapis.com/maps/api/js?key=$PLASMO_PUBLIC_API_KEY&libraries=places";

  console.log(google); // google is undefined
</script>

<script lang="ts">
  import "https://maps.googleapis.com/maps/api/js?key=$PLASMO_PUBLIC_API_KEY&libraries=places";

  console.log(google); // google is undefined
</script>

Plasmo Docs

Quickstart with Google Analytics – Plasmo

Guide on how to use Google Analytics with a Manifest Version 3 browser extension

Google for Developers

Place Searches | Maps JavaScript API | Google for Developers

21 Replies

AviOP•8mo ago

@lab Sorry for the ping, any idea how to solve it?

lab•8mo ago

Check if the map js lib is cached in the .plasmo directory but otherwise it's up to the host if it want to return the js lib as a file tbh and whether the script would even let itself load you might want to take a look at the bundle and see what's inside

Arcane•8mo ago

@lab has reached level 52. GG!

lab•8mo ago

you might find occasionally they have some logic inside that would prevent it to actually load

AviOP•8mo ago

seems not :\

lab•8mo ago

lol yeah if that's the case it's prob not possible that feature basically download whatever js is in that URL and try to embed it in the bundle

AviOP•8mo ago

Yeah I know I guess I need to try to bundle it manually

AviOP•8mo ago

nevermind, it's probably impossible to load it as it loads remote scripts

AviOP•8mo ago

@lab Could a sandbox page help me out? https://docs.plasmo.com/framework/sandbox-pages

Plasmo Docs

Sandbox Pages – Plasmo

Using sandbox pages with Plasmo to create secure context pages for browser extensions.

AviOP•8mo ago

The thought process is to run the remotely hosted script in a sandbox page and then embed it in a CSUI with an iframe I just tried sandbox.svelte

<input type="text">

<input type="text">

apparently Parcel prints out the text as-is in <pre> :thinkingHD: Wait, now I noticed that no matter if I put sandbox.svelte or sandbox.html, it's not even registered in the manifest

AviOP•8mo ago

@lab Assuming that https://github.com/PlasmoHQ/plasmo-test/blob/main/rfc%2Frfc-263-sandbox-pages%2Fsandboxes%2Ftest.tsx results In adding "sandbox" entry to the manifest, the issue is that Plasmo doesn't take care of sandbox.svelte/sandbox.html

GitHub

plasmo-test/rfc/rfc-263-sandbox-pages/sandboxes/test.tsx at main · ...

RFC and BUG reproduction. In the future, it can serve as a regression test suite! - PlasmoHQ/plasmo-test

AviOP•8mo ago

According to my testing, that's indeed the issue As soon as I added React dependencies and sandbox.tsx, it began to work

lab•8mo ago

Hm m interesting, I guess it only deal with sandbox.tsx xd check this codepath:

lab•8mo ago

https://github.com/PlasmoHQ/plasmo/blob/cb01811e329bede999127611425a6d8543a5b35a/core/parcel-transformer-manifest/src/handle-sandboxes.ts#L15

GitHub

plasmo/core/parcel-transformer-manifest/src/handle-sandboxes.ts at ...

🧩 The Browser Extension Framework. Contribute to PlasmoHQ/plasmo development by creating an account on GitHub.

lab•8mo ago

RIP yeah it only deal with .tsx atm lol wanna make a PR to add svelte/vue etc?

AviOP•8mo ago

How hard will it be for me to add Svelte?

lab•8mo ago

Prob adding just that .svelte name to the list will work lol

AviOP•8mo ago

huh, maybe using sandbox is not the right route whatsoever https://support.mozilla.org/en-US/questions/1111998

AviOP•8mo ago

Hopefully that works 🤞 https://github.com/PlasmoHQ/plasmo/pull/977

GitHub

Update handle-sandboxes.ts by avi12 · Pull Request #977 · PlasmoHQ/...

Added Svelte support Details This PR ... Code of Conduct I agree to follow this project's Code of Conduct I agree to license this contribution under the MIT LICENSE I checked the current P...

lab•8mo ago

Try testing it with a local build xD

AviOP•8mo ago

It will be way too much work :KEKWlaugh: Last time I tried the testing framework locally didn't end good

Gaming

Programming

Dynamically load script

Did you find this page helpful?