I am trying to create a Chrome extension using SvelteKit and sveltekit-adapter-chrome-extension. I have an anilist_client.js file under /static where I am declaring an ANILIST_CLIENT object that stores an ID an a SECRET that will later be used to access the AniList API.
The file must be withing the /static directory so the user can replace the ID with their own without digging deep into the bundled code.
I tried to include the script in app.html and <svelte:head>, also followed this guide. All I got was “anilist_client is not defined”.
// static/anilist_client.js
const anilist_client = {
id: '<id>',
secret: '<secret>'
};
// src/lib/components/Options.svelte
<script>
console.log(anilist_client.secret);
</script>
<a href='https://anilist.co/api/v2/oauth/authorize?client_id={anilist_client.id}&response_type=token'>Login with AniList</a>
// src/app.html
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<script src="/anilist_client.js"></script>
<!-- <script src="%sveltekit.assets%/anilist_client.js"></script> -->
%sveltekit.head%
</head>
// svelte.config.js
import chromeExtensionAdapter from 'sveltekit-adapter-chrome-extension';
import { vitePreprocess } from '@sveltejs/kit/vite';
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: chromeExtensionAdapter({
pages: 'build',
assets: 'build',
fallback: null,
precompress: false,
manifest: 'manifest.json',
}),
appDir: 'ext',
}
};
export default config;
Is there a way to access this object from my components that will run both in development and production bundle? Feels like I am missing something very obvious here.