chrome.action

คำอธิบาย

ใช้ chrome.action API เพื่อควบคุมไอคอนส่วนขยายในแถบเครื่องมือ Google Chrome

ไอคอนการดำเนินการจะแสดงในแถบเครื่องมือของเบราว์เซอร์ข้างแถบค้นหา หลังจากติดตั้งแล้ว รายการเหล่านี้จะปรากฏในเมนูส่วนขยาย (ไอคอนชิ้นส่วนของภาพต่อกัน) ผู้ใช้สามารถปักหมุดไอคอนส่วนขยายของคุณไว้ที่แถบเครื่องมือได้

ความพร้อมใช้งาน

Chrome 88 ขึ้นไป MV3 ขึ้นไป

ไฟล์ Manifest

คุณต้องประกาศคีย์ต่อไปนี้ในไฟล์ Manifest เพื่อใช้ API นี้

"action"

หากต้องการใช้ chrome.action API ให้ระบุ "manifest_version" ของ 3 และใส่คีย์ "action" ในไฟล์ Manifest

{
  "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" ไว้เสมอ

แนวคิดและการใช้งาน

ส่วนต่างๆ ของ UI

Icon

ไอคอนคือรูปภาพหลักในแถบเครื่องมือสำหรับส่วนขยายของคุณ และตั้งค่าโดยคีย์ "default_icon" ในคีย์ "action" ของไฟล์ Manifest ไอคอนต้องมีความกว้างและความสูง 16 พิกเซลแบบไม่ขึ้นอยู่กับอุปกรณ์ (DIP)

คีย์ "default_icon" คือพจนานุกรมของขนาดกับเส้นทางรูปภาพ Chrome ใช้ไอคอนเหล่านี้เพื่อเลือกขนาดรูปภาพที่จะใช้ หากไม่พบรายการที่ตรงกันทั้งหมด Chrome จะเลือกรายการที่ใกล้เคียงที่สุดที่มีให้และปรับขนาดให้พอดีกับรูปภาพ ซึ่งอาจส่งผลต่อคุณภาพของรูปภาพ

เนื่องจากอุปกรณ์ที่มีปัจจัยการขยายที่พบได้น้อย เช่น 1.5 เท่าหรือ 1.2 เท่า กำลังได้รับความนิยมมากขึ้น เราจึงขอแนะนำให้คุณจัดเตรียมไอคอนหลายขนาด วิธีนี้ยังช่วยให้ส่วนขยายพร้อมใช้งานในอนาคตในกรณีที่อาจมีการเปลี่ยนแปลงขนาดการแสดงผลไอคอน อย่างไรก็ตาม หากระบุเพียงขนาดเดียว คุณก็สามารถตั้งค่าคีย์ "default_icon" เป็นสตริงที่มีเส้นทางไปยังไอคอนเดียวแทนพจนานุกรมได้

นอกจากนี้ คุณยังเรียก action.setIcon() เพื่อตั้งค่าไอคอนของส่วนขยายแบบเป็นโปรแกรมได้ โดยระบุเส้นทางรูปภาพอื่นหรือระบุไอคอนที่สร้างขึ้นแบบไดนามิกโดยใช้องค์ประกอบ Canvas ของ HTML หรือหากตั้งค่าจาก Service Worker ของส่วนขยาย ให้ใช้ 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);
chrome.action.setIcon({imageData: imageData}, () => { /* ... */ });

สำหรับส่วนขยายที่แพ็กไว้ (ติดตั้งจากไฟล์ .crx) รูปภาพจะอยู่ในรูปแบบส่วนใหญ่ที่เครื่องมือแสดงผล Blink แสดงได้ ซึ่งรวมถึง PNG, JPEG, BMP, ICO และอื่นๆ ไม่รองรับ SVG ส่วนขยายที่แตกไฟล์แล้วต้องใช้รูปภาพ PNG

เคล็ดลับเครื่องมือ (ชื่อ)

