توسعه افزونه مرورگر: Manifest V3 و APIهای جاوا اسکریپت

افزونه‌های مرورگر برنامه‌های نرم‌افزاری کوچکی هستند که تجربه وب‌گردی را شخصی‌سازی می‌کنند. آن‌ها می‌توانند ویژگی‌های جدیدی اضافه کنند، محتوای وب‌سایت‌ها را تغییر دهند، تبلیغات را مسدود کنند و کارهای بسیار دیگری انجام دهند. با ظهور Manifest V3، نحوه ساخت و عملکرد افزونه‌ها دچار تغییرات قابل توجهی شده است. این راهنمای جامع به بررسی توسعه افزونه مرورگر با استفاده از Manifest V3 و APIهای جاوا اسکریپت می‌پردازد و دانش لازم برای ایجاد افزونه‌های قدرتمند و امن برای مرورگرهای مدرن را در اختیار شما قرار می‌دهد.

افزونه‌های مرورگر چه هستند؟

افزونه‌های مرورگر در واقع برنامه‌های کوچکی هستند که درون یک مرورگر وب اجرا می‌شوند. آن‌ها عملکرد مرورگر را گسترش می‌دهند و به طور یکپارچه با صفحات وب ادغام می‌شوند. افزونه‌ها با استفاده از فناوری‌های استاندارد وب مانند HTML، CSS و جاوا اسکریپت نوشته می‌شوند که این امر آن‌ها را برای توسعه‌دهندگان وب نسبتاً در دسترس قرار می‌دهد.

نمونه‌هایی از افزونه‌های مرورگر محبوب عبارتند از:

• مسدودکننده‌های تبلیغات: تبلیغات را در صفحات وب مسدود کرده، سرعت وب‌گردی را بهبود می‌بخشند و حواس‌پرتی‌ها را کاهش می‌دهند.
• مدیران رمز عبور: رمزهای عبور را به صورت امن ذخیره و مدیریت کرده و به طور خودکار آن‌ها را در وب‌سایت‌ها پر می‌کنند.
• افزونه‌های یادداشت‌برداری: به کاربران اجازه می‌دهند مستقیماً از صفحات وب یادداشت برداشته و آن‌ها را ذخیره کنند.
• ابزارهای بهره‌وری: با ارائه ویژگی‌هایی مانند مدیریت وظایف، ردیابی زمان و حالت‌های تمرکز، بهره‌وری را افزایش می‌دهند.
• ابزارهای ترجمه زبان: صفحات وب را با یک کلیک به زبان‌های مختلف ترجمه می‌کنند. مثال: افزونه Google Translate.
• افزونه‌های VPN: ترافیک اینترنت را از طریق پراکسی هدایت می‌کنند تا محدودیت‌های جغرافیایی را دور زده و حریم خصوصی را تقویت کنند.

اهمیت Manifest V3

Manifest V3 آخرین نسخه از فایل مانیفست است که یک فایل JSON بوده و افزونه را برای مرورگر توصیف می‌کند. این فایل نام، نسخه، مجوزها، اسکریپت‌های پس‌زمینه و سایر فراداده‌های ضروری افزونه را مشخص می‌کند. Manifest V3 چندین تغییر کلیدی را در مقایسه با نسخه قبلی خود، Manifest V2، معرفی می‌کند که عمدتاً بر امنیت و عملکرد تمرکز دارند.

تغییرات کلیدی در Manifest V3:

• سرویس ورکرها (Service Workers): در Manifest V3، صفحات پس‌زمینه (background pages) با سرویس ورکرها جایگزین شده‌اند. سرویس ورکرها اسکریپت‌های رویدادمحوری هستند که در پس‌زمینه اجرا می‌شوند و نیازی به یک صفحه پایدار ندارند. آن‌ها کارآمدتر بوده و منابع کمتری نسبت به صفحات پس‌زمینه مصرف می‌کنند.
• Declarative Net Request API: این API به افزونه‌ها اجازه می‌دهد تا درخواست‌های شبکه را بدون رهگیری مستقیم آن‌ها تغییر دهند. این کار با واگذاری منطق فیلترینگ به مرورگر، امنیت و عملکرد را افزایش می‌دهد.
• سیاست امنیتی محتوای سخت‌گیرانه‌تر (CSP): در Manifest V3 قوانین CSP سخت‌گیرانه‌تری برای جلوگیری از اجرای کدهای دلخواه اعمال می‌شود که امنیت را بیشتر تقویت می‌کند.
• APIهای مبتنی بر Promise: بسیاری از APIها اکنون مبتنی بر Promise هستند که مدیریت عملیات ناهمزمان را آسان‌تر می‌کند.

