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

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)