Using Svelte to create a Google Chrome extension (AI article summarizer)

Svelte is a lightweight and efficient JavaScript UI framework known for its simplicity. In this tutorial I will show you how to use Svelte to create a Google Chrome extension.

The extension we’re going to build will allow you to summarize a Medium article using AI.

The only prerequisite for this tutorial is familiarity with JavaScript. You do not need to have prior experience with Svelte or Chrome extension development.

Resources

• Completed project source code (GitHub)
• Chrome extensions documentation
• Svelte documentation

Creating the Svelte project

Run the following command to initialize a new Svelte 5 project:

npx sv create svelte-ai-chrome-ext

You will be given several prompts to select project configuration options. Below are the ones I’ve chosen for our project:

Which template would you like? SvelteKit Minimal
Add type checking with Typescript? Yes, using Typescript syntax
What would you like to add to your project? Prettier + ESLint
Which package manager do you want to install dependencies with? npm

After selecting these options, you can CD into the new project’s directory and open the folder in your IDE.

cd svelte-ai-chrome-ext && code .

Adding Chrome extension adapter

Next, we will install an NPM package called sveltekit-adapter-chrome-extension. This is an adapter for Svelte that prerenders the site as a collection of static files and builds an output compliant with Chrome extension policies.

npm i sveltekit-adapter-chrome-extension

After installing the package, we will need to edit the svelte.config.js file in order to configure the adapter. Your file should look like this:

svelte.config.js:

// svelte.config.js

import adapter from 'sveltekit-adapter-chrome-extension';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const config = {
 preprocess: vitePreprocess(),

 kit: {
  adapter: adapter({
   pages: 'build',
   assets: 'build',
   fallback: null,
   precompress: false,
   manifest: 'manifest.json'
  }),
  appDir: 'app'
 }
};

export default config;

In order for the adapter to work properly, all pages must be prerendered. Configure this by creating a file called “+layout.ts” within the “src/routes” directory:

src/routes/+layout.ts:

// src/routes/+layout.ts
export const prerender = true;

Creating the extension

Now that we’ve configured the adapter, we can get started on creating our Chrome extension.

In your project’s “static” folder, create a file called manifest.json. This file is where you define the structure and behavior of a Chrome extension.

static/manifest.json:

{
 "manifest_version": 3,
 "name": "AI article summarizer",
 "version": "1.0.0",
 "description": "This extension summarizes Medium articles using AI",
 "permissions": ["scripting", "activeTab"],
 "action": {
  "default_popup": "popup.html"
 }
}

We’ll be using Google Gemini to summarize articles. Install the NPM package using the below command:

 npm i @google/generative-ai

Next, create a folder in the “src/routes” directory titled “popup”. Within this new folder, we will add the following two files:

src/routes/popup/page.ts:

// src/routes/popup/page.ts

import { browser } from '$app/environment';
import { onMedium, summary } from '$lib/stores';
import { GoogleGenerativeAI } from '@google/generative-ai';
import { PUBLIC_GOOGLE_API_KEY } from '$env/static/public';

export async function load() {
 if (!browser) return;

 try {
  chrome.tabs.query({ currentWindow: true, active: true }, async (tabs) => {
   const tab = tabs[0];

   if (!tab?.url?.includes('medium.com')) {
    onMedium.set(false);
    summary.set('');
    return;
   }

   onMedium.set(true);

   try {
    const [result] = await chrome.scripting.executeScript({
     target: { tabId: tab.id! },
     func: () => document.querySelector('section')?.textContent || null
    });

    const postContent = result?.result || '';

    summary.set('Processing article...');

    const genAI = new GoogleGenerativeAI(PUBLIC_GOOGLE_API_KEY);
    const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' });
    const res = await model.generateContent(
     `Summarize the following Medium article:\n\n${postContent}`
    );
    summary.set(res.response.text());
   } catch (err) {
    console.error('Error during summarization:', err);
    summary.set('An error occurred during summarization.');
   }
  });
 } catch (err) {
  console.error('Error in load function:', err);
  onMedium.set(false);
  summary.set('An error occurred.');
 }
}

src/routes/popup/+page.svelte:

<!-- src/routes/popup/page.svelte -->

<script>
 import { onMedium, summary } from '$lib/stores';

 let isOnMedium = $state(false);
 let articleSummary = $state('');

 onMedium.subscribe((v) => (isOnMedium = v));
 summary.subscribe((v) => (articleSummary = v));
</script>

{#snippet notOnMedium()}
 <section>
  <p>You are not currently viewing a Medium article.</p>
  <p>Once you are viewing a Medium article, its summary will appear here.</p>
 </section>
{/snippet}

{#snippet aiSummary()}
 <section>
  <p>Summary of the article:</p>
  <p>{articleSummary}</p>
 </section>
{/snippet}

{#if isOnMedium}
 {@render aiSummary()}
{:else}
 {@render notOnMedium()}
{/if}

<style>
 section {
  width: 400px;
  height: 250px;
  white-space: pre-line;
 }
</style>

Next, create a filed called “stores.ts” in src/lib. In this file, we will store state for tracking if a user is on medium, and the article summary:

src/lib/stores.ts:

// src/lib/stores.ts
import { writable } from 'svelte/store';

export const onMedium = writable(false);
export const summary = writable('');

The last thing we will need to do is generate a Gemini API key in Google AI studio and add it to an environment file. Click here to generate an API key

Copy this key, and put it into a .env file in your project’s root directory.

.env:

PUBLIC_GOOGLE_API_KEY=YOUR_KEY_HERE

Our extension is now ready to go! Build the project with the following command:

npm run build

This will create a folder titled build in the project’s root directory.

We will now load this folder into Chrome as an unpacked extension.

Navigate to chrome://extensions in your browser and select “Load Unpacked” on the top left. Select the build folder, and now your extension is imported!

Visit any article on medium.com and you’ll be able to see an AI generated summary on the extension popup.