انتقال به فضای نام مرورگر

از کروم ۱۴۸ به بعد، تمام APIهای افزونه‌های کروم علاوه بر فضای نام موجود chrome ، تحت فضای نام browser نیز در دسترس هستند. برای مثال، browser.tabs.create({}) و chrome.tabs.create({}) معادل یکدیگر هستند.

این فضای نام در هر جایی که بتوانید APIهای افزونه را فراخوانی کنید، از جمله اسکریپت‌های محتوا، سرویس ورکرها و اسناد خارج از صفحه، در دسترس است. این فضا به همان اشیاء API chrome اشاره می‌کند، بنابراین chrome.tabs === browser.tabs .

فضای نام browser از گروه انجمن افزونه‌های وب (WECG) ، یک گروه انجمن W3C که در آن فروشندگان مرورگر بر روی استانداردهای افزونه‌های مشترک همکاری می‌کنند، خارج می‌شود. فضای نام chrome از بین نمی‌رود؛ هر دو فضای نام به کار خود ادامه خواهند داد.

تصمیم بگیرید که آیا فضای نام مرورگر را بپذیرید یا خیر

اگر از webextension-polyfill استفاده می‌کنید، قبل از تغییر هر چیز دیگری، به نکته‌ای برای کاربران polyfill بروید - پاسخ برای شما متفاوت است.

اگر در حال ساخت یک افزونه جدید هستید، minimum_chrome_version روی "148" تنظیم کنید و بدون قید و شرط browser استفاده کنید؛ می‌توانید خواندن را اینجا متوقف کنید. بقیه این بخش برای افزونه‌های موجود است که در مورد نحوه سازگاری تصمیم‌گیری می‌کنند.

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

اگر افزونه‌ای دارید، قبل از تغییر، بررسی کنید که کاربران شما از چه نسخه‌هایی از کروم استفاده می‌کنند. کروم به‌روزرسانی‌های خودکار دارد، اما برخی از کاربران به‌روزرسانی‌ها را غیرفعال می‌کنند و برخی دیگر از دستگاه‌های قدیمی‌تری استفاده می‌کنند که نمی‌توانند آخرین نسخه را اجرا کنند. با داده‌های تحلیلی خود تأیید کنید. اگر هنوز تجزیه و تحلیل را تنظیم نکرده‌اید، برای شروع به بخش «نظارت بر عملکرد افزونه خود با Google Analytics 4» مراجعه کنید.

از آنجا، یک مسیر را انتخاب کنید:

بدون قید و شرط فرزندخواندگی کنید

minimum_chrome_version در مانیفست خود تنظیم کنید و بدون قید و شرط browser استفاده کنید - نیازی به محافظ زمان اجرا نیست:

{
  "minimum_chrome_version": "148"
}

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

از محافظ زمان اجرا استفاده کنید

قبل از ارجاع به browser در هر جای دیگر، قطعه کد زیر را در اوایل کد راه‌اندازی افزونه خود اضافه کنید:

if (!globalThis.browser) {
  globalThis.browser = chrome;
  // Consider firing an analytics event here to measure how often
  // your users hit this fallback path.
}

این باعث می‌شود browser در نسخه‌های قبلی به عنوان یک نام مستعار برای chrome در نظر گرفته شود، بنابراین بقیه کد شما می‌تواند بدون قید و شرط browser استفاده کند.

نکته‌ای برای کاربران پلی‌فیل

اگر افزونه شما از webextension-polyfill استفاده می‌کند، در کروم ۱۴۸ و بعد از آن دیگر قابل استفاده نیست. وقتی browser از قبل تعریف شده باشد، polyfill از wrapping صرف نظر می‌کند، با این فرض که مرورگر میزبان قبلاً API را ارائه داده است.

تلاش قبلی برای ارائه فضای نام در کروم ۱۳۶ به این دلیل لغو شد: با تعریف جدید browser ، پوشش‌دهی پلی‌فیل متوقف شد، اما browser.runtime.onMessage کروم هنوز از شنونده‌های promise-returning که پلی‌فیل ارائه می‌داد، پشتیبانی نمی‌کرد. افزونه‌هایی که به این الگو متکی بودند، شکست خوردند. کروم ۱۴۸ فضای نام و شنونده‌های onMessage که promise-returning بومی را ارائه می‌دهند، با هم ارائه می‌دهد تا از این شکاف جلوگیری شود.

شما می‌توانید وابستگی polyfill را پس از اینکه پایگاه کاربری شما به کروم ۱۴۸ منتقل شد، حذف کنید.

سایر ویژگی‌ها

پاسخ‌های ناهمگام در runtime.sendMessage

در کروم ۱۴۸، شنونده‌های runtime.onMessage می‌توانند مستقیماً یک Promise برای ارسال یک پاسخ ناهمگام برگردانند. این روش چه با استفاده از chrome.* و چه با استفاده browser.* فراخوانی شود، کار می‌کند.

پیش از این، تنها راه برای پاسخگویی ناهمگام، برگرداندن یک مقدار حقیقی true از شنونده و فراخوانی sendResponse در ادامه بود:

// Old pattern - requires returning true to keep the channel open
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  fetch('https://example.com')
    .then(response => sendResponse({ statusCode: response.status }));

  return true; // keeps the message channel open for the async response
});

اکنون می‌توانید مستقیماً یک Promise برگردانید (یا از یک تابع async استفاده کنید):

// New pattern - return a promise or use async/await
browser.runtime.onMessage.addListener(async (message, sender) => {
  const response = await fetch('https://example.com');
  return { statusCode: response.status };
});

الگوی return true همچنان به کار خود ادامه می‌دهد، بنابراین کد موجود نیازی به تغییر ندارد.