เคล็ดลับเครื่องมือหรือชื่อจะปรากฏขึ้นเมื่อผู้ใช้วางเคอร์เซอร์เมาส์เหนือไอคอนของส่วนขยายในแถบเครื่องมือ นอกจากนี้ ข้อความดังกล่าวยังรวมอยู่ในข้อความที่เข้าถึงได้ซึ่งโปรแกรมอ่านหน้าจอจะอ่านออกเสียงเมื่อปุ่มได้รับโฟกัส

ตั้งค่าเคล็ดลับเครื่องมือเริ่มต้นโดยใช้ช่อง "default_title" ของคีย์ "action" ใน manifest.json นอกจากนี้ คุณยังตั้งค่าผ่านโปรแกรมได้โดยเรียกใช้ action.setTitle()

ป้าย

การดำเนินการอาจแสดง "ป้าย" ซึ่งเป็นข้อความสั้นๆ ที่วางซ้อนบนไอคอน ซึ่งจะช่วยให้คุณอัปเดตการดำเนินการเพื่อแสดงข้อมูลเล็กน้อยเกี่ยวกับสถานะของส่วนขยายได้ เช่น ตัวนับ โดยป้ายจะมีคอมโพเนนต์ข้อความและสีพื้นหลัง เนื่องจากพื้นที่มีจำกัด เราขอแนะนำให้ใช้ข้อความป้ายไม่เกิน 4 อักขระ

หากต้องการสร้างป้าย ให้ตั้งค่าแบบเป็นโปรแกรมโดยเรียกใช้ action.setBadgeBackgroundColor() และ action.setBadgeText() ไม่มีการตั้งค่าป้ายเริ่มต้นในไฟล์ Manifest ค่าสีป้ายอาจเป็นอาร์เรย์ของจำนวนเต็ม 4 รายการระหว่าง 0 ถึง 255 ซึ่งประกอบกันเป็นสี RGBA ของป้าย หรือสตริงที่มีค่าสี CSS

chrome.action.setBadgeBackgroundColor(
  {color: [0, 255, 0, 0]},  // Green
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {color: '#00FF00'},  // Also green
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {color: 'green'},  // Also, also green
  () => { /* ... */ },
);

ป๊อปอัปของการดำเนินการจะแสดงเมื่อผู้ใช้คลิกปุ่มการดำเนินการของส่วนขยายในแถบเครื่องมือ ป๊อปอัปอาจมีเนื้อหา HTML ใดก็ได้ตามต้องการ และจะปรับขนาดให้พอดีกับเนื้อหาโดยอัตโนมัติ ขนาดของป๊อปอัปต้องอยู่ระหว่าง 25x25 ถึง 800x600 พิกเซล

พรอมต์ป๊อปอัปได้รับการตั้งค่าครั้งแรกโดยพร็อพเพอร์ตี้ "default_popup" ในคีย์ "action" ในไฟล์ manifest.json หากมี พร็อพเพอร์ตี้นี้ควรชี้ไปยังเส้นทางแบบสัมพัทธ์ภายในไดเรกทอรีส่วนขยาย นอกจากนี้ คุณยังอัปเดตแบบไดนามิกเพื่อชี้ไปยังเส้นทางแบบสัมพัทธ์อื่นได้โดยใช้เมธอด action.setPopup()

กรณีการใช้งาน

สถานะต่อแท็บ

การดำเนินการของส่วนขยายอาจมีสถานะต่างกันในแต่ละแท็บ หากต้องการตั้งค่าสำหรับแท็บแต่ละแท็บ ให้ใช้พร็อพเพอร์ตี้ tabId ในวิธีการตั้งค่าของ action API ตัวอย่างเช่น หากต้องการตั้งค่าข้อความป้ายสำหรับแท็บที่เฉพาะเจาะจง ให้ทำดังนี้

function getTabId() { /* ... */}
function getTabBadge() { /* ... */}

chrome.action.setBadgeText(
  {
    text: getTabBadge(tabId),
    tabId: getTabId(),
  },
  () => { ... }
);

หากไม่ระบุพร็อพเพอร์ตี้ tabId ระบบจะถือว่าการตั้งค่านั้นเป็นการตั้งค่าส่วนกลาง การตั้งค่าเฉพาะแท็บจะมีลำดับความสำคัญสูงกว่าการตั้งค่าส่วนกลาง

