Building a Chrome Extension with SvelteKit
Tags: sveltekit, svelte, javascript, webdev
Published: 2023-05-22 19:48:57

Today I'm going to give you a brief run through on how to develop a chrome extension in sveltekit.

**A big shout out to [michmich112](https://github.com/michmich112/sveltekit-adapter-chrome-extension) for creating a wonderful sveltekit adapter that makes this easy**



## Getting Started

We are going to start with [a template](https://github.com/LukeHagar/sveltekit-extension-template) that I created for this exact purpose. 

1. Open this github repo with your browser of choice https://github.com/LukeHagar/sveltekit-extension-template

2. Click create a new repository 
![Creating a new repository from a github repo template](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdsvpbs97grgtuaxhlvi.png) Name the repository whatever you want, this will be the repo for your project

3. Clone your GitHub repository with `git clone <your GitHub repository>`
![using git clone to copy the repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnyqs421rd4k57sqifks.png)

4. Install dependencies```bash
npm install
```

5. Start the dev server ```bash
npm run dev
``` A dev server should now be running that you can alter and update to build out the chrome extension how you want.

## Adding Extension specific functions

Chrome extension functionality is implemented through the `chrome` global namespace. You can verify your code is running in a chrome extension using the following conditional statement. 
```javascript 
window.chrome && chrome.runtime && chrome.runtime.id
``` 
The Chrome API has a number of different functions and values for different things, including permissions values restricting what you can and cannot do. That list is detailed further [here](https://developer.chrome.com/docs/extensions/mv3/declare_permissions/)

For now we will focus on adding a simple item in the nav bar that detects if the extension is running in chrome or a dev environment.

1. We will start in the `+layout.svelte` file. Inside the script tag we will add a variable for the environment. ```jsx
let environment: string;
``` 
2. Then we will add a if statement inside of a sveltekit onMount to build the full environment string we want. ```jsx
	let environment: string;

    // This will trigger when running as an extension
	onMount(() => {
		if (window.chrome && chrome.runtime && chrome.runtime.id) {
			environment = 'Chrome Extension';
		}
	});
``` 
3. Next we want to add the else value ```jsx
	let environment: string;

	onMount(() => {
		if (window.chrome && chrome.runtime && chrome.runtime.id) {
			environment = 'Chrome Extension';
		} else {
			environment = 'Development';
		}
	});
``` Now we have a variable that reflects the current environment. 
4. lets add it to the header. We are using the AppBar from Skeleton, so we will go to the default slot of the AppBar, which is the section between the two svelte:fragments. ```jsx
<AppBar>
			<svelte:fragment slot="lead">
				<strong class="text-xl uppercase">Skeleton</strong>
			</svelte:fragment>

			//Right here

			<svelte:fragment slot="trail">
				<a
					class="btn btn-sm variant-ghost-surface"
					href="https://discord.gg/EXqV7W8MtY"
					target="_blank"
					rel="noreferrer"
				>
					Discord
				</a>
				<a
					class="btn btn-sm variant-ghost-surface"
					href="https://twitter.com/SkeletonUI"
					target="_blank"
					rel="noreferrer"
				>
					Twitter
				</a>
				<a
					class="btn btn-sm variant-ghost-surface"
					href="https://github.com/skeletonlabs/skeleton"
					target="_blank"
					rel="noreferrer"
				>
					GitHub
				</a>
			</svelte:fragment>
		</AppBar>
``` And I'm going to add a simple `<p>` tag for the variable to sit in. ```jsx
		<AppBar>
			<svelte:fragment slot="lead">
				<strong class="text-xl uppercase">Skeleton</strong>
			</svelte:fragment>

			<p class="text-center">{environment}</p>
			
			<svelte:fragment slot="trail">
				<a
					class="btn btn-sm variant-ghost-surface"
					href="https://discord.gg/EXqV7W8MtY"
					target="_blank"
					rel="noreferrer"
				>
					Discord
				</a>
				<a
					class="btn btn-sm variant-ghost-surface"
					href="https://twitter.com/SkeletonUI"
					target="_blank"
					rel="noreferrer"
				>
					Twitter
				</a>
				<a
					class="btn btn-sm variant-ghost-surface"
					href="https://github.com/skeletonlabs/skeleton"
					target="_blank"
					rel="noreferrer"
				>
					GitHub
				</a>
			</svelte:fragment>
		</AppBar>
``` ![showing the in development environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2pt61qdset4r8imruk3b.png) 
5. Lastly I will run `npm run build`, load the build folder as an unpacked extension in chrome, and you can see the variable reflect the correct environment. ![showing the extension environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnwyklq1i39xzr0tj500.png)

Here is the demo repo containing this code for this example project https://github.com/LukeHagar/dev-extension-template-demo


## Building the Project for production

When you are all done and or want to preview your extension in chrome, you can build the final project by running ```bash
npm run build
``` Then the build folder that is created is your extension, you can load it unpacked in the Extensions menu of Chromium based Browsers like Vivaldi, Chrome, Brave, and Edge.



If you have any questions or want to chat I primarily hangout in the [Skeleton discord server](https://discord.gg/xcbTNZrv). 

Happy Development!