How to export and then import a variable from content script into Svelte extension script?

[Ivan White]

I am attempting to export an object from my foreground.js script (aka content script) and then import it into my main.js script. This will then be passed as a prop to App.svelte.

Currently, I am exporting the objects from foreground as follows:

export let myData = {}

I am then importing it into main.js as follows:

import { myData } from './foreground.js'

However, upon activating the extension, I get the error:

Uncaught SyntaxError: Unexpected token 'export'

which points to the export line in foreground.js above.

How can I share the variable to main.js (or App.svelte)?

Note that I cannot add main.js to the manifest.json and use messages because Svelte is compiling main.ts, so that file will not "exist" in the dist folder (except in a compiled format).

But I cannot figure out why Chrome is throwing the export error in foreground.js! It supports ES6 does it not??

Thank you in advance.

[Simeon Vincent]

I only have a passing familiarity with Svelte, but I suspect that we can get to the bottom of this.

First up, Uncaught SyntaxError: Unexpected token 'export' tells us that you're trying to use module syntax inside a classic script. In a normal web page, when you append a module script to a page you set <script type="module" src="file.js"></script>, but you can't do that in extensions because Chrome handles the script injection for you. The Chrome extension platform does not currently support injecting content scripts as modules; you'll either need to transpile your modules into another format (UMD, IIFE, CJS + loader) or find another way to get a standard classic script.

Based on the information you've shared so far, it's not clear to me whether main.js is being loaded as a content script, on the host page, or in your extension's background context. Just in case, I should note that content scripts, page scripts, and background scripts all run in different execution contexts. While it's possible for both a content script and a background script to load the same dependencies, they will not share state.

Finally, depending on how you're loading your module code, it may be necessary to expose dependencies as web accessible resources (MV2, MV3). Note that the syntax for declaring web accessible resources is different depending on whether you're targeting Manifest V2 or Manifest v3.

You might also want to Google around for resources on building browser extensions with Svelte. A found several promising looking tutorials and projects by searching for "svelte 3 chrome extension". 

Simeon - @dotproto

Chrome Extensions DevRel

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/1e9627b2-1967-4112-b65d-4f8d34a60763n%40chromium.org.

[Ivan White]

Thanks Simeon,

Yes, the extension I am attempting to build is very complicated and I am very new to all of this. I kinda feel like I'm attempting to write Lord of the Rings or similar when I barely know my ABCs!

Appreciate your help.

-Ivan

[Ivan White]

Hi Simeon,

Just to follow up on this, as I should have mentioned it in my original post...the entire Svelte app lives inside an iFrame which is built in the content script.  I have tried passing the data into the iFrame as a data attribute in the content script and then accessing it in main.ts. It's throwing errors no matter what I try.

E.G.

function buildOverlayiFrame(path) {

  myiFrame = document.createElement("iframe")

  myiFrame.setAttribute("data-path", path)

  myiFrame.src = chrome.runtime.getURL("./index.html")

  myiFrame.id = "myiFrame"

document.body.insertAdjacentElement("afterbegin", myiFrame)

}

The Svelte app is attaching successfully to the iFrame, and is working. The only issue is with passing the data string variable - "path" above - into it and being able to access it in the Svelte app.