الوصف
استخدِم واجهة برمجة التطبيقات 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" في ملف البيان. يجب أن يكون عرض الرموز وطولها 16 بكسل مستقل عن الجهاز (DIP).
المفتاح "default_icon" هو قاموس للأحجام ومسارات الصور. يستخدم Chrome هذه الرموز
لاختيار مقياس الصورة المطلوب استخدامه. في حال عدم العثور على تطابق تام، يختار Chrome أقرب حجم متاح ويغيّره ليتناسب مع الصورة، ما قد يؤثر في جودة الصورة.
بما أنّ الأجهزة التي تستخدم عوامل قياس أقل شيوعًا، مثل 1.5x أو 1.2x، أصبحت أكثر شيوعًا، ننصحك بتوفير أحجام متعددة لرموزك. يضمن ذلك أيضًا
توافق الإضافة مع التغييرات المحتملة في حجم عرض الرمز. ومع ذلك،
إذا تم توفير حجم واحد فقط، يمكن أيضًا ضبط مفتاح "default_icon" على
سلسلة تتضمّن المسار إلى رمز واحد بدلاً من قاموس.
يمكنك أيضًا استدعاء action.setIcon() لضبط رمز الإضافة آليًا
من خلال تحديد مسار صورة مختلف أو تقديم رمز تم إنشاؤه ديناميكيًا باستخدام عنصر لوحة HTML، أو في حال الضبط من مشغّل خدمة الإضافة، يمكنك استخدام واجهة برمجة التطبيقات offscreen
canvas.
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(). لا يتوفّر إعداد تلقائي للشارة في البيان. يمكن أن تكون قيم ألوان الشارات إما مصفوفة من أربعة أعداد صحيحة تتراوح بين 0 و255 تشكّل لون 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 تريده، وسيتم تغيير حجمها تلقائيًا لتناسب محتواها. يجب أن يتراوح حجم النافذة المنبثقة بين 25×25 و800×600 بكسل.
يتم ضبط النافذة المنبثقة في البداية من خلال السمة "default_popup" في المفتاح "action" في ملف manifest.json. في حال توفّر هذه السمة، يجب أن تشير إلى مسار نسبي ضمن دليل الإضافة. ويمكن أيضًا تعديله ديناميكيًا للإشارة إلى مسار نسبي مختلف باستخدام طريقة action.setPopup().
حالات الاستخدام
حالة كل علامة تبويب
يمكن أن تتضمّن إجراءات الإضافة حالات مختلفة لكل علامة تبويب. لضبط قيمة لعلامة تبويب فردية، استخدِم السمة tabId في طرق الإعداد الخاصة بواجهة برمجة التطبيقات action. على سبيل المثال، لضبط نص الشارة لعلامة تبويب معيّنة، يمكنك تنفيذ إجراء مثل ما يلي:
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 API من مستودع 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
number اختيارية
رقم تعريف النافذة التي سيتم فتح النافذة المنبثقة للإجراء فيها يتم ضبط القيمة تلقائيًا على النافذة النشطة حاليًا في حال عدم تحديد أي قيمة.
TabDetails
الخصائص
-
tabId
number اختيارية
رقم تعريف علامة التبويب المطلوب الاستعلام عن حالتها إذا لم يتم تحديد علامة تبويب، يتم عرض الحالة غير المحدّدة لعلامة التبويب.
UserSettings
مجموعة الإعدادات التي يحدّدها المستخدم والمتعلّقة بإجراء الإضافة
الخصائص
-
isOnToolbar
قيمة منطقية
تحدّد ما إذا كان رمز إجراء الإضافة مرئيًا على شريط الأدوات ذي المستوى الأعلى في نوافذ المتصفّح (أي ما إذا كان المستخدم قد "ثبّت" الإضافة).
UserSettingsChange
الخصائص
-
isOnToolbar
قيمة منطقية اختيارية
تحدّد ما إذا كان رمز إجراء الإضافة مرئيًا على شريط الأدوات ذي المستوى الأعلى في نوافذ المتصفّح (أي ما إذا كان المستخدم قد "ثبّت" الإضافة).
الطُرق
disable()
browser.action.disable(
tabId?: number,
): Promise<void>
لإيقاف الإجراء لعلامة تبويب
المعلمات
-
tabId
number اختيارية
رقم تعريف علامة التبويب التي تريد تعديل الإجراء الخاص بها
المرتجعات
-
وعد<فراغ>
enable()
browser.action.enable(
tabId?: number,
): Promise<void>
لتفعيل الإجراء لعلامة تبويب معيّنة تكون الإجراءات مفعَّلة تلقائيًا.
المعلمات
-
tabId
number اختيارية
رقم تعريف علامة التبويب التي تريد تعديل الإجراء الخاص بها
المرتجعات
-
وعد<فراغ>
getBadgeBackgroundColor()
browser.action.getBadgeBackgroundColor(
details: TabDetails,
): Promise<extensionTypes.ColorArray>
تحصل على لون خلفية الإجراء.
المعلمات
-
التفاصيل
المرتجعات
-
Promise<extensionTypes.ColorArray>
getBadgeText()
browser.action.getBadgeText(
details: TabDetails,
): Promise<string>
تحصل على نص شارة الإجراء. إذا لم يتم تحديد علامة تبويب، يتم عرض نص الشارة غير المحدّد لعلامة التبويب. في حال تفعيل displayActionCountAsBadgeText، سيتم عرض نص مؤقت ما لم يتوفّر إذن declarativeNetRequestFeedback أو يتم تقديم نص شارة خاص بعلامة التبويب.
المعلمات
-
التفاصيل
المرتجعات
-
وعد<سلسلة>
getBadgeTextColor()
browser.action.getBadgeTextColor(
details: TabDetails,
): Promise<extensionTypes.ColorArray>
للحصول على لون نص الإجراء
المعلمات
-
التفاصيل
المرتجعات
-
Promise<extensionTypes.ColorArray>
getPopup()
browser.action.getPopup(
details: TabDetails,
): Promise<string>
تعرض هذه الطريقة مستند HTML الذي تم ضبطه كنافذة منبثقة لهذا الإجراء.
المعلمات
-
التفاصيل
المرتجعات
-
وعد<سلسلة>
المعلمات
-
التفاصيل
المرتجعات
-
وعد<سلسلة>
getUserSettings()
browser.action.getUserSettings(): Promise<UserSettings>
تعرض هذه الطريقة الإعدادات التي حدّدها المستخدم والمتعلّقة بإجراء الإضافة.
المرتجعات
-
Promise<UserSettings>
isEnabled()
browser.action.isEnabled(
tabId?: number,
): Promise<boolean>
يشير هذا الإعداد إلى ما إذا كان إجراء الإضافة مفعَّلاً لعلامة تبويب (أو على مستوى العالم في حال عدم توفّر tabId). إنّ الإجراءات المفعَّلة باستخدام declarativeContent فقط تعرض دائمًا القيمة "خطأ".
المعلمات
-
tabId
number اختيارية
رقم تعريف علامة التبويب التي تريد التحقّق من حالة تفعيلها
المرتجعات
-
Promise<boolean>
openPopup()
browser.action.openPopup(
options?: OpenPopupOptions,
): Promise<void>
يفتح النافذة المنبثقة للإضافة. بين الإصدارَين 118 و126 من Chrome، لا تتوفّر هذه الميزة إلا للإضافات المثبَّتة من خلال السياسة.
المعلمات
-
الخيارات
OpenPopupOptions اختياري
تحدّد خيارات فتح النافذة المنبثقة.
المرتجعات
-
وعد<فراغ>
setBadgeBackgroundColor()
browser.action.setBadgeBackgroundColor(
details: object,
): Promise<void>
لضبط لون خلفية الشارة
المعلمات
-
التفاصيل
عنصر
-
اللون
string | ColorArray
مصفوفة من أربعة أعداد صحيحة في النطاق [0,255] تشكّل لون RGBA للشارة. على سبيل المثال، اللون الأحمر المعتم هو
[255, 0, 0, 255]. يمكن أن تكون أيضًا سلسلة تحتوي على قيمة CSS، مع اللون الأحمر المعتم#FF0000أو#F00. -
tabId
number اختيارية
يحدّ من التغيير عند اختيار علامة تبويب معيّنة. تتم إعادة ضبطها تلقائيًا عند إغلاق علامة التبويب.
-
المرتجعات
-
وعد<فراغ>
setBadgeText()
browser.action.setBadgeText(
details: object,
): Promise<void>
يضبط هذا الإجراء نص الشارة للإجراء. تظهر الشارة في أعلى الرمز.
المعلمات
-
التفاصيل
عنصر
-
tabId
number اختيارية
يحدّ من التغيير عند اختيار علامة تبويب معيّنة. تتم إعادة ضبطها تلقائيًا عند إغلاق علامة التبويب.
-
نصي
string اختياري
يمكن تمرير أي عدد من الأحرف، ولكن يمكن أن يتسع المساحة لحوالي أربعة أحرف فقط. إذا تم تمرير سلسلة فارغة (
'')، يتم محو نص الشارة. إذا تم تحديدtabIdوكانت قيمةtextفارغة، يتم محو نص علامة التبويب المحدّدة ويتم ضبطه تلقائيًا على نص الشارة العام.
-
المرتجعات
-
وعد<فراغ>
setBadgeTextColor()
browser.action.setBadgeTextColor(
details: object,
): Promise<void>
يضبط لون نص الشارة.
المعلمات
-
التفاصيل
عنصر
-
اللون
string | ColorArray
مصفوفة من أربعة أعداد صحيحة في النطاق [0,255] تشكّل لون RGBA للشارة. على سبيل المثال، اللون الأحمر المعتم هو
[255, 0, 0, 255]. يمكن أن تكون أيضًا سلسلة تحتوي على قيمة CSS، مع اللون الأحمر المعتم#FF0000أو#F00. سيؤدي عدم ضبط هذه القيمة إلى اختيار لون تلقائيًا يتباين مع لون خلفية الشارة ليظهر النص بوضوح. لن يتم ضبط الألوان التي تحتوي على قيم ألفا تساوي 0 وستعرض خطأ. -
tabId
number اختيارية
يحدّ من التغيير عند اختيار علامة تبويب معيّنة. تتم إعادة ضبطها تلقائيًا عند إغلاق علامة التبويب.
-
المرتجعات
-
وعد<فراغ>
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}". -
المسار
string | object اختيارية
إما مسار صورة نسبي أو قاموس {size -> relative image path} يشير إلى الرمز المطلوب ضبطه. إذا تم تحديد الرمز كقاموس، يتم اختيار الصورة الفعلية التي سيتم استخدامها بناءً على كثافة وحدات بكسل الشاشة. إذا كان عدد بكسلات الصورة التي تتناسب مع وحدة مساحة شاشة واحدة يساوي
scale، سيتم اختيار الصورة ذات الحجمscale* n، حيث n هو حجم الرمز في واجهة المستخدم. يجب تحديد صورة واحدة على الأقل. يُرجى العِلم أنّ "details.path = foo" يعادل "details.path = {'16': foo}" -
tabId
number اختيارية
يحدّ من التغيير عند اختيار علامة تبويب معيّنة. تتم إعادة ضبطها تلقائيًا عند إغلاق علامة التبويب.
-
المرتجعات
-
وعد<فراغ>
الإصدار 96 من Chrome والإصدارات الأحدث browser.* منذ الإصدار 148 من Chrome
setPopup()
browser.action.setPopup(
details: object,
): Promise<void>
تحدّد هذه السياسة مستند HTML الذي سيتم فتحه كنافذة منبثقة عندما ينقر المستخدم على رمز الإجراء.
المعلمات
-
التفاصيل
عنصر
-
نافذة منبثقة
سلسلة
المسار النسبي لملف HTML الذي سيتم عرضه في نافذة منبثقة. في حال ضبط السياسة على سلسلة فارغة (
'')، لن تظهر أي نافذة منبثقة. -
tabId
number اختيارية
يحدّ من التغيير عند اختيار علامة تبويب معيّنة. تتم إعادة ضبطها تلقائيًا عند إغلاق علامة التبويب.
-
المرتجعات
-
وعد<فراغ>
setTitle()
browser.action.setTitle(
details: object,
): Promise<void>
يضبط عنوان الإجراء. يظهر هذا في تلميح الشاشة.
المعلمات
-
التفاصيل
عنصر
-
tabId
number اختيارية
يحدّ من التغيير عند اختيار علامة تبويب معيّنة. تتم إعادة ضبطها تلقائيًا عند إغلاق علامة التبويب.
-
title
سلسلة
السلسلة التي يجب أن يعرضها الإجراء عند تمرير مؤشر الماوس فوقه.
-
المرتجعات
-
وعد<فراغ>
الفعاليات
onClicked
browser.action.onClicked.addListener(
callback: function,
)
يتم تنشيط هذا الحدث عند النقر على رمز إجراء. لن يتم تنشيط هذا الحدث إذا كان الإجراء يتضمّن نافذة منبثقة.
onUserSettingsChanged
browser.action.onUserSettingsChanged.addListener(
callback: function,
)
يتم تنشيط هذا الحدث عندما تتغيّر الإعدادات التي حدّدها المستخدم والمتعلّقة بإجراء الإضافة.
المعلمات
-
callback
دالة
تظهر المَعلمة
callbackعلى النحو التالي:(change: UserSettingsChange) => void
-
تغيير
-