สถานะเปิดใช้

โดยค่าเริ่มต้น ระบบจะเปิดใช้การดำเนินการของแถบเครื่องมือ (คลิกได้) ในแท็บทุกแท็บ คุณเปลี่ยนค่าเริ่มต้นนี้ได้ด้วยการกําหนดพร็อพเพอร์ตี้ default_state ในคีย์ action ของไฟล์ Manifest หากตั้งค่า default_state เป็น "disabled" ระบบจะปิดใช้การดำเนินการโดยค่าเริ่มต้นและต้องเปิดใช้แบบเป็นโปรแกรมเพื่อให้คลิกได้ หากตั้งค่า default_state เป็น "enabled" (ค่าเริ่มต้น) ระบบจะเปิดใช้การดําเนินการดังกล่าวและคลิกได้

คุณควบคุมสถานะแบบเป็นโปรแกรมได้โดยใช้เมธอด action.enable() และ action.disable() การดำเนินการนี้จะส่งผลต่อการส่งป๊อปอัป (หากมี) หรือเหตุการณ์ action.onClicked ไปยังส่วนขยายเท่านั้น โดยไม่ส่งผลต่อการแสดงการดำเนินการในแถบเครื่องมือ

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีทั่วไปบางวิธีในการใช้การดำเนินการในชิ้นงาน หากต้องการลองใช้ API นี้ ให้ติดตั้งตัวอย่าง 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
chrome.action.onClicked.addListener((tab) => {
  chrome.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
chrome.runtime.onInstalled.addListener(() => {
  // Page actions are disabled by default and enabled on select tabs
  chrome.action.disable();

  // Clear all rules to ensure only our expected rules are set
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    // Declare a rule to enable the action on example.com pages
    let exampleRule = {
      conditions: [
        new chrome.declarativeContent.PageStateMatcher({
          pageUrl: {hostSuffix: '.example.com'},
        })
      ],
      actions: [new chrome.declarativeContent.ShowAction()],
    };

    // Finally, apply our new array of rules
    let rules = [exampleRule];
    chrome.declarativeContent.onPageChanged.addRules(rules);
  });
});

ประเภท

OpenPopupOptions

Chrome 99 ขึ้นไป

พร็อพเพอร์ตี้

  • windowId

    ตัวเลข ไม่บังคับ

    รหัสของหน้าต่างที่จะเปิดป๊อปอัปการดำเนินการ ค่าเริ่มต้นจะเป็นหน้าต่างที่ใช้งานอยู่ในปัจจุบัน หากไม่ได้ระบุ

TabDetails

พร็อพเพอร์ตี้

  • tabId

    ตัวเลข ไม่บังคับ

    รหัสของแท็บที่จะค้นหาสถานะ หากไม่ได้ระบุแท็บ ระบบจะแสดงผลสถานะที่ไม่เจาะจงแท็บ

UserSettings

Chrome 91 ขึ้นไป

ชุดการตั้งค่าที่ผู้ใช้ระบุซึ่งเกี่ยวข้องกับการดำเนินการของส่วนขยาย

พร็อพเพอร์ตี้

  • isOnToolbar

    บูลีน

    ไอคอนการดำเนินการของส่วนขยายจะปรากฏในแถบเครื่องมือระดับบนสุดของหน้าต่างเบราว์เซอร์หรือไม่ (กล่าวคือ ผู้ใช้ได้ "ปักหมุด" ส่วนขยายไว้หรือไม่)

UserSettingsChange

Chrome 130 ขึ้นไป

พร็อพเพอร์ตี้

  • isOnToolbar

    บูลีน ไม่บังคับ

    ไอคอนการดำเนินการของส่วนขยายแสดงในแถบเครื่องมือระดับบนสุดของหน้าต่างเบราว์เซอร์หรือไม่ (กล่าวคือ ผู้ใช้ได้ "ปักหมุด" ส่วนขยายไว้หรือไม่)

เมธอด

disable()

สัญญา 
chrome.action.disable(
  tabId?: number,
  callback?: function,
)

ปิดใช้การดำเนินการสำหรับแท็บ

