Building a Chrome Extension with SvelteKit

This content originally appeared on DEV Community and was authored by Luke Hagar

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.

Open this github repo with your browser of choice https://github.com/LukeHagar/sveltekit-extension-template
Click create a new repository
Name the repository whatever you want, this will be the repo for your project
Clone your GitHub repository with git clone <your GitHub repository>
Install dependencies
```
npm install
```
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.

We will start in the +layout.svelte file. Inside the script tag we will add a variable for the environment.
```
let environment: string;
```

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';
    }
});

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.

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>

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!

This content originally appeared on DEV Community and was authored by Luke Hagar

Print Share Comment Cite Upload Translate Updates

APA

Luke Hagar | Sciencx (2023-05-22T19:48:57+00:00) Building a Chrome Extension with SvelteKit. Retrieved from https://www.scien.cx/2023/05/22/building-a-chrome-extension-with-sveltekit/

MLA

" » Building a Chrome Extension with SvelteKit." Luke Hagar | Sciencx - Monday May 22, 2023, https://www.scien.cx/2023/05/22/building-a-chrome-extension-with-sveltekit/

HARVARD

Luke Hagar | Sciencx Monday May 22, 2023 » Building a Chrome Extension with SvelteKit., viewed ,<https://www.scien.cx/2023/05/22/building-a-chrome-extension-with-sveltekit/>

VANCOUVER

Luke Hagar | Sciencx - » Building a Chrome Extension with SvelteKit. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/05/22/building-a-chrome-extension-with-sveltekit/

CHICAGO

" » Building a Chrome Extension with SvelteKit." Luke Hagar | Sciencx - Accessed . https://www.scien.cx/2023/05/22/building-a-chrome-extension-with-sveltekit/

IEEE

" » Building a Chrome Extension with SvelteKit." Luke Hagar | Sciencx [Online]. Available: https://www.scien.cx/2023/05/22/building-a-chrome-extension-with-sveltekit/. [Accessed: ]

rf:citation

» Building a Chrome Extension with SvelteKit | Luke Hagar | Sciencx | https://www.scien.cx/2023/05/22/building-a-chrome-extension-with-sveltekit/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Getting Started

Adding Extension specific functions

Building the Project for production

Related Posts