chrome.action

คำอธิบาย

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

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

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

Chrome เวอร์ชัน 88 ขึ้นไป MV3 ขึ้นไป

ไฟล์ Manifest

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

"action"

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

หมายเหตุ: ส่วนขยายทุกรายการจะมีไอคอนในแถบเครื่องมือ Chrome แม้ว่าจะไม่มีการใส่คีย์ `"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 เท่า จะเป็นอุปกรณ์ที่พบมากกว่ากันมากขึ้น เราจึงขอแนะนำให้คุณมีหลายขนาดสำหรับไอคอน และยังทำให้ส่วนขยายไม่พอดีกับการเปลี่ยนแปลงขนาดการแสดงไอคอนที่อาจเกิดขึ้นในอนาคตอีกด้วย

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

หมายเหตุ: action.setIcon() API มีไว้เพื่อตั้งค่าภาพนิ่ง อย่าใช้ภาพเคลื่อนไหวเป็นไอคอน

สำหรับส่วนขยายที่แพ็ก (ติดตั้งจากไฟล์ .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()

หมายเหตุ: ระบบจะไม่ส่งเหตุการณ์ action.onClicked หากการทำงานของส่วนขยายได้ระบุป๊อปอัปที่จะแสดงเมื่อคลิกแท็บปัจจุบัน

Use Case

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

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

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

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

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

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

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

ตัวอย่าง

ตัวอย่างต่อไปนี้จะแสดงวิธีทั่วไปบางส่วนที่มีการใช้การดำเนินการในส่วนขยาย หากต้องการลองใช้ API นี้ ให้ติดตั้งตัวอย่าง Action API จากที่เก็บ chrome-extension-sample

แสดงป๊อปอัป

โดยปกติส่วนขยายจะแสดงป๊อปอัปเมื่อผู้ใช้คลิกการทำงานของส่วนขยาย หากต้องการใช้ตัวเลือกนี้ในส่วนขยายของคุณเอง ให้ประกาศป๊อปอัปใน 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

  boolean

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

วิธีการ

disable()

สัญญา

chrome.action.disable(
  tabId?: number,
  callback?: function,
)

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

พารามิเตอร์

• tabId

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

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

• Callback

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

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

  ()=>void

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

• Promise<void>

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

enable()

สัญญา

chrome.action.enable(
  tabId?: number,
  callback?: function,
)

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

พารามิเตอร์

• tabId

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

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

• Callback

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

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

  ()=>void

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

• Promise<void>

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

getBadgeBackgroundColor()

สัญญา

chrome.action.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
)

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

พารามิเตอร์

• รายละเอียด

  TabDetails

• Callback

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

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

  (result: ColorArray)=>void

  • ผลลัพธ์

    ColorArray

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

• Promise<browserAction.ColorArray>

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

getBadgeText()

สัญญา

chrome.action.getBadgeText(
  details: TabDetails,
  callback?: function,
)

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

พารามิเตอร์

• รายละเอียด

  TabDetails

• Callback

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

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

  (result: string)=>void

  • ผลลัพธ์

    string

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

• คำสัญญา<string>

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

getBadgeTextColor()

คำมั่นสัญญา Chrome 110 ขึ้นไป

chrome.action.getBadgeTextColor(
  details: TabDetails,
  callback?: function,
)

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

พารามิเตอร์

• รายละเอียด

  TabDetails

• Callback

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

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

  (result: ColorArray)=>void

  • ผลลัพธ์

    ColorArray

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

• Promise<browserAction.ColorArray>

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

getPopup()

สัญญา

chrome.action.getPopup(
  details: TabDetails,
  callback?: function,
)

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

พารามิเตอร์

• รายละเอียด

  TabDetails

• Callback

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

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

  (result: string)=>void

  • ผลลัพธ์

    string

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

• คำสัญญา<string>

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

getTitle()

สัญญา

chrome.action.getTitle(
  details: TabDetails,
  callback?: function,
)

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

พารามิเตอร์

• รายละเอียด

  TabDetails

• Callback

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

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

  (result: string)=>void

  • ผลลัพธ์

    string

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

• คำสัญญา<string>

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

getUserSettings()

คำมั่นสัญญา Chrome 91 ขึ้นไป

chrome.action.getUserSettings(
  callback?: function,
)

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

พารามิเตอร์

• Callback

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

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

  (userSettings: UserSettings)=>void

  • userSettings

    UserSettings

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

• Promise<UserSettings>

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

isEnabled()

คำมั่นสัญญา Chrome 110 ขึ้นไป

chrome.action.isEnabled(
  tabId?: number,
  callback?: function,
)

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

พารามิเตอร์

• tabId

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

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

• Callback

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

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

  (isEnabled: boolean)=>void

  • isEnabled

    boolean

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

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

• Promise<boolean>

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

openPopup()

Promise Chrome 118+ ต้องมีนโยบาย

chrome.action.openPopup(
  options?: OpenPopupOptions,
  callback?: function,
)

เปิดป๊อปอัปของส่วนขยาย

พารามิเตอร์

• ตัวเลือก

  OpenPopupOptions ไม่บังคับ

  ระบุตัวเลือกในการเปิดป๊อปอัป

• Callback

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

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

  ()=>void

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

• Promise<void>

  Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 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 V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ

setBadgeText()

สัญญา

chrome.action.setBadgeText(
  details: object,
  callback?: function,
)

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

พารามิเตอร์

• รายละเอียด

  ออบเจ็กต์

  • tabId

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

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

  • ข้อความ

    string ไม่บังคับ

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

• Callback

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

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

  ()=>void

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

• Promise<void>

  Manifest V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 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 V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ

setIcon()

สัญญา

chrome.action.setIcon(
  details: object,
  callback?: function,
)

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

พารามิเตอร์

• รายละเอียด

  ออบเจ็กต์

  • imageData

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

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

  • เส้นทาง

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

    เส้นทางอิมเมจแบบสัมพัทธ์หรือพจนานุกรม {size -> related 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 V3 ขึ้นไปรองรับคำสัญญา แต่จะใช้โค้ดเรียกกลับเพื่อความเข้ากันได้แบบย้อนหลัง คุณไม่สามารถใช้ทั้ง 2 ฟีเจอร์ในการเรียกใช้ฟังก์ชันเดียวกันได้ คำสัญญาจะยุติด้วยประเภทเดียวกันกับที่ส่งไปยังโค้ดเรียกกลับ

setPopup()

สัญญา

chrome.action.setPopup(
  details: object,
  callback?: function,
)

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

พารามิเตอร์

• รายละเอียด

  ออบเจ็กต์

  • ป๊อปอัป

    string

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

  • tabId

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

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

• Callback

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

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

  ()=>void

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

• Promise<void>

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

setTitle()

สัญญา

chrome.action.setTitle(
  details: object,
  callback?: function,
)

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

พารามิเตอร์

• รายละเอียด

  ออบเจ็กต์

  • tabId

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

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

  • title

    string

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

• Callback

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

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

  ()=>void

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

• Promise<void>

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

กิจกรรม

onClicked

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

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

พารามิเตอร์

• Callback

  ฟังก์ชัน

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

  (tab: tabs.Tab)=>void

  • Tab

    tabs.Tab