พารามิเตอร์

  • tabId

    ตัวเลข ไม่บังคับ

    รหัสของแท็บที่ต้องการแก้ไขการดําเนินการ

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    () => void

การคืนสินค้า

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

enable()

สัญญา 
chrome.action.enable(
  tabId?: number,
  callback?: function,
)

เปิดใช้การดำเนินการสำหรับแท็บ ระบบจะเปิดใช้การดําเนินการโดยค่าเริ่มต้น

พารามิเตอร์

  • tabId

    ตัวเลข ไม่บังคับ

    รหัสของแท็บที่ต้องการแก้ไขการดําเนินการ

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    () => void

การคืนสินค้า

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

getBadgeBackgroundColor()

สัญญา 
chrome.action.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

รับสีพื้นหลังของการดำเนินการ

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    (result: ColorArray) => void

การคืนสินค้า

  • ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

getBadgeText()

สัญญา 
chrome.action.getBadgeText(
  details: TabDetails,
  callback?: function,
)

รับข้อความป้ายของการดําเนินการ หากไม่ได้ระบุแท็บ ระบบจะแสดงผลข้อความป้ายที่ไม่เจาะจงแท็บ หากเปิดใช้ displayActionCountAsBadgeText ระบบจะแสดงข้อความตัวยึดตําแหน่ง เว้นแต่จะมีสิทธิ์ declarativeNetRequestFeedback หรือมีข้อความป้ายเฉพาะแท็บ

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    (result: string) => void

    • ผลลัพธ์

      สตริง

การคืนสินค้า

  • Promise<string>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

getBadgeTextColor()

สัญญา Chrome 110 ขึ้นไป 
chrome.action.getBadgeTextColor(
  details: TabDetails,
  callback?: function,
)

รับสีข้อความของการดำเนินการ

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    (result: ColorArray) => void

การคืนสินค้า

  • ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

getPopup()

สัญญา 
chrome.action.getPopup(
  details: TabDetails,
  callback?: function,
)

รับเอกสาร HTML ที่ตั้งค่าเป็นป๊อปอัปสําหรับการดําเนินการนี้

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    (result: string) => void

    • ผลลัพธ์

      สตริง

การคืนสินค้า

  • Promise<string>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

getTitle()

สัญญา 
chrome.action.getTitle(
  details: TabDetails,
  callback?: function,
)

รับชื่อการดำเนินการ

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    (result: string) => void

    • ผลลัพธ์

      สตริง

การคืนสินค้า

  • Promise<string>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

getUserSettings()

สัญญา Chrome 91 ขึ้นไป 
chrome.action.getUserSettings(
  callback?: function,
)

แสดงการตั้งค่าที่ผู้ใช้ระบุซึ่งเกี่ยวข้องกับการดำเนินการของส่วนขยาย

พารามิเตอร์

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    (userSettings: UserSettings) => void

การคืนสินค้า

  • Promise<UserSettings>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

isEnabled()

สัญญา Chrome 110 ขึ้นไป 
chrome.action.isEnabled(
  tabId?: number,
  callback?: function,
)

ระบุว่าได้เปิดใช้การดำเนินการของเวิร์กชีตสำหรับแท็บ (หรือทั่วโลกหากไม่ได้ระบุ tabId) หรือไม่ การดําเนินการที่เปิดใช้โดยใช้เฉพาะ declarativeContent จะแสดงผลเป็นเท็จเสมอ

พารามิเตอร์

  • tabId

    ตัวเลข ไม่บังคับ

    รหัสของแท็บที่คุณต้องการตรวจสอบสถานะเปิดใช้

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    (isEnabled: boolean) => void

    • isEnabled

      บูลีน

      เป็นจริงหากเปิดใช้การดำเนินการของส่วนขยาย

การคืนสินค้า

  • Promise<boolean>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

openPopup()

สัญญา Chrome 127 ขึ้นไป 
chrome.action.openPopup(
  options?: OpenPopupOptions,
  callback?: function,
)

เปิดป๊อปอัปของส่วนขยาย ระหว่าง Chrome 118 ถึง Chrome 126 ตัวเลือกนี้จะใช้ได้กับส่วนขยายที่ติดตั้งตามนโยบายเท่านั้น

