نمای کلی معماری

برنامه‌های افزودنی بسته‌های فشرده‌شده‌ای از HTML، CSS، جاوا اسکریپت، تصاویر و سایر فایل‌های مورد استفاده در پلتفرم وب هستند که تجربه مرور Google Chrome را سفارشی می‌کنند. برنامه‌های افزودنی با استفاده از فناوری وب ساخته می‌شوند و می‌توانند از همان APIهایی استفاده کنند که مرورگر برای وب باز ارائه می‌کند.

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

افزونه ها را دروازه ای برای تبدیل مرورگر کروم به شخصی سازی شده ترین مرورگر در نظر بگیرید.

فایل های پسوند

پسوندها در انواع فایل ها و تعداد دایرکتوری ها متفاوت هستند، اما همه آنها باید دارای یک [مانیفست][docs-manifest] باشند. برخی از برنامه‌های افزودنی اولیه، اما مفید، ممکن است فقط از مانیفست و نماد نوار ابزار آن تشکیل شده باشند.

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

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

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

این افزونه Google Mail Checker از یک عملکرد مرورگر استفاده می کند:

تصویری از افزونه Google Mail Checker

این افزونه Mappy از یک اسکریپت اکشن صفحه و محتوا استفاده می کند:

تصویری از افزونه Mappy

اشاره به فایل ها

فایل های یک برنامه افزودنی را می توان با استفاده از یک URL نسبی، درست مانند فایل های موجود در یک صفحه HTML معمولی، ارجاع داد.

<img src="images/my_image.png">

علاوه بر این، به هر فایل نیز می توان با استفاده از یک URL مطلق دسترسی داشت.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

در URL مطلق، EXTENSION_ID یک شناسه منحصر به فرد است که سیستم برنامه افزودنی برای هر برنامه افزودنی ایجاد می کند. شناسه‌های همه برنامه‌های افزودنی بارگیری شده را می‌توانید با رفتن به URL chrome://extensions مشاهده کنید. PATH_TO_FILE محل فایل زیر پوشه بالای برنامه افزودنی است. با URL نسبی مطابقت دارد.

در حین کار بر روی یک برنامه افزودنی بدون بسته بندی، شناسه برنامه افزودنی می تواند تغییر کند. به طور خاص، اگر برنامه افزودنی از دایرکتوری دیگری بارگیری شود، شناسه یک برنامه افزودنی بسته بندی نشده تغییر خواهد کرد. با بسته بندی برنامه افزودنی، شناسه دوباره تغییر خواهد کرد. اگر کد یک برنامه افزودنی به یک URL مطلق متکی باشد، می‌تواند از روش chrome.runtime.getURL() برای جلوگیری از کدگذاری سخت شناسه در طول توسعه استفاده کند.

معماری

معماری یک برنامه افزودنی به عملکرد آن بستگی دارد، اما بسیاری از افزونه های قوی شامل چندین مؤلفه هستند:

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

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

عناصر رابط کاربری

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

صفحات رابط برنامه افزودنی، مانند پنجره بازشو ، می توانند حاوی صفحات HTML معمولی با منطق جاوا اسکریپت باشند. برنامه‌های افزودنی همچنین می‌توانند Tabs.create یا window.open() را فراخوانی کنند تا فایل‌های HTML اضافی موجود در پسوند را نمایش دهند.

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

یک پنجره مرورگر حاوی یک عملکرد صفحه که یک پنجره بازشو نمایش می دهد

اسکریپت های محتوا

برنامه های افزودنی که در صفحات وب می خوانند یا می نویسند از یک اسکریپت محتوا استفاده می کنند. اسکریپت محتوا حاوی جاوا اسکریپت است که در زمینه های صفحه ای که در مرورگر بارگذاری شده است اجرا می شود. اسکریپت های محتوا DOM صفحات وب را که مرورگر بازدید می کند خوانده و تغییر می دهند.

یک پنجره مرورگر با یک عملکرد صفحه و یک اسکریپت محتوا

