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

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

درک افزونه‌های مرورگر

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

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

• مسدودکننده‌های تبلیغات: حذف تبلیغات از صفحات وب.
• مدیران رمز عبور: ذخیره و مدیریت امن رمزهای عبور.
• ابزارهای بهره‌وری: بهبود گردش کار با ویژگی‌هایی مانند مدیریت وظایف و یادداشت‌برداری.
• سفارشی‌سازی محتوا: تغییر ظاهر و رفتار صفحات وب.
• ابزارهای دسترسی‌پذیری: بهبود دسترسی‌پذیری وب برای کاربران دارای معلولیت.

مانیفست V3: استاندارد جدید

مانیفست V3 جدیدترین نسخه فایل مانیفست افزونه مرورگر است، یک فایل JSON که متادیتا، مجوزها و منابع افزونه را توصیف می‌کند. این نسخه تغییرات قابل توجهی را در فرآیند توسعه افزونه ایجاد می‌کند که عمدتاً بر بهبود امنیت، حریم خصوصی و عملکرد متمرکز است. تغییرات کلیدی در مانیفست V3 عبارتند از:

• سرویس ورکرها (Service Workers): جایگزینی صفحات پس‌زمینه با سرویس ورکرها برای بهبود عملکرد و کاهش مصرف حافظه. سرویس ورکرها اسکریپت‌های رویدادمحور هستند که در پس‌زمینه اجرا می‌شوند و رویدادهایی مانند درخواست‌های شبکه و آلارم‌ها را مدیریت می‌کنند.
• API درخواست شبکه اعلانی (Declarative Net Request API): جایگزینی API مسدودکننده webRequest با API درخواست شبکه اعلانی برای فیلتر کردن درخواست‌های شبکه. این کار با محدود کردن دسترسی افزونه به ترافیک شبکه، حریم خصوصی و امنیت را افزایش می‌دهد.
• سیاست امنیت محتوا (CSP): اعمال سیاست‌های سخت‌گیرانه‌تر CSP برای جلوگیری از اجرای کدهای دلخواه و کاهش خطرات امنیتی.
• نسخه مانیفست: کلید manifest_version در فایل manifest.json باید روی 3 تنظیم شود.

مهاجرت از مانیفست V2 به مانیفست V3

مهاجرت از مانیفست V2 به مانیفست V3 نیازمند برنامه‌ریزی دقیق و تغییرات در کد است. در اینجا یک راهنمای گام به گام ارائه شده است:

1. فایل مانیفست را به‌روزرسانی کنید: manifest_version را روی 3 تنظیم کرده و فیلدهای permissions و background را برای مطابقت با الزامات مانیفست V3 به‌روز کنید.
2. صفحات پس‌زمینه را با سرویس ورکرها جایگزین کنید: اسکریپت‌های پس‌زمینه را به عنوان سرویس ورکر بازنویسی کنید و رویدادها را با استفاده از APIهای chrome.scripting و chrome.alarms مدیریت کنید.
3. به API درخواست شبکه اعلانی مهاجرت کنید: فراخوانی‌های مسدودکننده API webRequest را با قوانین اعلانی تعریف شده در API declarativeNetRequest جایگزین کنید.
4. سیاست امنیت محتوا را به‌روزرسانی کنید: فیلد content_security_policy را در فایل مانیفست برای مطابقت با الزامات سخت‌گیرانه‌تر CSP تنظیم کنید.
5. به طور کامل تست کنید: افزونه را به طور گسترده در مرورگرهای مختلف تست کنید تا از سازگاری و عملکرد صحیح اطمینان حاصل کنید.

مثال: مهاجرت یک اسکریپت پس‌زمینه به یک سرویس ورکر

مانیفست V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