พารามิเตอร์

  • ตัวเลือก

    OpenPopupOptions ไม่บังคับ

    ระบุตัวเลือกสําหรับการเปิดป๊อปอัป

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    () => void

การคืนสินค้า

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

setBadgeBackgroundColor()

สัญญา 
chrome.action.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

กำหนดสีพื้นหลังให้กับป้าย

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • สี

      สตริง | ColorArray

      อาร์เรย์จำนวนเต็ม 4 รายการในช่วง [0,255] ที่ใช้ประกอบสี RGBA ของป้าย เช่น สีแดงทึบคือ [255, 0, 0, 255] หรืออาจเป็นสตริงที่มีค่า CSS โดยสีแดงทึบคือ #FF0000 หรือ #F00

    • tabId

      ตัวเลข ไม่บังคับ

      จำกัดการเปลี่ยนแปลงไว้เมื่อเลือกแท็บหนึ่งๆ รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    () => void

การคืนสินค้า

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

setBadgeText()

สัญญา 
chrome.action.setBadgeText(
  details: object,
  callback?: function,
)

ตั้งค่าข้อความป้ายสําหรับการดําเนินการ โดยป้ายจะแสดงอยู่ด้านบนของไอคอน

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • tabId

      ตัวเลข ไม่บังคับ

      จำกัดการเปลี่ยนแปลงไว้เฉพาะเมื่อเลือกแท็บหนึ่งๆ รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ

    • ข้อความ

      สตริง ไม่บังคับ

      คุณสามารถส่งอักขระกี่ตัวก็ได้ แต่จะมีเพียงประมาณ 4 ตัวเท่านั้นที่ใส่ในพื้นที่ทำงานได้ หากมีการส่งสตริงว่าง ('') ระบบจะล้างข้อความป้าย หากระบุ tabId และ text เป็นค่าว่าง ระบบจะล้างข้อความสำหรับแท็บที่ระบุและตั้งค่าเริ่มต้นเป็นข้อความป้ายทั่วโลก

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    () => void

การคืนสินค้า

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

setBadgeTextColor()

สัญญา Chrome 110 ขึ้นไป 
chrome.action.setBadgeTextColor(
  details: object,
  callback?: function,
)

กำหนดสีข้อความสำหรับป้าย

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • สี

      สตริง | ColorArray

      อาร์เรย์จำนวนเต็ม 4 รายการในช่วง [0,255] ที่ใช้ประกอบสี RGBA ของป้าย เช่น สีแดงทึบคือ [255, 0, 0, 255] หรืออาจเป็นสตริงที่มีค่า CSS โดยสีแดงทึบคือ #FF0000 หรือ #F00 การไม่ตั้งค่านี้จะทําให้ระบบเลือกสีโดยอัตโนมัติซึ่งจะตัดกับสีพื้นหลังของป้ายเพื่อให้มองเห็นข้อความได้ ระบบจะไม่ตั้งค่าสีที่มีค่าอัลฟาเท่ากับ 0 และจะแสดงข้อผิดพลาด

    • tabId

      ตัวเลข ไม่บังคับ

      จำกัดการเปลี่ยนแปลงไว้เมื่อเลือกแท็บหนึ่งๆ รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    () => void

การคืนสินค้า

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

setIcon()

สัญญา 
chrome.action.setIcon(
  details: object,
  callback?: function,
)

