Writing Chrome Extensions Using Svelte-Kit and Manifest v3

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

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

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

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

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

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.

{
  "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 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).

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

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

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

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

Success!

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


Print Share Comment Cite Upload Translate
APA
Michel Canta | Sciencx (2024-03-28T15:36:41+00:00) » Writing Chrome Extensions Using Svelte-Kit and Manifest v3. Retrieved from https://www.scien.cx/2022/01/16/writing-chrome-extensions-using-svelte-kit-and-manifest-v3/.
MLA
" » Writing Chrome Extensions Using Svelte-Kit and Manifest v3." Michel Canta | Sciencx - Sunday January 16, 2022, https://www.scien.cx/2022/01/16/writing-chrome-extensions-using-svelte-kit-and-manifest-v3/
HARVARD
Michel Canta | Sciencx Sunday January 16, 2022 » Writing Chrome Extensions Using Svelte-Kit and Manifest v3., viewed 2024-03-28T15:36:41+00:00,<https://www.scien.cx/2022/01/16/writing-chrome-extensions-using-svelte-kit-and-manifest-v3/>
VANCOUVER
Michel Canta | Sciencx - » Writing Chrome Extensions Using Svelte-Kit and Manifest v3. [Internet]. [Accessed 2024-03-28T15:36:41+00:00]. Available from: https://www.scien.cx/2022/01/16/writing-chrome-extensions-using-svelte-kit-and-manifest-v3/
CHICAGO
" » Writing Chrome Extensions Using Svelte-Kit and Manifest v3." Michel Canta | Sciencx - Accessed 2024-03-28T15:36:41+00:00. https://www.scien.cx/2022/01/16/writing-chrome-extensions-using-svelte-kit-and-manifest-v3/
IEEE
" » Writing Chrome Extensions Using Svelte-Kit and Manifest v3." Michel Canta | Sciencx [Online]. Available: https://www.scien.cx/2022/01/16/writing-chrome-extensions-using-svelte-kit-and-manifest-v3/. [Accessed: 2024-03-28T15:36:41+00:00]
rf:citation
» Writing Chrome Extensions Using Svelte-Kit and Manifest v3 | Michel Canta | Sciencx | https://www.scien.cx/2022/01/16/writing-chrome-extensions-using-svelte-kit-and-manifest-v3/ | 2024-03-28T15:36:41+00:00
https://github.com/addpipe/simple-recorderjs-demo