DEV Community

Discussion on: Writing Chrome Extensions Using Svelte-Kit and Manifest v3

Collapse
 
tohodo profile image
Tommy

@michmich112 how do you handle chrome not being available inside a .svelte file? For example, I have route/options.svelte and inside this file I have on:input={handleInput} which saves some data using chrome.storage.local.set(). Right now it's not possible since you don't have access to chrome, so you'd have to put the logic inside scripts/options.ts which means now you have logic in two locations: options.svelte (inside <script>) and options.ts.

Collapse
 
michmich112 profile image
Michel Canta

yeah that is a problem since the chrome variable will be available globally in the execution environment. I add the no-check as its an IDE issue and not actually an issue when running it.

Collapse
 
tohodo profile image
Tommy • Edited

@michmich112 thanks for the reply. The error I got was not in the IDE but when I build from the console:

"ReferenceError: chrome is not defined"

Whenever I get this build error, it seems to also break the extension because when I reload the extension it throws this error as soon as I load the Options page:

Extension error

When I remove the code containing chrome from options.svelte and rebuild, the extension error on the Options page goes away. I ended up not using SvelteKit to build my extension. My original reason for trying out SvelteKit was the increase in performance and size when serving single-page apps, but I realized since extensions are loaded from your hard drive it's really not a big deal. I will still keep an eye on SvelteKit for other applications though :-).

Thread Thread
 
michmich112 profile image
Michel Canta

Thanks for the update, i haven't run into that problem yet but definitely something to keep an eye on! Thank you!

Collapse
 
aneesh_arora profile image
Aneesh Arora

how to add "no-check" when running npm run build? I tried to find a solution online but couldn't