چرا به Manifest V3 روی آورده شد؟

• امنیت بهبودیافته: Manifest V3 برای بهبود امنیت افزونه‌های مرورگر و محافظت از کاربران در برابر کدهای مخرب طراحی شده است.
• عملکرد بهتر: سرویس ورکرها و Declarative Net Request API به عملکرد بهتر و کاهش مصرف منابع کمک می‌کنند.
• حریم خصوصی بیشتر: Manifest V3 با هدف دادن کنترل بیشتر به کاربران بر روی داده‌ها و حریم خصوصی‌شان طراحی شده است.

راه‌اندازی محیط توسعه

قبل از شروع به توسعه افزونه‌های مرورگر، باید محیط توسعه خود را راه‌اندازی کنید. این کار شامل نصب یک ویرایشگر کد، انتخاب یک مرورگر برای آزمایش و درک ساختار فایل اصلی یک افزونه است.

۱. ویرایشگر کد

یک ویرایشگر کدی را انتخاب کنید که با آن راحت هستید. گزینه‌های محبوب عبارتند از:

• Visual Studio Code (VS Code): یک ویرایشگر کد رایگان و قدرتمند با پشتیبانی عالی از جاوا اسکریپت و سایر فناوری‌های وب.
• Sublime Text: یک ویرایشگر کد سریع و قابل تنظیم با طیف گسترده‌ای از پلاگین‌ها.
• Atom: یک ویرایشگر کد رایگان و منبع‌باز که توسط GitHub توسعه داده شده است.

۲. مرورگر برای آزمایش

یک مرورگر برای آزمایش افزونه‌های خود انتخاب کنید. کروم و فایرفاکس محبوب‌ترین گزینه‌ها هستند، زیرا ابزارهای توسعه‌دهنده قوی و پشتیبانی خوبی برای توسعه افزونه ارائه می‌دهند.

۳. ساختار فایل اصلی

یک افزونه مرورگر به طور معمول از فایل‌های زیر تشکیل شده است:

• manifest.json: این فایل حاوی فراداده‌های افزونه مانند نام، نسخه، مجوزها و اسکریپت‌های پس‌زمینه است.
• background.js (یا اسکریپت سرویس ورکر): این اسکریپت در پس‌زمینه اجرا می‌شود و رویدادهایی مانند کلیک روی آیکون افزونه و منوی راست‌کلیک را مدیریت می‌کند.
• content.js: این اسکریپت در زمینه صفحات وب اجرا می‌شود و می‌تواند محتوای آن‌ها را تغییر دهد.
• popup.html: این فایل رابط کاربری پاپ‌آپ افزونه را تعریف می‌کند.
• popup.js: این اسکریپت منطق پاپ‌آپ افزونه را مدیریت می‌کند.
• options.html: این فایل رابط کاربری صفحه تنظیمات افزونه را تعریف می‌کند.
• options.js: این اسکریپت منطق صفحه تنظیمات افزونه را مدیریت می‌کند.
• icons: این‌ها آیکون‌هایی هستند که برای نمایش افزونه در نوار ابزار مرورگر و صفحه مدیریت افزونه‌ها استفاده می‌شوند.

ایجاد اولین افزونه: «سلام، دنیا!»

بیایید یک افزونه ساده «سلام، دنیا!» ایجاد کنیم تا اصول اولیه توسعه افزونه مرورگر را نشان دهیم.

۱. ایجاد فایل مانیفست (manifest.json)

