DEV Community

Cover image for Injecting Svelte Components Into Web Pages via Content Scripts
HexShift
HexShift

Posted on

Injecting Svelte Components Into Web Pages via Content Scripts

#svelte #javascript #webdev #ui

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
Enter fullscreen mode Exit fullscreen mode

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;
  }
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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()]
};
Enter fullscreen mode Exit fullscreen mode

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:

  • 🎯 Target any page dynamically with reactive features
  • 💾 Minimal payload with Svelte's compiled output
  • 💡 Ideal for overlays, toggles, or inspection panels

❌ Cons:

  • 🧪 You must ensure CSS doesn’t conflict with the host page
  • 🔒 Permissions and CSPs may restrict injection in some sites
  • 🛠️ Browser reloads required during development testing

Summary

Svelte content injection is a streamlined solution for building highly targeted, context-aware browser extensions. Whether you're enhancing existing interfaces or adding utilities for specific workflows, Svelte keeps your footprint tiny and performance sharp.

Want to build your own high-performance Svelte extensions? Check out my 19-page PDF guide Svelte Extensions: Build Lightning-Fast Browser Add‑ons Without the Bloat — just $5:

👉 Buy it here

If this was helpful, you can also support me here: Buy Me a Coffee ☕

Top comments (0)