browser.action

الوصف

استخدِم واجهة برمجة التطبيقات chrome.action للتحكّم في رمز الإضافة في شريط أدوات Google Chrome.

يتم عرض رموز الإجراءات في شريط أدوات المتصفّح بجانب مربّع متعدد الاستخدامات. بعد التثبيت، تظهر هذه الإضافات في قائمة الإضافات (رمز قطعة الأحجية). يمكن للمستخدمين تثبيت رمز الإضافة على شريط الأدوات.

مدى التوفّر

الإصدار 88 من Chrome والإصدارات الأحدث browser.* ‎ منذ الإصدار 148 من Chrome الإصدار 3 من MV والإصدارات الأحدث

البيان

يجب الإعلان عن المفاتيح التالية في ملف البيان لاستخدام واجهة برمجة التطبيقات هذه.

"action"

لاستخدام واجهة برمجة التطبيقات 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

الإصدار 99 من Chrome والإصدارات الأحدث browser.* ‎ منذ الإصدار 148 من Chrome

الخصائص

  • windowId

    number اختيارية

    رقم تعريف النافذة التي سيتم فتح النافذة المنبثقة للإجراء فيها يتم ضبط القيمة تلقائيًا على النافذة النشطة حاليًا في حال عدم تحديد أي قيمة.

TabDetails

الخصائص

  • tabId

    number اختيارية

    رقم تعريف علامة التبويب المطلوب الاستعلام عن حالتها إذا لم يتم تحديد علامة تبويب، يتم عرض الحالة غير المحدّدة لعلامة التبويب.

UserSettings

الإصدار 91 من Chrome والإصدارات الأحدث browser.* ‎ منذ الإصدار 148 من Chrome

مجموعة الإعدادات التي يحدّدها المستخدم والمتعلّقة بإجراء الإضافة

الخصائص

  • isOnToolbar

    قيمة منطقية

    تحدّد ما إذا كان رمز إجراء الإضافة مرئيًا على شريط الأدوات ذي المستوى الأعلى في نوافذ المتصفّح (أي ما إذا كان المستخدم قد "ثبّت" الإضافة).

UserSettingsChange

الإصدار 130 من Chrome والإصدارات الأحدث browser.* ‎ منذ الإصدار 148 من Chrome

الخصائص

  • 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>

تحصل على لون خلفية الإجراء.

المعلمات

المرتجعات

getBadgeText()

browser.action.getBadgeText(
  details: TabDetails,
)
: Promise<string>

تحصل على نص شارة الإجراء. إذا لم يتم تحديد علامة تبويب، يتم عرض نص الشارة غير المحدّد لعلامة التبويب. في حال تفعيل displayActionCountAsBadgeText، سيتم عرض نص مؤقت ما لم يتوفّر إذن declarativeNetRequestFeedback أو يتم تقديم نص شارة خاص بعلامة التبويب.

المعلمات

المرتجعات

  • وعد<سلسلة>

getBadgeTextColor()

الإصدار 110 من Chrome والإصدارات الأحدث browser.* ‎ منذ الإصدار 148 من Chrome
browser.action.getBadgeTextColor(
  details: TabDetails,
)
: Promise<extensionTypes.ColorArray>

للحصول على لون نص الإجراء

المعلمات

المرتجعات

getPopup()

browser.action.getPopup(
  details: TabDetails,
)
: Promise<string>

تعرض هذه الطريقة مستند HTML الذي تم ضبطه كنافذة منبثقة لهذا الإجراء.

المعلمات

المرتجعات

  • وعد<سلسلة>

getTitle()

browser.action.getTitle(
  details: TabDetails,
)
: Promise<string>

للحصول على عنوان الإجراء

المعلمات

المرتجعات

  • وعد<سلسلة>

getUserSettings()

الإصدار 91 من Chrome والإصدارات الأحدث browser.* ‎ منذ الإصدار 148 من Chrome
browser.action.getUserSettings(): Promise<UserSettings>

تعرض هذه الطريقة الإعدادات التي حدّدها المستخدم والمتعلّقة بإجراء الإضافة.

المرتجعات

isEnabled()

الإصدار 110 من Chrome والإصدارات الأحدث browser.* ‎ منذ الإصدار 148 من Chrome
browser.action.isEnabled(
  tabId?: number,
)
: Promise<boolean>

يشير هذا الإعداد إلى ما إذا كان إجراء الإضافة مفعَّلاً لعلامة تبويب (أو على مستوى العالم في حال عدم توفّر tabId). إنّ الإجراءات المفعَّلة باستخدام declarativeContent فقط تعرض دائمًا القيمة "خطأ".

المعلمات

  • tabId

    number اختيارية

    رقم تعريف علامة التبويب التي تريد التحقّق من حالة تفعيلها

المرتجعات

  • Promise<boolean>

openPopup()

الإصدار 127 من Chrome والإصدارات الأحدث browser.* ‎ منذ الإصدار 148 من Chrome
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()

الإصدار 110 من Chrome والإصدارات الأحدث browser.* ‎ منذ الإصدار 148 من Chrome
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,
)

يتم تنشيط هذا الحدث عند النقر على رمز إجراء. لن يتم تنشيط هذا الحدث إذا كان الإجراء يتضمّن نافذة منبثقة.

المعلمات

  • callback

    دالة

    تظهر المَعلمة callback على النحو التالي:

    (tab: tabs.Tab) => void

onUserSettingsChanged

الإصدار 130 من Chrome والإصدارات الأحدث browser.* ‎ منذ الإصدار 148 من Chrome
browser.action.onUserSettingsChanged.addListener(
  callback: function,
)

يتم تنشيط هذا الحدث عندما تتغيّر الإعدادات التي حدّدها المستخدم والمتعلّقة بإجراء الإضافة.

المعلمات