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

Avi•4mo ago

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

lab•4mo 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•4mo ago

@lab has reached level 52. GG!

lab•4mo ago

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

Avi•4mo ago

seems not :\

lab•4mo 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

Avi•4mo ago

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

Avi•4mo ago

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

Avi•4mo 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.

Avi•4mo 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

Avi•4mo 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

Avi•4mo 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•4mo ago

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

lab•4mo 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•4mo ago

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

Gaming

Programming

Dynamically load script