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:
- 🎯 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:
If this was helpful, you can also support me here: Buy Me a Coffee ☕
Top comments (0)