تزریق اجزای svelte به صفحات وب از طریق اسکریپت های محتوا

آیا می خواهید وب سایت های شخص ثالث را با ویژگی های واکنشی تقویت کنید ، اما بدون چارچوب های نفخ؟ در این راهنما ، یاد می گیرید که چگونه با استفاده از اسکریپت های محتوای پسوند مرورگر ، به طور مستقیم اجزای svelte را به یک صفحه وب تزریق کنید – یک روش قدرتمند برای سفارشی سازی یا پوشیدن UI بر روی هر سایت ، از داشبورد گرفته تا ابزارهای رسانه های اجتماعی.

مرحله 1 – ساختار پسوند خود را تنظیم کنید

با یک دایرکتوری مانند این شروع کنید:

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

مرحله 2 – مؤلفه svelte خود را بنویسید

در 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;
  }

مرحله 3 – bootstrap را در 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 });

مرحله 4 – مانیفست خود را ایجاد کنید

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"
  }
}

مرحله 5 – بسته نرم افزاری با Rollup

پایه 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()]
};

از سناریوی مورد استفاده کنید

شما در حال ساخت یک پسوند SVELTE هستید که ابزارهای دسترسی را پوشش می دهد-مانند یک متن تنظیم کننده متن یا ضامن با کنتراست بالا-مستقیماً بر روی هر سایت. به جای تزریق JS خام ، شما یک کنترل پنل واکنشی را در گوشه صفحه با استفاده از SVELTE ارائه می دهید. این رویکرد منطق را مرتب نگه می دارد ، سبک ها پیچیده شده و اندازه آن را کم می کنند – در حالی که کاملاً تعاملی باقی مانده است.

✅ جوانب مثبت و ❌ منفی

✅ جوانب مثبت:

• 🎯 هر صفحه را به صورت پویا با ویژگی های واکنشی هدف قرار دهید
• 💾 حداقل بار با خروجی کامپایل شده Svelte
• 💡 ایده آل برای روکش ها ، ضامن ها یا پانل های بازرسی

❌ منفی:

• 🧪 باید اطمینان حاصل کنید که CSS با صفحه میزبان مغایرت ندارد
• 🔒 مجوزها و CSP ها ممکن است تزریق در برخی از سایت ها را محدود کنند
• 🛠 بارگیری مجدد مرورگر در طول آزمایش توسعه

خلاصه

تزریق محتوای SVELTE یک راه حل ساده برای ساخت پسوندهای مرورگر بسیار هدفمند و آگاه از زمینه است. این که آیا شما در حال افزایش رابط های موجود هستید یا برای گردش کار خاص ، برنامه های کاربردی را اضافه می کنید ، Svelte ردپای شما را کوچک و عملکرد تیز نگه می دارد.

آیا می خواهید پسوند SVELTE با کارایی بالا خود را بسازید؟ راهنمای PDF 19 صفحه ای من را ببینید پسوندهای SVELTE: افزودنیهای مرورگر رعد و برق را بدون نفخ بسازید – فقط 5 دلار:

👉 آن را اینجا بخرید

اگر این مفید بود ، می توانید از من نیز از من حمایت کنید: یک قهوه برای من بخرید