https://virgool.io/feed/@alieabbasi fa 2026-06-16 14:16:15 https://files.virgool.io/upload/users/2500596/avatar/RIcJAz.jpg?height=120&width=120 https://virgool.io/@alieabbasi https://virgool.io/tomanfrontendteam/%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%A7%D9%81%D8%B2%D9%88%D9%86%D9%87-%D9%87%D8%A7%DB%8C-%DA%A9%D8%B1%D9%88%D9%85-oz9udeycbboa توسعه افزونه‌های کرومتا حالا به این فکر کردید که افزونه های کروم چی هستن و با چی ساخته میشن؟ جواب خیلی ساده تر از چیزیه که فکر می‌کنید؛ افزونه‌های کروم معمولاً با جاواسکریپت و در صورت نیاز HTML و CSS نوشته میشن!تو این مقاله فرآیند ساخت افزونه‌های کروم رو بررسی می‌کنیم. افزونه‌های بقیه‌ی مرورگرها هم ساختار مشابهی با همین ساختاری که توضیح خواهیم داد دارن. پس احتمالاً این مقاله به دردتون می‌خوره. من سعی کردم توضیحاتم رو به زبان ساده بیان کنم، پس اگه حس کردید قسمتی رو نامفهوم یا پیچیده توضیح دادم حتماً تو کامنت ها بهم اطلاع بدید.اجزای اصلیفایلی که تو هر افزونه‌ای باید وجود داشته باشه فایل manifest.json‍‍‍‍‍ هست. این فایل به نوعی فایل پیکربندی هر افزونه‌ایه.جزء کاربردی بعدی background script ها هستن که همونطور که از اسمش هم مشخصه تو پس زمینه اجرا میشن و کاربر چیزی از اون نمی‌بینه. (مثل service worker ها)ممکنه افزونه‌ها content scripts هم داشته باشن که روی وب سایتی که کاربر در حال مشاهده هست اجرا میشن و میتونن تغییراتی روی صفحه موردنظر ایجاد کنن یه چیزی بهش اضافه کنن.افزونه‌ها می‌تونن رابط کاربری هم داشته باشن که میتونه تو صفحه تنظیمات یا به عنوان pop-up window شخصی سازی بشه.Manifestتو هسته هر افزونه کروم، فایل manifest.json قرار داره. این فایل توی افزونه مثل ستون فقرات توی بدن عمل میکنه و شامل اطلاعات و تنظیمات اصلی و مهمی هست که کروم برای درک و مدیریت کردن افزونه شما از این فایل استفاده می‌کنه. بیاید بخش‌های مهم ساختار این فایل رو با هم بررسی کنیم:نسخه فایل manifest (manifest_version): در حال حاضر کروم ۲ نسخه از فایل manifest رو پشتیبانی می‌کنه؛ v2 و v3. در حال حاضر کروم استفاده از نسخه 3 را به دلیل به‌روز تر بودن پیشنهاد می‌کنه.نام افزونه (name): نام افزونه رو مشخص می‌کنه. تو این قسمت معمولاً یک اسم توصیفی و مختصر انتخاب میشه که هدف افزونه رو نشون بده.نسخه افزونه (version): نسخه افزونه تو این قسمت مشخص میشه. هربار که قصد انتشار نسخه جدیدی از افزونه رو داریم این عدد رو افزایش میدیم.توضیحات (description): تو این بخش یه توضیح مختصر از کاربرد افزونه نوشته می‌شه. این توضیحات تو صفحه مدیریت افزونه‌ها تو کروم نمایش داده می‌شه.آیکون‌ها (icons): آیکون‌های افزونه تو اندازه‌های مختلف تو این قسمت مشخص میشه. کروم با خوندن این آیکون‌ها، اون رو توی منو و صفحه مدیریت افزونه‌ها نشون می‌ده.مجوزها (permissions): برای استفاده از برخی از APIهای کروم و یا داده‌های کاربر نیازه که اون‌ها رو تو این قسمت فهرست کنین تا کروم بعد از بررسی مجوزها اجازه انتشار افزونه رو بده.یه فایل manifest ساده تقریباً همچین ساختاری داره:نمونه فایل manifest.jsonبرای اضافه کردن افزونه به کروم، کروم رو باز کنید و صفحه مدیریت افزونه‌ها (chrome://extensions) رو باز کنید. حالت "Developer Mode" رو در گوشه سمت راست بالا فعال کنید. حالا روی "Load Unpacked" کلیک کنید. تو این قسمت باید پوشه‌ای که فایل manifest.json توی اون قرار داره رو انتخاب کنید. اگه همه چیز درست پیش رفته باشه افزونه شما باید کنار بقیه‌ی افزونه ها نمایش داده بشه.Background scriptsدر background scripts، اسکریپت‌هایی قرار می‌گیرن که معمولاً بخش اصلی افزونه رو تشکیل می‌دن. این اسکریپت‌ها معمولا شامل Event Listener هاییه که بعد از اتفاق افتادن تعدادی رویداد خاص توسط خود مرورگر یا کاربر، اجرا می‌شن (مثلا وقتی کاربر یه تَب جدید توی مرورگر باز میکنه یا وقتی URL تغییر می‌کنه). این بخش از افزونه می‌تونه به بخش های مختلف هم دسترسی داشته باشه، برای مثال درخواست به سرویس های خارجی بزنه، به حافظه مرورگر دسترسی داشته باشه و یا از API های خود کروم استفاده کنه.برای مثال می‌تونیم وقتی کاربر افزونه رو نصب کرد یه پیام تو کنسول بهش نشون بدیم:یکی از مهم‌ترین توانایی‌های background scripts انتقال اطلاعات بین اجزای مختلف افزونه‌ست. بیاید با یه مثال ببینیم که چطور می‌شه از این قابلیت استفاده کرد. فرض کنید توی pop-up اطلاعاتی رو از کاربر دریافت می‌کنیم و می‌خوایم با استفاده از اون اطلاعات یه درخواست API خارجی ثبت کنیم تا پردازش بشه و دوباره اطلاعات پردازش شده رو توسط یک تابع Callback به کاربر برگردونیم :یادتون نره که باید فایل background scripts خودتون رو به صورت زیر توی manifest.json اضافه کنید:Content Scriptsبا استفاده از Content Scripts می‌تونیم اسکریپت‌هایی رو روی صفحات وب اجرا کنیم. با دسترسی ویرایش DOM میتونیم تغییرات مورد نظرمون رو روی صفحه وبی که کاربر مشاهده می‌کنه اعمال کنیم یا یه بخش جدید بهش اضافه کنیم. با استفاده از این اسکریپت‌ها می‌شه DOM رو تغییر داد، استایل های CSS رو عوض کرد، المان هایی اضافه یا حذف کرد و حتی به وسیله برقراری ارتباط با Background Scripts کارهای خلاقانه تری انجام داد!برای استفاده از Content Scripts باید فیلد "content_scripts" رو توی "manifest.json" اضافه کنیم:توی این ساختار، "matches" مشخص می‌کنه که این اسکریپت‌ها باید توی چه URL هایی اجرا بشن. امکان اضافه کردن فایل های CSS هم برای استایل دادن به المان های جدید با فیلد "css" وجود داره.ادامه کار رو با یک مثال کلی جلو می‌بریم. تو مثال بالا Content Scripts توی فایلی با نام "content_scripts.js" ذخیره شدن و با استفاده از فیلد "matches" اون هارو تنظیم کردیم که تو صفحه اصلی google اجرا بشن. حالا میخوایم تصویر پس زمینه صقحه اصلی گوگل رو عوض کنیم.توی "content_scripts.js" کد زیر رو برای عوض کردن پس زمینه اضافه می‌کنیم:حالا وارد صفحه مدیریت افزونه‌های کروم بشید و افزونه رو به‌روز کنید. اگه همه چیز درست پیش رفته باشه و وارد صفحه اصلی گوگل بشید بایدهمچین صحنه‌ای باز شده باشه:مجوزهابرای استفاده از برخی از API های کروم، باید مجوزهای مورد نیازش را تو لیست مجوزهای "manifest.json" اضافه کنیم. رایج‌ترین مجوزهای مورد استفاده رو لیست کردم:تَب‌ها (tabs): برای دسترسی به تَب‌های کروم.حافظه (storage): برای دسترسی به حافظه مرورگر.تَب فعال (activeTab): برای دسترسی به تَبی که در حال حاضر توی کروم باز شده.بوک‌مارک‌ها (bookmarks): برای دسترسی به بوک‌مارک‌های کاربر.نوتیفیکشن (notifications): برای نشون دادن نوتیفیکیشن به کاربر توی مرورگر.Actionsتو فایل "manifest.json" با استفاده از فیلد "actions" می‌تونید رفتار افزونه رو توی نوار ابزار (toolbar) کروم مدیریت کنید.بعد از اضافه کردن ساختار بالا به فایل "manifest.json"، با نگه داشتن نشان‌گر ماوس روی آیکون افزونه تو نوار ابزار کروم، "Click Me!" رو آیکون نمایش داده می‌شه. با کلیک کردن روی آیکون افزونه هم فایل "popup.html" نشون داده می‌شه.برای استفاده از این ویژگی‌ها، یه قابلیت جدید به افزونه خودمون اضافه می‌کنیم که با کلیک کاربر روی یه دکمه توی فابل "popup.html" پس زمینه صفحه گوگل عوض بشه.اول فایل "popup.html" رو با این ساختار ایجاد می‌کنیم:حالا فایل "popup.js" رو هم با ساختار زیر می‌سازیم:با کلیک روی دکمه، تابع changeBackground اجرا می‌شه که یه پیام با کلید "change-background" به Background Scripts ارسال می‌کنه.حالا باید کد مورد نیاز رو توی ‌Background Scripts اضافه کنیم تا Content Scripts رو توی صفحه اصلی گوگل اجرا کنه و پس زمینه رو عوض کنه.حواستون باشه که دیگه نیازی نیست Content Script هامون بلافاصله بعد از باز شدن صفحه اجرا بشن و باید با کلیک کردن روی دکمه این اتفاق بیفته. پس باید بخش Content Scripts رو از فایل "manifest.json" حدف کنیم.یادتون نره که باید مجوزهای لازم رو هم اضافه کنیم:حالا با کلیک رو آیکون افزونه توی نوار ابزار کروم، پنجره popup نشون داده می‌شه. اگه تو صفحه اصلی گوگل باشید، با کلیک روی دکمه‌ی توی صفحه پس زمینه صفحه وب تغییر می‌کنه.Web Accessible Resourcesاگه نیاز دارید از عکس، فونت یا هر نوع منبع دیگه‌ای توی افزونه استفاده کنید باید اون‌ها رو توی فیلد "web_accessible_resources" تو فایل "manifest.json" اضافه کنید. برای اضافه کردن می‌تونید اون‌هارو مستقیم اضافه کنید یا از الگوهایی برای تطبیق دادنشون استفاده کنید.نتیجه گیریبا افزونه‌های کروم می‌تونیم عملکردهای مرورگر رو ارتقا بدیم و تجربه بهتری به کاربرها ارائه بدیم.تو این مقاله اصول اولیه توسعه افزونه‌های کروم رو بررسی کردیم؛ اگرچه، افزونه‌ها ویژگی‌های زیادی توسط کروم با ابزارهای عالی ارائه می‌دن. پس اگه کاربرد خاصی توی ذهنتون دارید برای ورود به این دنیای جذاب تردید نکنید.گوگل مستندات کاملی از افزونه‌های کروم ارائه کرده که می‌تونه منبع مناسبی برای پیدا کردن ویژگی‌های دیگه و راه حل های بهتر باشه. علی عباسی علی عباسی Wed, 18 Oct 2023 15:44:55 +0330 https://virgool.io/tomanfrontendteam/dor-definition-of-ready-kfb86vhsvuey در توسعه نرم‌افزار با متودولوژی Agile، قبل از این که یک آیتم بک‌لاگ محصول (Product Backlog Item یا PBI) بتونه برای توسعه انتخاب بشه باید شاخص هایی رو رعایت کنه که این دسته از شاخص ها رو با اسم Definition of Ready یا به اختصار DoR می‌شناسیم. DoR ابزار مفیدیه برای اطمینان از اینکه یک PBI به خوبی درک شده، اندازه مشخص و درست داره و می‌تونه به طور موثر پیاده سازی شه. در واقع هدف از ارائه مفهوم DoR رسیدن به یک درک مشترک از «آماده» بودن یک PBI برای شروع فرآیند اجراست.تو این مقاله مفاهیم DoR رو بررسی می‌کنیم و به اهمیت اون تو متودولوژی Agile می‌پردازیم.مفهوم DoR شامل چه مواردی می‌شود؟معمولا مواردی که برای تعریف شاخص های DoR در نظر گرفته میشه شامل از این دسته هاست:ملاک پذیرش: یه PBI باید معیارهای پذیرش مختصر، واضح و قابل اندازه‌گیری داشته باشه. در این صورت می‌شه تا حد خوبی موارد مورد نیاز برای توسعه اون رو تخمین زد.تخمین اندازه: با تخمین اندازه یک PBI می‌شه از به اندازه کافی کوچک بودنش برای قرار گرفتن توی اسپرینت مطمئن شد.وابستگی: قبل از انتخاب یه PBI برای توسعه، باید وابستگی های اون PBI، به PBI ها یا تیم های دیگه مشخص و برطرف بشه.داستان کاربر (user story): یه PBI باید به صورت یک داستان از زبان کاربر نقل شه تا مشخص بشیم چه ارزشی برای کاربر خلق می‌کنه.اولویت: PBI ها باید با توجه به ارزش تجاری و فوریت اجرا اولویت بندی بشن.چرا تعریف و اجرای DoR مهمه؟با تعیین شاخص های DoR برای یک تیم، می‌تونیم تضمین کنیم که اون تیم درک مشترکی از آماده بودن یک PBI برای شروع فرآیند توسعه داره. این درک مشترک علاوه بر کم کردن درگیری‌ها، مشکلات و تأخیرهای معمول در فرآیند توسعه، به تیم کمک می‌کنه که فرآیند توسعه کارآمدتر و موثرتری داشته باشه. با درک درست اندازه یک PBI تیم می‌تونه به شکل درست‌تری برای اون برنامه ریزی کنه، مدیریت حجم کاری تیم بهتر انجام می‌شه و در نتیجه تیم به تعهدات خودش بهتر عمل می‌کنه.یکی از مهمترین عوامل ایجاد تأخیر در فرآیند توسعه، وابستگی ها هستن. با شناسایی و حل وابستگی ها قبل از شروع توسعه، تیم می‌تونه از تأخیرهایی که ممکنه در طول توسعه رخ بده، جلوگیری کنه تا وظایف تیم هم در طول اسپرینت کامل انجام بشه.مثالی از شاخص های DoRدر ادامه یکی از معروف ترین دسته از شاخص های DoR رو معرفی می‌کنیم که به شاخص INVEST هم معروفه:عدم وابستگی (Independent): یک PBI باید خودکفا باشه. یعنی بدون هیچ‌گونه وابستگی به بخش دیگه‌ای بتونه به مرحله توسعه برسه.قابل مذاکره (Negotiable): نحوه پیاده سازی یک PBI باید قابل بحث باشه تا بشه بهینه‌ترش کرد.ارزشمندی (Valuable): تقریبا مهم‌ترین اولویت برای یک PBI ارزشمندی اون برای مشتری‌ها و سرمایه‌گذارهاست.قابل تخمین (Estimable): اندازه و حجم کار یه PBI باید قابل تخمین باشه تا بشه براش برنامه‌ریزی کرد.کوچک (Small): یک PBI باید به قدری کوچک باشه که بشه تخمین خوبی برای مدت زمان و حجم کار مورد نیازش زد. معمولا هرچه PBI ها بزرگ‌تر باشن، تخمینی که براشون در نظر گرفته میشه دقت کمتری داره!قابلیت تست (Testable): برای هر PBI باید یک سری معیارهای پذیرش (Acceptance Criteria) تعریف بشه که بعد از انجامش توسط همون معیارها بتونیم کیفیت اون رو بسنجیم.نتیجه گیریقرارداد کردن یک سری موارد و شاخص ها با عنوان تعریف آماده بودن برای یک PBI علاوه بر سنجیدن ارزش پیاده سازی، با یکسان کردن درک کل تیم از اون PBI کمک می‌کنه درک درست تری از وظایف و کارهای لازم برای توسعه داشته باشیم و با برنامه ریزی درست‌تر و دقیق‌تر میتونیم تیم منظم‌تر و کارآمد تری بسازیم. علی عباسی علی عباسی Thu, 25 May 2023 13:47:00 +0330