اسکریپت‌های محتوا می‌توانند با تبادل پیام‌ها و ذخیره مقادیر با استفاده از API ذخیره‌سازی با پسوند والد خود ارتباط برقرار کنند.

یک مسیر ارتباطی بین اسکریپت محتوا و پسوند والد را نشان می دهد

صفحه گزینه ها

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

استفاده از کروم API

افزونه‌ها علاوه بر دسترسی به APIهای مشابه صفحات وب، می‌توانند از APIهای ویژه برنامه‌های افزودنی نیز استفاده کنند که یکپارچگی شدید با مرورگر ایجاد می‌کنند. برنامه‌های افزودنی و صفحات وب هر دو می‌توانند به روش استاندارد window.open() برای باز کردن URL دسترسی داشته باشند، اما برنامه‌های افزودنی می‌توانند با استفاده از روش Chrome API Tabs.create تعیین کنند که آن URL در کدام پنجره نمایش داده شود.

روش های ناهمزمان در مقابل روش های همزمان

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

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

اگر روش tabs.query همگام بود، ممکن است چیزی شبیه به زیر باشد.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

این رویکرد شکست خواهد خورد زیرا query() ناهمزمان است. بدون انتظار برای تکمیل کار برمی‌گردد و مقداری را بر نمی‌گرداند. یک روش زمانی ناهمزمان است که پارامتر برگشت تماس در امضای آن موجود باشد.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

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

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

در کد بالا، خطوط به ترتیب زیر اجرا می شوند: 1، 4، 2. تابع callback مشخص شده برای query() فراخوانی می شود و سپس خط 2 را اجرا می کند، اما تنها پس از در دسترس بودن اطلاعات در مورد برگه انتخاب شده فعلی. این مدتی پس از بازگشت query() اتفاق می افتد. اگرچه update() ناهمزمان است، اما کد از پارامتر برگشت به تماس استفاده نمی کند، زیرا برنامه افزودنی با نتایج به روز رسانی کاری انجام نمی دهد.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

این روش به طور همزمان URL را به عنوان یک string برمی گرداند و هیچ کار ناهمزمان دیگری را انجام نمی دهد.

جزئیات بیشتر

برای اطلاعات بیشتر، اسناد مرجع Chrome API را کاوش کنید و ویدیوی زیر را تماشا کنید.

ارتباط بین صفحات

اجزای مختلف در یک افزونه اغلب نیاز به ارتباط با یکدیگر دارند. صفحات مختلف HTML می توانند با استفاده از روش های chrome.extension ، مانند getViews() و getBackgroundPage() یکدیگر را پیدا کنند. هنگامی که یک صفحه به صفحات افزونه دیگر ارجاع دارد، اولین صفحه می تواند توابع را در صفحات دیگر فراخوانی کند و DOM های آنها را دستکاری کند. علاوه بر این، همه اجزای برنامه افزودنی می‌توانند به مقادیر ذخیره‌شده با استفاده از API ذخیره‌سازی دسترسی داشته باشند و از طریق ارسال پیام با یکدیگر ارتباط برقرار کنند.

ذخیره داده و حالت ناشناس

برنامه‌های افزودنی می‌توانند داده‌ها را با استفاده از API ذخیره‌سازی ، API ذخیره‌سازی وب HTML5، یا با درخواست‌های سرور که منجر به ذخیره داده‌ها می‌شوند، ذخیره کنند. هنگامی که برنامه افزودنی نیاز به ذخیره چیزی دارد، ابتدا در نظر بگیرید که آیا از یک پنجره ناشناس است یا خیر. به طور پیش‌فرض، برنامه‌های افزودنی در پنجره‌های ناشناس اجرا نمی‌شوند.

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

برای تشخیص اینکه آیا یک پنجره در حالت ناشناس است، ویژگی incognito مربوطه را بررسی کنید . Tab یا شی windows.Window .

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

قدم بعدی را بردارید

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