ตั้งค่าไอคอนสําหรับการดําเนินการ คุณสามารถระบุไอคอนเป็นเส้นทางไปยังไฟล์รูปภาพหรือเป็นข้อมูลพิกเซลจากองค์ประกอบ Canvas หรือเป็นพจนานุกรมของข้อมูลดังกล่าวก็ได้ ต้องระบุพร็อพเพอร์ตี้ path หรือ imageData

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • imageData

      ImageData | ออบเจ็กต์ ไม่บังคับ

      ออบเจ็กต์ ImageData หรือพจนานุกรม {size -> ImageData} ที่แสดงถึงไอคอนที่จะตั้งค่า หากระบุไอคอนเป็นพจนานุกรม ระบบจะเลือกรูปภาพจริงที่จะใช้ตามความหนาแน่นของพิกเซลของหน้าจอ หากจำนวนพิกเซลรูปภาพที่พอดีกับหน่วยพื้นที่หน้าจอ 1 หน่วยเท่ากับ scale ระบบจะเลือกรูปภาพขนาด scale * n โดยที่ n คือขนาดของไอคอนใน UI ต้องระบุรูปภาพอย่างน้อย 1 รูป โปรดทราบว่า "details.imageData = foo" เทียบเท่ากับ "details.imageData = {'16': foo}"

    • เส้นทาง

      string | object ไม่บังคับ

      เส้นทางรูปภาพแบบสัมพัทธ์หรือพจนานุกรม {size -> relative image path} ที่ชี้ไปยังไอคอนที่จะตั้งค่า หากระบุไอคอนเป็นพจนานุกรม ระบบจะเลือกรูปภาพจริงที่จะใช้ตามความหนาแน่นของพิกเซลของหน้าจอ หากจำนวนพิกเซลรูปภาพที่พอดีกับหน่วยพื้นที่หน้าจอ 1 หน่วยเท่ากับ scale ระบบจะเลือกรูปภาพขนาด scale * n โดยที่ n คือขนาดของไอคอนใน UI ต้องระบุรูปภาพอย่างน้อย 1 รูป โปรดทราบว่า "details.path = foo" เทียบเท่ากับ "details.path = {'16': foo}"

    • tabId

      ตัวเลข ไม่บังคับ

      จำกัดการเปลี่ยนแปลงไว้เมื่อเลือกแท็บหนึ่งๆ รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    () => void

การคืนสินค้า

  • Promise<void>

    Chrome 96 ขึ้นไป

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

setPopup()

สัญญา 
chrome.action.setPopup(
  details: object,
  callback?: function,
)

ตั้งค่าให้เอกสาร HTML เปิดเป็นป๊อปอัปเมื่อผู้ใช้คลิกไอคอนของการดำเนินการ

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • ป๊อปอัป

      สตริง

      เส้นทางแบบสัมพัทธ์ไปยังไฟล์ HTML เพื่อแสดงในป๊อปอัป หากตั้งค่าเป็นสตริงว่าง ('') ระบบจะไม่แสดงป๊อปอัป

    • tabId

      ตัวเลข ไม่บังคับ

      จำกัดการเปลี่ยนแปลงไว้เมื่อเลือกแท็บหนึ่งๆ รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    () => void

การคืนสินค้า

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

setTitle()

สัญญา 
chrome.action.setTitle(
  details: object,
  callback?: function,
)

ตั้งค่าชื่อการดำเนินการ ซึ่งจะปรากฏในเคล็ดลับเครื่องมือ

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • tabId

      ตัวเลข ไม่บังคับ

      จำกัดการเปลี่ยนแปลงไว้เฉพาะเมื่อเลือกแท็บหนึ่งๆ รีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ

    • title

      สตริง

      สตริงที่การดำเนินการควรแสดงเมื่อวางเมาส์เหนือ

  • Callback

    ฟังก์ชัน ไม่บังคับ

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    () => void

การคืนสินค้า

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่มี Callback ไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

กิจกรรม

onClicked

chrome.action.onClicked.addListener(
  callback: function,
)

เริ่มทํางานเมื่อมีการคลิกไอคอนการดําเนินการ เหตุการณ์นี้จะไม่ทริกเกอร์หากการดําเนินการมีพอพปอัป

พารามิเตอร์

  • Callback

    ฟังก์ชัน

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    (tab: tabs.Tab) => void

onUserSettingsChanged

Chrome 130 ขึ้นไป 
chrome.action.onUserSettingsChanged.addListener(
  callback: function,
)

เริ่มทํางานเมื่อการตั้งค่าที่ผู้ใช้ระบุซึ่งเกี่ยวข้องกับการเปลี่ยนแปลงการดําเนินการของส่วนขยาย

พารามิเตอร์

  • Callback

    ฟังก์ชัน

    พารามิเตอร์ callback จะมีลักษณะดังนี้ 

    (change: UserSettingsChange) => void