شرح
از میانای برنامهسازی کاربردی chrome.action برای کنترل نماد افزونه در نوارابزار Google Chrome استفاده کنید.
دردسترس بودن
مانیفست
برای استفاده از میانای برنامهسازی کاربردی browser.action، "manifest_version" 3 را مشخص کنید و
کلید "action" را در فایل مانیفست خود اضافه کنید.
{
"name": "Action Extension",
...
"action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
},
"default_title": "Click Me", // optional, shown in tooltip
"default_popup": "popup.html" // optional
},
...
}
کلید "action" (بههمراه فرزندانش) اختیاری است. وقتی افزونه در این فهرست نباشد، همچنان در نوارابزار نشان داده میشود تا دسترسی به منو افزونه فراهم شود. به همین دلیل، توصیه میکنیم همیشه حداقل کلیدهای "action" و "default_icon" را اضافه کنید.
مفاهیم و کاربرد
بخشهایی از میانای کاربر
نماد
نماد تصویر اصلی در نوارابزار افزونه شما است و با کلید "default_icon" در کلید "action" مانیفست شما تنظیم میشود. نمادها باید ۱۶ پیکسل مستقل از دستگاه (DIP) عرض و ارتفاع داشته باشند.
کلید "default_icon" واژهنامهای از اندازهها برای مسیرهای تصویر است. Chrome از این نمادها استفاده میکند
تا انتخاب کند از کدام مقیاس تصویر استفاده کند. اگر تطابق دقیقی پیدا نشود، Chrome نزدیکترین مورد دردسترس را انتخاب میکند و آن را برای تناسب با تصویر مقیاسبندی میکند، که ممکن است بر کیفیت تصویر تأثیر بگذارد.
ازآنجاییکه دستگاههایی با ضریب مقیاس کمتر رایج مانند ۱٫۵ برابر یا ۱٫۲ برابر درحال رایجتر شدن هستند،
توصیه میکنیم چندین اندازه برای نمادهایتان ارائه دهید. این کار همچنین
افزونه شما را دربرابر تغییرات احتمالی اندازه نمایش نماد در آینده مقاوم میکند. اما اگر فقط یک اندازه ارائه شود، کلید "default_icon" را میتوان بهجای واژهنامه روی رشتهای با مسیر یک نماد تنظیم کرد.
You can also call action.setIcon() to set your extension's icon programmatically
by specifying a different image path or providing a dynamically-generated icon using the HTML canvas
element, or, if setting from an extension service worker, the offscreen
canvas API.
const canvas = new OffscreenCanvas(16, 16);
const context = canvas.getContext('2d');
context.clearRect(0, 0, 16, 16);
context.fillStyle = '#00FF00'; // Green
context.fillRect(0, 0, 16, 16);
const imageData = context.getImageData(0, 0, 16, 16);
browser.action.setIcon({imageData: imageData}, () => { /* ... */ });
برای افزونههای بستهبندیشده (نصبشده از فایل crx.)، تصاویر میتوانند در اکثر قالبهایی باشند که موتور پردازش Blink میتواند نمایش دهد، ازجمله PNG، JPEG، BMP، ICO، و غیره. SVG پشتیبانی نمیشود. افزونههای از حالت فشرده خارجشده باید از تصاویر PNG استفاده کنند.
نکتهابزار (عنوان)
وقتی کاربر اشارهگر موشواره را روی نماد افزونه در نوارابزار نگه میدارد، نکتهابزار یا عنوان ظاهر میشود. همچنین در نوشتار دسترسپذیری که صفحهخوانها هنگام تمرکز روی دکمه میخوانند گنجانده شده است.
نکتهابزار پیشفرض بااستفاده از فیلد "default_title" کلید "action" در manifest.json تنظیم میشود.
همچنین میتوانید آن را بهصورت برنامهنویسی با فراخوانی action.setTitle() تنظیم کنید.
نشان
کنشها میتوانند بهصورت اختیاری یک «نشان» را نمایش دهند — یک متن کوتاه که روی نماد قرار میگیرد. این کار به شما امکان میدهد کنش را بهروز کنید تا مقدار کمی اطلاعات درباره وضعیت افزونه، مثل شمارنده، نمایش داده شود. نشان دارای یک مؤلفه نوشتاری و یک رنگ پسزمینه است. چون فضا محدود است، توصیه میکنیم نوشتار نشان از چهار نویسه یا کمتر استفاده کند.
برای ایجاد نشان، آن را بهصورت برنامهریزیشده با فراخوانی action.setBadgeBackgroundColor() و
action.setBadgeText() تنظیم کنید. تنظیم نشان پیشفرضی در مانیفست وجود ندارد. مقادیر رنگ نشان
میتواند آرایهای از چهار عدد صحیح بین ۰ و ۲۵۵ باشد که رنگ RGBA
نشان را تشکیل میدهد یا رشتهای با مقدار رنگ CSS باشد.
browser.action.setBadgeBackgroundColor(
{color: [0, 255, 0, 0]}, // Green
() => { /* ... */ },
);
browser.action.setBadgeBackgroundColor(
{color: '#00FF00'}, // Also green
() => { /* ... */ },
);
browser.action.setBadgeBackgroundColor(
{color: 'green'}, // Also, also green
() => { /* ... */ },
);
بازشو
وقتی کاربر روی دکمه کنش افزونه در نوارابزار کلیک میکند، بالاپر کنش نشان داده میشود. پنجره بالاپر میتواند حاوی هر محتوای HTML که دوست دارید باشد و بهطور خودکار برای تناسب با محتوایش تغییر اندازه میدهد. اندازه بالاپر باید بین ۲۵×۲۵ و ۸۰۰×۶۰۰ پیکسل باشد.
بالاپر در ابتدا توسط ویژگی "default_popup" در کلید "action" در فایل manifest.json تنظیم میشود. درصورت وجود، این ویژگی باید به مسیر نسبی در دایرکتوری افزونه اشاره کند. همچنین میتوان آن را بهصورت پویا بهروزرسانی کرد تا بااستفاده از روش action.setPopup() به مسیر نسبی دیگری اشاره کند.
موارد استفاده
وضعیت هر برگه
کنشهای افزونه میتواند برای هر برگه حالتهای متفاوتی داشته باشد. برای تنظیم مقدار برای یک برگه
جداگانه، از ویژگی tabId در روشهای تنظیم action API استفاده کنید. برای مثال، برای
تنظیم نوشتار نشان برای برگهای خاص، کاری شبیه به این انجام دهید:
function getTabId() { /* ... */}
function getTabBadge() { /* ... */}
browser.action.setBadgeText(
{
text: getTabBadge(tabId),
tabId: getTabId(),
},
() => { ... }
);
اگر خصوصیت tabId حذف شود، تنظیم بهعنوان تنظیم جهانی درنظر گرفته میشود. تنظیمات مختص برگه بر تنظیمات کلی اولویت دارد.
حالت فعالشده
بهطور پیشفرض، کنشهای نوارابزار در هر برگه فعال (قابلکلیک) هستند. میتوانید این پیشفرض را با تنظیم ویژگی default_state در کلید action مانیفست تغییر دهید. اگر
default_state روی "disabled" تنظیم شده باشد، کنش بهطور پیشفرض غیرفعال است و باید بهصورت برنامهنویسیشده فعال شود تا قابلکلیک باشد. اگر default_state روی "enabled" (پیشفرض) تنظیم شده باشد،
کنش بهطور پیشفرض فعال و قابلکلیک است.
میتوانید وضعیت را بهصورت برنامهنویسی بااستفاده از روشهای action.enable() و action.disable() کنترل کنید. این فقط بر ارسال شدن یا نشدن بالاپر (درصورت وجود) یا رویداد action.onClicked به افزونه شما تأثیر میگذارد؛
بر حضور کنش در نوارابزار تأثیری ندارد.
مثالها
نمونههای زیر برخیاز روشهای رایج استفاده از کنشها در افزونهها را نشان میدهد. برای امتحان کردن این میانای برنامهسازی کاربردی، نمونه میانای برنامهسازی کاربردی Action را از مخزن chrome-extension-samples نصب کنید.
نمایش بالاپر
معمولاً وقتی کاربر روی کنش افزونه کلیک میکند، افزونه بالاپر نشان میدهد. برای پیادهسازی این مورد در افزونه خودتان، بالاپر را در manifest.json خود اعلام کنید و محتوایی را که Chrome باید در بالاپر نمایش دهد مشخص کنید.
// manifest.json
{
"name": "Action popup demo",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_title": "Click to view a popup",
"default_popup": "popup.html"
}
}
<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
<style>
html {
min-height: 5em;
min-width: 10em;
background: salmon;
}
</style>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
تزریق متن محتوا با کلیک کردن
الگوی رایج برای افزونهها این است که ویژگی اصلی خود را بااستفاده از کنش افزونه نشان دهند. مثال زیر این الگو را نشان میدهد. وقتی کاربر روی کنش کلیک میکند، افزونه اسکریپت محتوا را به صفحه فعلی تزریق میکند. سپس متن محتوا هشداری را برای تأیید اینکه همه چیز طبق انتظار کار کرده است نمایش میدهد.
// manifest.json
{
"name": "Action script injection demo",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_title": "Click to show an alert"
},
"permissions": ["activeTab", "scripting"],
"background": {
"service_worker": "background.js"
}
}
// background.js
browser.action.onClicked.addListener((tab) => {
browser.scripting.executeScript({
target: {tabId: tab.id},
files: ['content.js']
});
});
// content.js
alert('Hello, world!');
شبیهسازی کنشها با declarativeContent
این مثال نشان میدهد که چگونه منطق پسزمینه یک افزونه میتواند (الف) یک کنش را بهطور پیشفرض غیرفعال کند و (ب) از declarativeContent برای فعال کردن کنش در سایتهای خاص استفاده کند.
// service-worker.js
// Wrap in an onInstalled callback to avoid unnecessary work
// every time the service worker is run
browser.runtime.onInstalled.addListener(() => {
// Page actions are disabled by default and enabled on select tabs
browser.action.disable();
// Clear all rules to ensure only our expected rules are set
browser.declarativeContent.onPageChanged.removeRules(undefined, () => {
// Declare a rule to enable the action on example.com pages
let exampleRule = {
conditions: [
new browser.declarativeContent.PageStateMatcher({
pageUrl: {hostSuffix: '.example.com'},
})
],
actions: [new browser.declarativeContent.ShowAction()],
};
// Finally, apply our new array of rules
let rules = [exampleRule];
browser.declarativeContent.onPageChanged.addRules(rules);
});
});
انواع
OpenPopupOptions
مشخصات
-
windowId
شماره اختیاری
شناسه پنجرهای که بالاپر کنش در آن باز میشود. اگر مشخص نشده باشد، بهطور پیشفرض روی پنجره فعال کنونی تنظیم میشود.
TabDetails
مشخصات
-
tabId
شماره اختیاری
شناسه برگهای که وضعیت آن پرسوجو میشود. اگر برگهای مشخص نشده باشد، وضعیت غیرمختص برگه برگردانده میشود.
UserSettings
مجموعه تنظیمات مشخصشده توسط کاربر مربوط به کنش افزونه.
مشخصات
-
isOnToolbar
بولی
آیا نماد کنش افزونه در نوارابزار سطح بالای پنجرههای مرورگر نمایان است (یعنی آیا افزونه توسط کاربر «سنجاق» شده است).
UserSettingsChange
مشخصات
-
isOnToolbar
بولی اختیاری
آیا نماد کنش افزونه در نوارابزار سطح بالای پنجرههای مرورگر نمایان است (یعنی آیا افزونه توسط کاربر «سنجاق» شده است).
روشها
disable()
browser.action.disable(
tabId?: number,
): Promise<void>
کنش را برای زبانه غیرفعال میکند.
پارامترها
-
tabId
شماره اختیاری
شناسه برگهای که میخواهید کنش آن را تغییر دهید.
بازگشتیها
-
Promise<void>
enable()
browser.action.enable(
tabId?: number,
): Promise<void>
کنش را برای برگه فعال میکند. بهطور پیشفرض، کنشها فعال هستند.
پارامترها
-
tabId
شماره اختیاری
شناسه برگهای که میخواهید کنش آن را تغییر دهید.
بازگشتیها
-
Promise<void>
getBadgeBackgroundColor()
browser.action.getBadgeBackgroundColor(
details: TabDetails,
): Promise<extensionTypes.ColorArray>
رنگ پسزمینه کنش را دریافت میکند.
پارامترها
-
جزئیات
بازگشتیها
-
Promise<extensionTypes.ColorArray>
getBadgeText()
browser.action.getBadgeText(
details: TabDetails,
): Promise<string>
نوشتار نشان کنش را دریافت میکند. اگر برگهای مشخص نشده باشد، نوشتار نشان غیرمختص برگه برگردانده میشود. اگر displayActionCountAsBadgeText فعال باشد، نوشتار جایبان برگردانده میشود، مگراینکه اجازه declarativeNetRequestFeedback وجود داشته باشد یا نوشتار نشان مختص برگه ارائه شده باشد.
پارامترها
-
جزئیات
بازگشتیها
-
Promise<string>
getBadgeTextColor()
browser.action.getBadgeTextColor(
details: TabDetails,
): Promise<extensionTypes.ColorArray>
رنگ نوشتار کنش را دریافت میکند.
پارامترها
-
جزئیات
بازگشتیها
-
Promise<extensionTypes.ColorArray>
getPopup()
browser.action.getPopup(
details: TabDetails,
): Promise<string>
سند html را که بهعنوان بالاپر برای این کنش تنظیم شده است دریافت میکند.
پارامترها
-
جزئیات
بازگشتیها
-
Promise<string>
getTitle()
browser.action.getTitle(
details: TabDetails,
): Promise<string>
عنوان کنش را دریافت میکند.
پارامترها
-
جزئیات
بازگشتیها
-
Promise<string>
getUserSettings()
browser.action.getUserSettings(): Promise<UserSettings>
تنظیمات مشخصشده توسط کاربر را که مربوط به کنش افزونه است برمیگرداند.
بازگشتیها
-
Promise<UserSettings>
isEnabled()
browser.action.isEnabled(
tabId?: number,
): Promise<boolean>
نشان میدهد که آیا کنش افزونه برای برگهای فعال است یا نه (یا بهطور کلی اگر هیچ tabId ارائه نشده باشد). کنشهای فعالشده بااستفاده از فقط declarativeContent همیشه مقدار نادرست برمیگردانند.
پارامترها
-
tabId
شماره اختیاری
شناسه برگهای که میخواهید وضعیت فعال بودن آن را بررسی کنید.
بازگشتیها
-
Promise<boolean>
openPopup()
browser.action.openPopup(
options?: OpenPopupOptions,
): Promise<void>
بالاپر افزونه را باز میکند. بین Chrome 118 و Chrome 126، این ویژگی فقط برای افزونههای نصبشده با خطمشی دردسترس است.
پارامترها
-
گزینهها
OpenPopupOptions اختیاری
گزینههای باز کردن بالاپر را مشخص میکند.
بازگشتیها
-
Promise<void>
setBadgeBackgroundColor()
browser.action.setBadgeBackgroundColor(
details: object,
): Promise<void>
رنگ پسزمینه نشان را تنظیم میکند.
پارامترها
-
جزئیات
شیء
-
رنگ
رشته | ColorArray
آرایهای از چهار عدد صحیح در محدوده [۰،۲۵۵] که رنگ RGBA نشان را تشکیل میدهند. برای مثال، قرمز مات
[255, 0, 0, 255]است. همچنین میتواند رشتهای با مقدار CSS باشد، که قرمز مات#FF0000یا#F00است. -
tabId
شماره اختیاری
تغییر را به زمانی محدود میکند که برگه خاصی انتخاب شده باشد. وقتی برگه بسته میشود، بهطور خودکار بازنشانی میشود.
-
بازگشتیها
-
Promise<void>
setBadgeText()
browser.action.setBadgeText(
details: object,
): Promise<void>
نوشتار نشان را برای کنش تنظیم میکند. نشان روی نماد نمایش داده میشود.
پارامترها
-
جزئیات
شیء
-
tabId
شماره اختیاری
تغییر را به زمانی محدود میکند که برگه خاصی انتخاب شده باشد. وقتی برگه بسته میشود، بهطور خودکار بازنشانی میشود.
-
نوشتار
رشته اختیاری
هر تعداد نویسه را میتوان ارسال کرد، اما فقط حدود چهار نویسه در این فضا جا میشود. اگر رشته خالی (
'') ارسال شود، نوشتار نشان پاک میشود. اگرtabIdمشخص شده باشد وtextتهی باشد، نوشتار برگه مشخصشده پاک میشود و بهطور پیشفرض به نوشتار نشان جهانی تبدیل میشود.
-
بازگشتیها
-
Promise<void>
setBadgeTextColor()
browser.action.setBadgeTextColor(
details: object,
): Promise<void>
رنگ نوشتار نشان را تنظیم میکند.
پارامترها
-
جزئیات
شیء
-
رنگ
رشته | ColorArray
آرایهای از چهار عدد صحیح در محدوده [۰،۲۵۵] که رنگ RGBA نشان را تشکیل میدهند. برای مثال، قرمز مات
[255, 0, 0, 255]است. همچنین میتواند رشتهای با مقدار CSS باشد، که قرمز مات#FF0000یا#F00است. اگر این مقدار را تنظیم نکنید، رنگی بهطور خودکار انتخاب میشود که با رنگ پسزمینه نشان تضاد داشته باشد تا نوشتار قابلمشاهده باشد. رنگهایی که مقدار آلفای آنها معادل ۰ است تنظیم نخواهند شد و خطا برمیگردانند. -
tabId
شماره اختیاری
تغییر را به زمانی محدود میکند که برگه خاصی انتخاب شده باشد. وقتی برگه بسته میشود، بهطور خودکار بازنشانی میشود.
-
بازگشتیها
-
Promise<void>
setIcon()
browser.action.setIcon(
details: object,
): Promise<void>
نماد کنش را تنظیم میکند. نماد را میتوان بهعنوان مسیر فایل تصویر یا بهعنوان دادههای پیکسل از عنصر بوم، یا بهعنوان فرهنگ لغت هرکدام از آنها مشخص کرد. باید ویژگی path یا imageData مشخص شود.
پارامترها
-
جزئیات
شیء
-
imageData
ImageData | شیء اختیاری
یا شیء ImageData یا واژهنامه {size -> ImageData} که نماد را برای تنظیم نشان میدهد. اگر نماد بهعنوان واژهنامه مشخص شده باشد، تصویر واقعی که باید استفاده شود براساس تراکم پیکسلی صفحهنمایش انتخاب میشود. اگر تعداد پیکسلهای تصویر که در یک واحد فضای صفحه قرار میگیرد برابر با
scaleباشد، تصویری با اندازهscale* n انتخاب میشود که n اندازه نماد در واسط کاربر است. حداقل یک تصویر باید مشخص شود. توجه داشته باشید که «details.imageData = foo» معادل «details.imageData = {'16': foo}» است -
مسیر
رشته | شیء اختیاری
مسیر تصویر نسبی یا واژهنامه {size -> relative image path} که به نماد موردنظر برای تنظیم اشاره میکند. اگر نماد بهعنوان واژهنامه مشخص شده باشد، تصویر واقعی که باید استفاده شود براساس تراکم پیکسلی صفحهنمایش انتخاب میشود. اگر تعداد پیکسلهای تصویر که در یک واحد فضای صفحه قرار میگیرد برابر با
scaleباشد، تصویری با اندازهscale* n انتخاب میشود که n اندازه نماد در واسط کاربر است. حداقل یک تصویر باید مشخص شود. توجه داشته باشید که «details.path = foo» معادل «details.path = {'16': foo}» است -
tabId
شماره اختیاری
تغییر را به زمانی محدود میکند که برگه خاصی انتخاب شده باشد. وقتی برگه بسته میشود، بهطور خودکار بازنشانی میشود.
-
بازگشتیها
-
Promise<void>
Chrome نسخه ۹۶ و بالاتر browser.* از Chrome نسخه ۱۴۸
setPopup()
browser.action.setPopup(
details: object,
): Promise<void>
سند HTML را تنظیم میکند تا وقتی کاربر روی نماد کنش کلیک میکند، بهعنوان بالاپر باز شود.
پارامترها
-
جزئیات
شیء
-
بالاپر
رشته
مسیر نسبی به فایل HTML برای نمایش در بالاپر. اگر روی رشته خالی (
'') تنظیم شود، هیچ بالاپری نشان داده نمیشود. -
tabId
شماره اختیاری
تغییر را به زمانی محدود میکند که برگه خاصی انتخاب شده باشد. وقتی برگه بسته میشود، بهطور خودکار بازنشانی میشود.
-
بازگشتیها
-
Promise<void>
setTitle()
browser.action.setTitle(
details: object,
): Promise<void>
عنوان کنش را تنظیم میکند. این در نکتهابزار نشان داده میشود.
پارامترها
-
جزئیات
شیء
-
tabId
شماره اختیاری
تغییر را به زمانی محدود میکند که برگه خاصی انتخاب شده باشد. وقتی برگه بسته میشود، بهطور خودکار بازنشانی میشود.
-
عنوان
رشته
رشتهای که کنش باید هنگام نگه داشتن موشواره روی آن نمایش دهد.
-
بازگشتیها
-
Promise<void>
رویدادها
onClicked
browser.action.onClicked.addListener(
callback: function,
)
وقتی روی نماد کنش کلیک شود، فعال میشود. اگر کنش دارای بالاپر باشد، این رویداد اجرا نخواهد شد.
onUserSettingsChanged
browser.action.onUserSettingsChanged.addListener(
callback: function,
)
وقتی تنظیمات مشخصشده توسط کاربر مربوط به کنش افزونه تغییر میکند، فعال میشود.
پارامترها
-
تماس برگشتی
عملکرد
پارامتر
callbackبهصورت زیر است:(change: UserSettingsChange) => void
-
تغییر
-