یک فایل به نام `manifest.json` در یک دایرکتوری جدید ایجاد کرده و کد زیر را به آن اضافه کنید:

{
  "manifest_version": 3,
  "name": "Hello, World!",
  "version": "1.0",
  "description": "A simple Hello, World! extension",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

توضیح:

• `manifest_version`: نسخه فایل مانیفست را مشخص می‌کند (۳ برای Manifest V3).
• `name`: نام افزونه.
• `version`: شماره نسخه افزونه.
• `description`: توضیح مختصری از افزونه.
• `permissions`: آرایه‌ای از مجوزهایی که افزونه نیاز دارد (مثلاً "storage").
• `action`: ویژگی‌های پاپ‌آپ افزونه را تعریف می‌کند، از جمله فایل پاپ‌آپ پیش‌فرض و آیکون‌ها.
• `icons`: مسیرهای آیکون‌های افزونه را مشخص می‌کند.

۲. ایجاد فایل پاپ‌آپ (popup.html)

یک فایل به نام `popup.html` در همان دایرکتوری ایجاد کرده و کد زیر را به آن اضافه کنید:

<!DOCTYPE html>
<html>
<head>
  <title>سلام، دنیا!</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>سلام، دنیا!</h1>
  <p>این یک افزونه مرورگر ساده است.</p>
</body>
</html>

این فایل رابط کاربری پاپ‌آپ افزونه را تعریف می‌کند که پیام «سلام، دنیا!» را نمایش می‌دهد.

۳. ایجاد تصاویر آیکون

سه تصویر آیکون با اندازه‌های زیر ایجاد کنید: ۱۶x۱۶، ۴۸x۴۸ و ۱۲۸x۱۲۸ پیکسل. آن‌ها را با نام‌های `icon16.png`، `icon48.png` و `icon128.png` در یک دایرکتوری به نام `images` درون دایرکتوری افزونه خود ذخیره کنید.

۴. بارگذاری افزونه در مرورگر

کروم:

1. کروم را باز کرده و به آدرس `chrome://extensions` بروید.
2. در گوشه بالا سمت راست، حالت «Developer mode» را فعال کنید.
3. روی «Load unpacked» کلیک کرده و دایرکتوری حاوی فایل‌های افزونه خود را انتخاب کنید.

فایرفاکس:

1. فایرفاکس را باز کرده و به آدرس `about:debugging#/runtime/this-firefox` بروید.
2. روی «Load Temporary Add-on...» کلیک کرده و فایل `manifest.json` را انتخاب کنید.

اکنون افزونه «سلام، دنیا!» شما باید نصب شده و در نوار ابزار مرورگر قابل مشاهده باشد. روی آیکون افزونه کلیک کنید تا پاپ‌آپ باز شده و پیام «سلام، دنیا!» را ببینید.

کار با APIهای جاوا اسکریپت

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

• Tabs API: به شما امکان مدیریت تب‌های مرورگر، از جمله ایجاد، به‌روزرسانی و جستجوی تب‌ها را می‌دهد.
• Storage API: راهی برای ذخیره و بازیابی داده‌ها به صورت پایدار در افزونه فراهم می‌کند.
• Alarms API: به شما امکان می‌دهد وظایفی را برای اجرا در زمان‌های مشخص برنامه‌ریزی کنید.
• Notifications API: شما را قادر می‌سازد تا اعلان‌هایی را به کاربر نمایش دهید.
• Context Menus API: به شما اجازه می‌دهد آیتم‌های سفارشی را به منوی راست‌کلیک مرورگر اضافه کنید.
• Web Request API (در Manifest V3 به Declarative Net Request تغییر یافته): شما را قادر می‌سازد تا درخواست‌های شبکه را رهگیری و تغییر دهید.
• Scripting API: امکان تزریق اسکریپت به صفحات وب را فراهم می‌کند.

مثال: استفاده از Storage API

بیایید افزونه‌ای بسازیم که نام کاربر را با استفاده از Storage API ذخیره و بازیابی کند.

۱. به‌روزرسانی فایل مانیفست (manifest.json)

مطمئن شوید که آرایه `permissions` در فایل `manifest.json` شما شامل `"storage"` باشد:

{
  "manifest_version": 3,
  "name": "Storage Example",
  "version": "1.0",
  "description": "An extension that uses the Storage API",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

۲. ایجاد فایل پاپ‌آپ (popup.html)

فایل `popup.html` خود را با محتوای زیر ایجاد یا به‌روزرسانی کنید:

<!DOCTYPE html>
<html>
<head>
  <title>مثال Storage</title>
  <style>
    body {
      width: 250px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>مثال Storage</h1>
  <label for="name">نام خود را وارد کنید:</label>
  <input type="text" id="name">
  <button id="save">ذخیره</button>
  <p id="greeting"></p>
  <script src="popup.js"></script>
</body>
</html>

۳. ایجاد اسکریپت پاپ‌آپ (popup.js)

یک فایل به نام `popup.js` ایجاد کرده و کد زیر را به آن اضافه کنید:

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // بارگذاری نام ذخیره شده از حافظه
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `سلام، ${data.name}!`;
    }
  });

  // ذخیره نام در حافظه هنگام کلیک روی دکمه
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `سلام، ${name}!`;
    });
  });
});

