Injecting Svelte Components Into Web Pages via Content Scripts

Want to enhance third-party websites with reactive features, but without bloated frameworks? In this guide, you’ll learn how to inject Svelte components directly into a webpage using browser extension content scripts — a powerful way to customize or overlay UI onto any site, from dashboards to social media tools. Step 1 - Set Up Your Extension Structure Start with a directory like this: svelte-injector/ ├── src/ │ ├── Content.svelte │ └── main.js ├── public/ │ └── icon.png ├── manifest.json ├── rollup.config.js └── package.json Step 2 - Write Your Svelte Component In src/Content.svelte: let highlight = false; highlight = !highlight}> Injected Component! Click to toggle highlight. div { padding: 8px; background: #f0f0f0; border: 1px solid #aaa; cursor: pointer; font-family: sans-serif; z-index: 9999; } .highlighted { background: yellow; } Step 3 - Bootstrap the Component in main.js import Content from './Content.svelte'; const target = document.createElement('div'); target.style.position = 'fixed'; target.style.top = '10px'; target.style.right = '10px'; document.body.appendChild(target); new Content({ target }); Step 4 - Create Your Manifest manifest.json: { "manifest_version": 3, "name": "Svelte Content Injector", "version": "1.0", "description": "Injects Svelte UI into any webpage", "permissions": ["scripting", "activeTab"], "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": [""], "js": ["build/main.js"] } ], "icons": { "48": "public/icon.png" } } Step 5 - Bundle with Rollup Basic rollup.config.js: import svelte from 'rollup-plugin-svelte'; import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; export default { input: 'src/main.js', output: { file: 'build/main.js', format: 'iife', name: 'app' }, plugins: [svelte(), resolve(), commonjs()] }; Use Case Scenario You’re building a Svelte extension that overlays accessibility tools — like a text resizer or high-contrast toggle — directly onto any site. Instead of injecting raw JS, you render a reactive control panel in the corner of the screen using Svelte. This approach keeps logic tidy, styles scoped, and deploy size low — while remaining fully interactive. ✅ Pros and ❌ Cons ✅ Pros:

May 16, 2025 - 03:26

Injecting Svelte Components Into Web Pages via Content Scripts

Want to enhance third-party websites with reactive features, but without bloated frameworks? In this guide, you’ll learn how to inject Svelte components directly into a webpage using browser extension content scripts — a powerful way to customize or overlay UI onto any site, from dashboards to social media tools.

Step 1 - Set Up Your Extension Structure

Start with a directory like this:

svelte-injector/
├── src/
│   ├── Content.svelte
│   └── main.js
├── public/
│   └── icon.png
├── manifest.json
├── rollup.config.js
└── package.json

Step 2 - Write Your Svelte Component

In src/Content.svelte:


  let highlight = false;


 highlight = !highlight}>
  Injected Component! Click to toggle highlight.



  div {
    padding: 8px;
    background: #f0f0f0;
    border: 1px solid #aaa;
    cursor: pointer;
    font-family: sans-serif;
    z-index: 9999;
  }

  .highlighted {
    background: yellow;
  }

Step 3 - Bootstrap the Component in `main.js`

import Content from './Content.svelte';

const target = document.createElement('div');
target.style.position = 'fixed';
target.style.top = '10px';
target.style.right = '10px';
document.body.appendChild(target);

new Content({ target });

Step 4 - Create Your Manifest

manifest.json:

{
  "manifest_version": 3,
  "name": "Svelte Content Injector",
  "version": "1.0",
  "description": "Injects Svelte UI into any webpage",
  "permissions": ["scripting", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["build/main.js"]
    }
  ],
  "icons": {
    "48": "public/icon.png"
  }
}

Step 5 - Bundle with Rollup

Basic rollup.config.js:

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  output: {
    file: 'build/main.js',
    format: 'iife',
    name: 'app'
  },
  plugins: [svelte(), resolve(), commonjs()]
};

Use Case Scenario

You’re building a Svelte extension that overlays accessibility tools — like a text resizer or high-contrast toggle — directly onto any site. Instead of injecting raw JS, you render a reactive control panel in the corner of the screen using Svelte. This approach keeps logic tidy, styles scoped, and deploy size low — while remaining fully interactive.