Writing Chrome Extensions Using Svelte-Kit and Manifest v3
Tags: svelte, javascript, chrome, tutorial
Published: 2022-01-16 08:12:35



Svelte-Kit has been an amazing tool to create great responsive and reactive websites. But with its roots as a compiler, I wondered how I could use it to create a Chrome Extension, and as it turns out… it's really simple.

---

Today, we're going to see how we can build a simple extension with Svelte-kit and use Chrome's [Manifest V3](https://developer.chrome.com/docs/extensions/mv3/) which will allow us to use promisified versions of many of the Chrome API's methods. 
> Note: this method can work with Manifest V2 as well

## 1. Setting Up Our Repo

We'll start with an empty repo where we will create the template svelte kit project.

```bash
npm init svelte@next my-extension
cd my-extension
npm install
npm run dev
```

We need to update the `svelte.config.js` file to rename our destination app directory by setting the `appDir` parameter to `app` (thank you [@Matyanson](https://dev.to/matyanson) for catching this in the comments).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6mrro942xilunasssqu.png)

We are going to replace the default index page that is created with the following code that will allow us to get the url of the current tab:


![src/routes/index.svelte](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j81g00lpk6ghwl59pxn.png)

> Note: We are using the Chrome api as other methods are blocked by the extension executer for safety reasons.

Update the `body` tag in the the `app.html` file to configure the max size of the extension popup as such:


![src/app.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gykhtkrxj70w5u6jeywm.png)

Once updated we will create our manifest file in the `/static` folder. We will be using manifest V3 here as that is the latest from the Chrome team.

```json
{
  "name": "My first Svelte Extension",
  "description": "A browser extension made with Svelte Kit",
  "version": "1.0.0",
  "manifest_version": 3,
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_title": "Svelte Extension",
    "default_icon": "favicon.png",
    "default_popup": "index.html"
  }
}
```

Now when we build our extension, the manifest file will be included in our build folder making it much easier and cleaner.

Finally we need to change our adapter to the [`sveltekit-adapter-chrome-extension`](https://github.com/michmich112/sveltekit-adapter-chrome-extension) as the usual `@sveltekit/adapter-static` creates an inline script that is blocked in Manifest V3 due to Content Security Policies (The same is true for Manifest V2 but you are able to define a Content Security Policy rule with a the sha256 of the script or a nonce, that bypasses it in Manifest V2).

```bash
npm install -D sveltekit-adapter-chrome-extension
```

We are then able to build our project running `npm run build`

## 2.Testing our Extension

Click on the extension icon in your chrome browser and then click on manage extensions


![Navigation to get to Extension management page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybcwkl8mmrlj6jasyk55.png)

Make sure that developer mode is turned on (on the top right side of the page) then click on `Load Unpacked`.


![Extension management page top bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5ku53ngxu7qkdfx4egz.png)

Select your `build` folder from the file picker and open it. You should now see your extension on the page.


![Extension appears on the extension management page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhcz9ddu8ob1dtwu27qu.png)

Make sure it is enabled and navigate to any page you want. Toggle the extension and press the button!


![Success!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/splo0d9wgf9cw4752o4t.png)

There you go! You've just made your first Chrome extension using Svelte Kit and Manifest v3!