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

امروز قصد دارم به شما یک بررسی مختصر در مورد نحوه توسعه یک افزونه کروم در sveltekit ارائه کنم.

یک فریاد بزرگ به michmich112 برای ایجاد یک آداپتور فوق العاده sveltekit که این کار را آسان می کند

شروع شدن

ما قصد داریم با الگویی که دقیقا برای همین منظور ایجاد کردم شروع کنیم.

1. این مخزن github را با مرورگر انتخابی خود باز کنید https://github.com/LukeHagar/sveltekit-extension-template

2. روی ایجاد مخزن جدید کلیک کنید
   نام مخزن را هرچه می خواهید بگذارید، این مخزن پروژه شما خواهد بود

3. مخزن GitHub خود را با آن کلون کنید git clone <your GitHub repository>
   

4. وابستگی ها را نصب کنید

   npm install
   

5. سرور توسعه دهنده را راه اندازی کنید

   npm run dev
   

   اکنون باید یک سرور برنامه‌نویس در حال اجرا باشد که می‌توانید آن را تغییر داده و به‌روزرسانی کنید تا افزونه کروم را همانطور که می‌خواهید بسازید.

افزودن توابع خاص برنامه افزودنی

عملکرد افزونه کروم از طریق chrome فضای نام جهانی با استفاده از عبارت شرطی زیر می‌توانید تأیید کنید که کد شما در یک افزونه کروم اجرا می‌شود.

window.chrome && chrome.runtime && chrome.runtime.id

Chrome API دارای تعدادی عملکرد و مقادیر مختلف برای چیزهای مختلف است، از جمله مقادیر مجوزهایی که کارهایی را که می‌توانید انجام دهید و نمی‌توانید انجام دهید محدود می‌کند. این فهرست در اینجا به تفصیل شرح داده شده است

در حال حاضر ما بر روی افزودن یک آیتم ساده در نوار ناوبری تمرکز خواهیم کرد که تشخیص دهد آیا برنامه افزودنی در کروم یا یک محیط توسعه دهنده اجرا می شود.

1. ما در آغاز خواهیم کرد +layout.svelte فایل. در داخل تگ اسکریپت یک متغیر برای محیط اضافه می کنیم.

   let environment: string;
   

2. سپس یک عبارت if را در داخل یک sveltekit onMount اضافه می کنیم تا رشته محیط کاملی را که می خواهیم بسازیم.

   let environment: string;
   
   // This will trigger when running as an extension
   onMount(() => {
       if (window.chrome && chrome.runtime && chrome.runtime.id) {
           environment = 'Chrome Extension';
       }
   });
   

3. بعد می خواهیم مقدار else را اضافه کنیم

   let environment: string;
   
   onMount(() => {
       if (window.chrome && chrome.runtime && chrome.runtime.id) {
           environment = 'Chrome Extension';
       } else {
           environment = 'Development';
       }
   });
   

   اکنون متغیری داریم که محیط فعلی را منعکس می کند.

4. اجازه دهید آن را به هدر اضافه کنیم. ما از AppBar از Skeleton استفاده می‌کنیم، بنابراین به شکاف پیش‌فرض AppBar می‌رویم، که بخشی بین دو svelte:fragment است.

   <AppBar>
           <svelte:fragment slot="lead">
               <strong class="text-xl uppercase">Skeleton</strong>
           </svelte:fragment>
   
           //Right here
   
           <svelte:fragment slot="trail">
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://discord.gg/EXqV7W8MtY"
                   target="_blank"
                   rel="noreferrer"
               >
                   Discord
               </a>
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://twitter.com/SkeletonUI"
                   target="_blank"
                   rel="noreferrer"
               >
                   Twitter
               </a>
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://github.com/skeletonlabs/skeleton"
                   target="_blank"
                   rel="noreferrer"
               >
                   GitHub
               </a>
           </svelte:fragment>
       </AppBar>
   

   و من می خواهم یک ساده اضافه کنم <p> برای متغیری که در آن بنشیند تگ کنید.

       <AppBar>
           <svelte:fragment slot="lead">
               <strong class="text-xl uppercase">Skeleton</strong>
           </svelte:fragment>
   
           <p class="text-center">{environment}</p>
   
           <svelte:fragment slot="trail">
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://discord.gg/EXqV7W8MtY"
                   target="_blank"
                   rel="noreferrer"
               >
                   Discord
               </a>
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://twitter.com/SkeletonUI"
                   target="_blank"
                   rel="noreferrer"
               >
                   Twitter
               </a>
               <a
                   class="btn btn-sm variant-ghost-surface"
                   href="https://github.com/skeletonlabs/skeleton"
                   target="_blank"
                   rel="noreferrer"
               >
                   GitHub
               </a>
           </svelte:fragment>
       </AppBar>
   

   

5. در نهایت من اجرا خواهم شد npm run build، پوشه build را به عنوان یک افزونه بدون بسته بندی در کروم بارگیری کنید و می توانید مشاهده کنید که متغیر منعکس کننده محیط صحیح است.

در اینجا مخزن آزمایشی حاوی این کد برای این پروژه نمونه است https://github.com/LukeHagar/dev-extension-template-demo

ساخت پروژه برای تولید

وقتی همه چیز تمام شد و یا می‌خواهید برنامه افزودنی خود را در کروم پیش‌نمایش کنید، می‌توانید پروژه نهایی را با اجرا بسازید.

npm run build

سپس پوشه بیلد ایجاد شده افزونه شماست، می‌توانید آن را بدون بسته‌بندی در منوی افزونه‌های مرورگرهای مبتنی بر Chromium مانند Vivaldi، Chrome، Brave و Edge بارگیری کنید.

اگر سؤالی دارید یا می‌خواهید چت کنید، در ابتدا در سرور Skeleton discord hangout دارم.

توسعه مبارک!