Injecting Svelte Components Into Web Pages via Content Scripts

[Lomanu4]

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:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.