Building a Chrome Extension with SvelteKit

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 for creating a wonderful sveltekit adapter that makes this easy

Getting Started

We are going to start with a 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
   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>
   

4. Install dependencies
   

   npm install
   

5. Start the dev server
   

   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.

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

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.
   

   let environment: string;
   

2. Then we will add a if statement inside of a sveltekit onMount to build the full environment string we want.
   

   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
   

   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.
   

   <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.
   

       <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>
   

   
   

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.

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

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.

Happy Development!