مانیفست V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (مانیفست V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

APIهای ضروری جاوا اسکریپت برای افزونه‌های مرورگر

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

۱. chrome.runtime

API chrome.runtime دسترسی به محیط زمان اجرای افزونه را فراهم می‌کند. این API به افزونه‌ها اجازه می‌دهد تا با اسکریپت پس‌زمینه ارتباط برقرار کنند، به فایل مانیفست دسترسی داشته باشند و چرخه حیات افزونه را مدیریت کنند.

متدهای کلیدی:

• chrome.runtime.sendMessage(): پیامی را به اسکریپت پس‌زمینه یا سایر افزونه‌ها ارسال می‌کند.
• chrome.runtime.onMessage.addListener(): به پیام‌های ارسالی از اسکریپت‌های دیگر گوش می‌دهد.
• chrome.runtime.getManifest(): فایل مانیفست افزونه را به عنوان یک شیء جاوا اسکریپت برمی‌گرداند.
• chrome.runtime.reload(): افزونه را مجدداً بارگذاری می‌کند.

مثال: ارسال پیام از اسکریپت محتوا به اسکریپت پس‌زمینه

اسکریپت محتوا (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

اسکریپت پس‌زمینه (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

۲. chrome.storage

API chrome.storage مکانیزمی برای ذخیره و بازیابی داده‌ها در داخل افزونه فراهم می‌کند. این API هم گزینه‌های ذخیره‌سازی محلی (local) و هم همگام‌سازی شده (synced) را ارائه می‌دهد.

متدهای کلیدی:

• chrome.storage.local.set(): داده‌ها را به صورت محلی ذخیره می‌کند.
• chrome.storage.local.get(): داده‌ها را از حافظه محلی بازیابی می‌کند.
• chrome.storage.sync.set(): داده‌هایی را ذخیره می‌کند که بین دستگاه‌های کاربر همگام‌سازی می‌شوند.
• chrome.storage.sync.get(): داده‌ها را از حافظه همگام‌سازی شده بازیابی می‌کند.

مثال: ذخیره و بازیابی داده‌ها در حافظه محلی

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

۳. chrome.tabs

API chrome.tabs به افزونه‌ها اجازه می‌دهد تا با تب‌های مرورگر تعامل داشته باشند. این API متدهایی برای ایجاد، جستجو، تغییر و بستن تب‌ها فراهم می‌کند.

متدهای کلیدی:

• chrome.tabs.create(): یک تب جدید ایجاد می‌کند.
• chrome.tabs.query(): تب‌هایی را که با معیارهای خاصی مطابقت دارند، جستجو می‌کند.
• chrome.tabs.update(): ویژگی‌های یک تب را به‌روزرسانی می‌کند.
• chrome.tabs.remove(): یک تب را می‌بندد.
• chrome.tabs.executeScript(): کد جاوا اسکریپت را در یک تب اجرا می‌کند.

مثال: ایجاد یک تب جدید

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

۴. chrome.alarms

API chrome.alarms به افزونه‌ها اجازه می‌دهد تا وظایفی را برای اجرا در یک زمان خاص یا پس از یک بازه زمانی مشخص، زمان‌بندی کنند. این موضوع در مانیفست V3 اهمیت ویژه‌ای دارد، زیرا جایگزین استفاده از تایمرها در صفحات پس‌زمینه می‌شود که دیگر پشتیبانی نمی‌شوند.

متدهای کلیدی:

• chrome.alarms.create(): یک آلارم جدید ایجاد می‌کند.
• chrome.alarms.get(): یک آلارم موجود را بازیابی می‌کند.
• chrome.alarms.clear(): یک آلارم را پاک می‌کند.
• chrome.alarms.getAll(): تمام آلارم‌ها را بازیابی می‌کند.
• chrome.alarms.onAlarm.addListener(): به رویدادهای آلارم گوش می‌دهد.

مثال: ایجاد یک آلارم

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

۵. chrome.scripting

API chrome.scripting به افزونه‌ها اجازه می‌دهد تا جاوا اسکریپت و CSS را به صفحات وب تزریق کنند. این API یکی از اجزای کلیدی مانیفست V3 است و توسط سرویس ورکرها برای تعامل با صفحات وب پس از بارگذاری آن‌ها استفاده می‌شود.

متدهای کلیدی:

• chrome.scripting.executeScript(): کد جاوا اسکریپت را در یک تب یا فریم اجرا می‌کند.
• chrome.scripting.insertCSS(): CSS را به یک تب یا فریم تزریق می‌کند.

مثال: تزریق جاوا اسکریپت به یک تب

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

۶. chrome.notifications

API chrome.notifications به افزونه‌ها اجازه می‌دهد تا اعلان‌هایی را به کاربر نمایش دهند. این قابلیت برای ارائه به‌روزرسانی‌ها، هشدارها و سایر اطلاعات مهم مفید است.

متدهای کلیدی:

• chrome.notifications.create(): یک اعلان جدید ایجاد می‌کند.
• chrome.notifications.update(): یک اعلان موجود را به‌روزرسانی می‌کند.
• chrome.notifications.clear(): یک اعلان را پاک می‌کند.
• chrome.notifications.getAll(): تمام اعلان‌ها را بازیابی می‌کند.

مثال: ایجاد یک اعلان

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

۷. chrome.contextMenus

API chrome.contextMenus به افزونه‌ها اجازه می‌دهد تا آیتم‌هایی را به منوی زمینه مرورگر (منوی راست‌کلیک) اضافه کنند. این کار راهی راحت برای کاربران فراهم می‌کند تا مستقیماً از صفحات وب به قابلیت‌های افزونه دسترسی پیدا کنند.

متدهای کلیدی:

• chrome.contextMenus.create(): یک آیتم منوی زمینه جدید ایجاد می‌کند.
• chrome.contextMenus.update(): یک آیتم منوی زمینه موجود را به‌روزرسانی می‌کند.
• chrome.contextMenus.remove(): یک آیتم منوی زمینه را حذف می‌کند.
• chrome.contextMenus.removeAll(): تمام آیتم‌های منوی زمینه ایجاد شده توسط افزونه را حذف می‌کند.

مثال: ایجاد یک آیتم منوی زمینه

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

۸. chrome.i18n

API chrome.i18n برای بین‌المللی‌سازی افزونه شما استفاده می‌شود، و آن را برای کاربران در زبان‌ها و مناطق مختلف قابل دسترس می‌کند. این API شما را قادر می‌سازد تا نسخه‌های محلی‌سازی شده از رابط کاربری و پیام‌های افزونه خود را ارائه دهید.

متدهای کلیدی:

• chrome.i18n.getMessage(): یک رشته محلی‌سازی شده را از دایرکتوری _locales افزونه بازیابی می‌کند.

مثال: استفاده از chrome.i18n برای محلی‌سازی

ابتدا، یک دایرکتوری _locales در پوشه ریشه افزونه خود ایجاد کنید. در داخل آن، پوشه‌های مخصوص زبان مانند en، es، fr و غیره ایجاد کنید.

در هر پوشه زبان، یک فایل messages.json ایجاد کنید. برای مثال، در _locales/en/messages.json:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

سپس، در کد جاوا اسکریپت خود:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

سازگاری بین مرورگرها

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

برای اطمینان از سازگاری بین مرورگرها:

• از API WebExtensions استفاده کنید: API WebExtensions یک API استاندارد برای توسعه افزونه مرورگر است که توسط چندین مرورگر پشتیبانی می‌شود.
• در مرورگرهای مختلف تست کنید: افزونه خود را در مرورگرهای مختلف تست کنید تا مشکلات سازگاری را شناسایی و برطرف کنید.
• از polyfillها استفاده کنید: از polyfillها برای ارائه قابلیت‌های API گمشده در مرورگرهای مختلف استفاده کنید.
• کد شرطی: از کد شرطی برای انطباق با تفاوت‌های خاص مرورگرها استفاده کنید. برای مثال: if (typeof browser === "undefined") { var browser = chrome; }

بهترین شیوه‌ها برای توسعه افزونه مرورگر

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

• مجوزها را به حداقل برسانید: فقط مجوزهایی را درخواست کنید که افزونه شما واقعاً به آنها نیاز دارد. این کار حریم خصوصی و امنیت کاربر را افزایش می‌دهد.
• از شیوه‌های کدنویسی امن استفاده کنید: شیوه‌های کدنویسی امن را برای جلوگیری از آسیب‌پذیری‌هایی مانند اسکریپت بین سایتی (XSS) و تزریق کد دنبال کنید.
• عملکرد را بهینه کنید: عملکرد افزونه خود را بهینه کنید تا تأثیر آن بر عملکرد مرورگر به حداقل برسد.
• مستندات واضح و مختصر ارائه دهید: مستندات واضح و مختصر ارائه دهید تا به کاربران کمک کند نحوه استفاده از افزونه شما را بفهمند.
• خطاها را به خوبی مدیریت کنید: مدیریت خطا را پیاده‌سازی کنید تا از کرش کردن یا ایجاد رفتار غیرمنتظره توسط افزونه خود جلوگیری کنید.
• افزونه خود را به‌روز نگه دارید: به طور منظم افزونه خود را برای رفع باگ‌ها، آسیب‌پذیری‌های امنیتی و مشکلات سازگاری به‌روز کنید.
• بین‌المللی‌سازی (i18n) را در نظر بگیرید: افزونه خود را طوری طراحی کنید که به راحتی به زبان‌های مختلف محلی‌سازی شود. از API chrome.i18n استفاده کنید.
• به حریم خصوصی کاربر احترام بگذارید: در مورد نحوه جمع‌آوری و استفاده از داده‌های کاربر توسط افزونه خود شفاف باشید و در صورت لزوم رضایت کاربر را کسب کنید. با مقررات حریم خصوصی مربوطه مانند GDPR و CCPA مطابقت داشته باشید.

ارسال افزونه به فروشگاه‌ها

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

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

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

نتیجه‌گیری

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

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

این راهنما یک پایه محکم برای شروع توسعه افزونه مرورگر فراهم می‌کند. همانطور که عمیق‌تر می‌شوید، APIها و ویژگی‌های مختلف موجود را کاوش کنید و با تکنیک‌های مختلف برای ایجاد افزونه‌های نوآورانه و تأثیرگذار آزمایش کنید.