توضیح:

• این اسکریپت به رویداد `DOMContentLoaded` گوش می‌دهد تا اطمینان حاصل کند که DOM قبل از اجرای کد به طور کامل بارگذاری شده است.
• مراجع مربوط به فیلد ورودی، دکمه ذخیره و پاراگراف خوشامدگویی را دریافت می‌کند.
• نام ذخیره شده را با استفاده از `chrome.storage.sync.get()` از حافظه بارگذاری می‌کند.
• هنگام کلیک روی دکمه ذخیره، نام را با استفاده از `chrome.storage.sync.set()` در حافظه ذخیره می‌کند.
• پاراگراف خوشامدگویی را با نام ذخیره شده یا وارد شده به‌روز می‌کند.

افزونه را در مرورگر خود دوباره بارگذاری کنید. اکنون، وقتی پاپ‌آپ را باز می‌کنید، می‌توانید نام خود را وارد کرده، آن را ذخیره کنید و پیام خوشامدگویی را ببینید. نام در حافظه افزونه ذخیره می‌شود و دفعه بعد که پاپ‌آپ را باز کنید بارگذاری خواهد شد.

مثال: استفاده از Tabs API

بیایید افزونه‌ای بسازیم که URL تب فعلی را در یک پاپ‌آپ نمایش دهد.

۱. به‌روزرسانی فایل مانیفست (manifest.json)

مجوز `"tabs"` را به آرایه `permissions` در فایل `manifest.json` خود اضافه کنید:

{
  "manifest_version": 3,
  "name": "Tabs Example",
  "version": "1.0",
  "description": "An extension that uses the Tabs API",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

۲. ایجاد فایل پاپ‌آپ (popup.html)

فایل `popup.html` خود را با محتوای زیر ایجاد یا به‌روزرسانی کنید:

<!DOCTYPE html>
<html>
<head>
  <title>مثال Tabs</title>
  <style>
    body {
      width: 300px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>مثال Tabs</h1>
  <p>URL تب فعلی:</p>
  <p id="url"></p>
  <script src="popup.js"></script>
</body>
</html>

۳. ایجاد اسکریپت پاپ‌آپ (popup.js)

یک فایل به نام `popup.js` ایجاد کرده و کد زیر را به آن اضافه کنید:

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // دریافت URL تب فعلی
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

توضیح:

• اسکریپت به رویداد `DOMContentLoaded` گوش می‌دهد.
• از `chrome.tabs.query()` برای دریافت تب فعال فعلی در پنجره فعلی استفاده می‌کند.
• URL تب را بازیابی کرده و آن را در پاراگراف `url` نمایش می‌دهد.

افزونه را در مرورگر خود دوباره بارگذاری کنید. اکنون، وقتی پاپ‌آپ را باز می‌کنید، URL تب فعلی نمایش داده می‌شود.

اسکریپت‌های پس‌زمینه و سرویس ورکرها

در Manifest V3، اسکریپت‌های پس‌زمینه با سرویس ورکرها جایگزین شده‌اند. سرویس ورکرها اسکریپت‌های رویدادمحوری هستند که در پس‌زمینه اجرا می‌شوند و نیازی به یک صفحه پایدار ندارند. آن‌ها کارآمدتر بوده و منابع کمتری نسبت به صفحات پس‌زمینه مصرف می‌کنند.

ویژگی‌های کلیدی سرویس ورکرها:

• رویدادمحور: سرویس ورکرها به رویدادهایی مانند کلیک روی آیکون افزونه، آلارم‌ها و پیام‌های اسکریپت‌های محتوا پاسخ می‌دهند.
• ناهمزمان: سرویس ورکرها از APIهای ناهمزمان برای جلوگیری از مسدود کردن نخ اصلی استفاده می‌کنند.
• خاتمه در حالت بیکاری: سرویس ورکرها زمانی که به طور فعال رویدادی را مدیریت نمی‌کنند، خاتمه می‌یابند تا در مصرف منابع صرفه‌جویی شود.

مثال: استفاده از یک سرویس ورکر

بیایید افزونه‌ای بسازیم که هنگام راه‌اندازی مرورگر یک اعلان نمایش دهد.

۱. به‌روزرسانی فایل مانیفست (manifest.json)

فایل `manifest.json` خود را با محتوای زیر به‌روزرسانی کنید:

{
  "manifest_version": 3,
  "name": "Service Worker Example",
  "version": "1.0",
  "description": "An extension that uses a service worker",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

توضیح:

• ویژگی `"background"` مسیر اسکریپت سرویس ورکر (`background.js`) را مشخص می‌کند.
• آرایه `"permissions"` شامل `"notifications"` است که برای نمایش اعلان‌ها لازم است.

۲. ایجاد اسکریپت سرویس ورکر (background.js)

یک فایل به نام `background.js` ایجاد کرده و کد زیر را به آن اضافه کنید:

chrome.runtime.onStartup.addListener(() => {
  // نمایش یک اعلان هنگام راه‌اندازی مرورگر
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Browser Started',
    message: 'The browser has started.',
  });
});

توضیح:

• اسکریپت به رویداد `chrome.runtime.onStartup` گوش می‌دهد که هنگام راه‌اندازی مرورگر فعال می‌شود.
• از `chrome.notifications.create()` برای نمایش یک اعلان با ویژگی‌های مشخص شده استفاده می‌کند.

افزونه را در مرورگر خود دوباره بارگذاری کنید. اکنون، وقتی مرورگر خود را دوباره راه‌اندازی می‌کنید، باید یک اعلان از طرف افزونه مشاهده کنید.

اسکریپت‌های محتوا (Content Scripts)

اسکریپت‌های محتوا فایل‌های جاوا اسکریپتی هستند که در زمینه صفحات وب اجرا می‌شوند. آن‌ها می‌توانند به DOM صفحات وب دسترسی داشته باشند و آن را تغییر دهند، که به شما امکان می‌دهد رفتار و ظاهر وب‌سایت‌ها را سفارشی کنید.

ویژگی‌های کلیدی اسکریپت‌های محتوا:

• دسترسی به DOM: اسکریپت‌های محتوا می‌توانند به DOM صفحات وب دسترسی داشته باشند و آن را دستکاری کنند.
• جداسازی از اسکریپت‌های صفحه وب: اسکریپت‌های محتوا در یک محیط جدا شده اجرا می‌شوند که از تداخل با اسکریپت‌های صفحه وب جلوگیری می‌کند.
• ارتباط با اسکریپت‌های پس‌زمینه: اسکریپت‌های محتوا می‌توانند با استفاده از ارسال پیام با اسکریپت‌های پس‌زمینه ارتباط برقرار کنند.

مثال: استفاده از یک اسکریپت محتوا

بیایید افزونه‌ای بسازیم که رنگ پس‌زمینه صفحات وب را به آبی روشن تغییر دهد.

۱. به‌روزرسانی فایل مانیفست (manifest.json)

فایل `manifest.json` خود را با محتوای زیر به‌روزرسانی کنید:

{
  "manifest_version": 3,
  "name": "Content Script Example",
  "version": "1.0",
  "description": "An extension that uses a content script",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

توضیح:

• ویژگی `"content_scripts"` آرایه‌ای از اسکریپت‌های محتوا را برای تزریق به صفحات وب مشخص می‌کند.
• `"matches"` آدرس‌های URL را که اسکریپت محتوا باید به آن‌ها تزریق شود، مشخص می‌کند (`` با همه URLها مطابقت دارد).
• `"js"` مسیر اسکریپت محتوا (`content.js`) را مشخص می‌کند.
• آرایه `"permissions"` شامل `"activeTab"` و `"scripting"` است که برای تزریق اسکریپت‌ها لازم هستند.

۲. ایجاد یک اسکریپت محتوا (content.js)

یک فایل به نام `content.js` ایجاد کرده و کد زیر را به آن اضافه کنید:

document.body.style.backgroundColor = 'lightblue';

۳. ایجاد یک سرویس ورکر (background.js)

یک فایل به نام `background.js` ایجاد کرده و کد زیر را به آن اضافه کنید:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

توضیح:

• اسکریپت محتوا به سادگی رنگ پس‌زمینه عنصر `body` را به آبی روشن تغییر می‌دهد.
• سرویس ورکر به رویداد کلیک گوش می‌دهد و یک تابع را در تب فعلی اجرا می‌کند که رنگ پس‌زمینه را تغییر می‌دهد.

افزونه را در مرورگر خود دوباره بارگذاری کنید. اکنون، وقتی هر صفحه وبی را باز می‌کنید، رنگ پس‌زمینه آبی روشن خواهد بود.

اشکال‌زدایی (Debugging) افزونه‌های مرورگر

اشکال‌زدایی افزونه‌های مرورگر بخش ضروری فرآیند توسعه است. کروم و فایرفاکس ابزارهای توسعه‌دهنده عالی برای اشکال‌زدایی افزونه‌ها ارائه می‌دهند.

اشکال‌زدایی در کروم:

1. کروم را باز کرده و به آدرس `chrome://extensions` بروید.
2. در گوشه بالا سمت راست، حالت «Developer mode» را فعال کنید.
3. برای افزونه خود روی «Inspect views background page» کلیک کنید. این کار ابزارهای توسعه‌دهنده کروم (Chrome DevTools) را برای اسکریپت پس‌زمینه باز می‌کند.
4. برای اشکال‌زدایی اسکریپت‌های محتوا، صفحه وبی را که اسکریپت محتوا در آن تزریق شده است باز کنید و سپس ابزارهای توسعه‌دهنده کروم را برای آن صفحه باز کنید. شما باید اسکریپت محتوای خود را در پنل «Sources» مشاهده کنید.

اشکال‌زدایی در فایرفاکس:

1. فایرفاکس را باز کرده و به آدرس `about:debugging#/runtime/this-firefox` بروید.
2. افزونه خود را در لیست پیدا کرده و روی «Inspect» کلیک کنید. این کار ابزارهای توسعه‌دهنده فایرفاکس را برای افزونه باز می‌کند.
3. برای اشکال‌زدایی اسکریپت‌های محتوا، صفحه وبی را که اسکریپت محتوا در آن تزریق شده است باز کنید و سپس ابزارهای توسعه‌دهنده فایرفاکس را برای آن صفحه باز کنید. شما باید اسکریپت محتوای خود را در پنل «Debugger» مشاهده کنید.

تکنیک‌های رایج اشکال‌زدایی:

• ثبت در کنسول: از `console.log()` برای چاپ پیام‌ها در کنسول استفاده کنید.
• نقاط توقف (Breakpoints): در کد خود نقاط توقف قرار دهید تا اجرا را متوقف کرده و متغیرها را بررسی کنید.
• نقشه‌های منبع (Source maps): از نقشه‌های منبع برای اشکال‌زدایی کد خود در فرم اصلی آن استفاده کنید، حتی اگر کوچک‌سازی یا تبدیل شده باشد.
• مدیریت خطا: مدیریت خطا را برای گرفتن و ثبت خطاها پیاده‌سازی کنید.

انتشار افزونه شما

پس از توسعه و آزمایش افزونه خود، می‌توانید آن را در فروشگاه وب کروم (Chrome Web Store) یا بازار افزونه‌های فایرفاکس (Firefox Add-ons marketplace) منتشر کنید.

انتشار در فروشگاه وب کروم:

1. یک حساب توسعه‌دهنده در فروشگاه وب کروم ایجاد کنید.
2. افزونه خود را در یک فایل `.zip` بسته‌بندی کنید.
3. فایل `.zip` را در فروشگاه وب کروم آپلود کنید.
4. فراداده‌های مورد نیاز مانند نام، توضیحات و اسکرین‌شات‌های افزونه را ارائه دهید.
5. افزونه خود را برای بررسی ارسال کنید.

انتشار در بازار افزونه‌های فایرفاکس:

1. یک حساب توسعه‌دهنده در بازار افزونه‌های فایرفاکس ایجاد کنید.
2. افزونه خود را در یک فایل `.zip` بسته‌بندی کنید.
3. فایل `.zip` را در بازار افزونه‌های فایرفاکس آپلود کنید.
4. فراداده‌های مورد نیاز مانند نام، توضیحات و اسکرین‌شات‌های افزونه را ارائه دهید.
5. افزونه خود را برای بررسی ارسال کنید.

بهترین شیوه‌ها برای انتشار:

• توضیحات واضح و مختصری برای افزونه خود بنویسید.
• اسکرین‌شات‌ها و ویدیوهای با کیفیت بالا برای نمایش ویژگی‌های افزونه خود ارائه دهید.
• افزونه خود را قبل از ارسال به طور کامل آزمایش کنید.
• به سرعت به نظرات و بازخوردهای کاربران پاسخ دهید.
• افزونه خود را با آخرین نسخه‌های مرورگر و وصله‌های امنیتی به‌روز نگه دارید.

ملاحظات امنیتی

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

ملاحظات کلیدی امنیتی:

• به حداقل رساندن مجوزها: فقط مجوزهایی را درخواست کنید که افزونه شما واقعاً به آن‌ها نیاز دارد.
• اعتبارسنجی ورودی کاربر: تمام ورودی‌های کاربر را برای جلوگیری از حملات اسکریپت‌نویسی بین سایتی (XSS) پاک‌سازی و اعتبارسنجی کنید.
• استفاده از HTTPS: همیشه از HTTPS برای ارتباط با سرورهای راه دور استفاده کنید.
• سیاست امنیتی محتوا (CSP): یک CSP سخت‌گیرانه برای جلوگیری از اجرای کدهای دلخواه اعمال کنید.
• به‌روزرسانی منظم افزونه: افزونه خود را با آخرین وصله‌های امنیتی به‌روز نگه دارید.

با پیروی از این دستورالعمل‌های امنیتی، می‌توانید به اطمینان از ایمن و امن بودن افزونه مرورگر خود برای کاربران کمک کنید.

نتیجه‌گیری

توسعه افزونه مرورگر با استفاده از Manifest V3 و APIهای جاوا اسکریپت راهی قدرتمند برای شخصی‌سازی تجربه وب‌گردی و افزودن ویژگی‌های جدید به مرورگرهای وب ارائه می‌دهد. با درک مفاهیم کلیدی، APIها و بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید افزونه‌های قدرتمند و امنی ایجاد کنید که بهره‌وری را افزایش می‌دهند، امنیت را بهبود می‌بخشند و تجربه وب‌گردی بهتری را برای کاربران در سراسر جهان فراهم می‌کنند. با ادامه تکامل وب، افزونه‌های مرورگر نقش مهم‌تری در شکل‌دهی به آینده تعاملات آنلاین ایفا خواهند کرد. از فرصت‌های ارائه شده توسط Manifest V3 و مجموعه غنی APIهای جاوا اسکریپت برای ساخت افزونه‌های نوآورانه و ارزشمند استقبال کنید.