ตอนนี้ Chrome รองรับเนมสเปซ browser.* ที่ได้มาตรฐานแล้ว (พร้อมใช้งานตั้งแต่ Chrome 148 เป็นต้นไป) เรากำลังทยอยอัปเดตเอกสารประกอบ อ่านเพิ่มเติมในคู่มือการเปลี่ยนผ่าน

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

browser.action

คำอธิบาย

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

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

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

Chrome 88 ขึ้นไป browser.* ตั้งแต่ Chrome 148 MV3 ขึ้นไป

ไฟล์ Manifest

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

"action"

หากต้องการใช้ browser.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

ไอคอน

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

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

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

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

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

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

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 ใดก็ได้ที่คุณต้องการ และจะปรับขนาดให้พอดีกับเนื้อหาโดยอัตโนมัติ ขนาดของป๊อปอัปต้องอยู่ระหว่าง 25x25 ถึง 800x600 พิกเซล

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

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

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

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

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

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

browser.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
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

Chrome 99 ขึ้นไป browser.* ตั้งแต่ Chrome 148

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

windowId

number ไม่บังคับ

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

TabDetails

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

tabId

number ไม่บังคับ

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

UserSettings

Chrome 91 ขึ้นไป browser.* ตั้งแต่ Chrome 148

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

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

isOnToolbar

บูลีน

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

UserSettingsChange

Chrome 130 ขึ้นไป browser.* ตั้งแต่ Chrome 148

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

isOnToolbar

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

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

เมธอด

disable()

browser.action.disable(
  tabId?: number,
): Promise<void>

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

พารามิเตอร์

tabId

number ไม่บังคับ

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

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

Promise<void>

enable()

browser.action.enable(
  tabId?: number,
): Promise<void>

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

พารามิเตอร์

tabId

number ไม่บังคับ

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

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

Promise<void>

getBadgeBackgroundColor()

browser.action.getBadgeBackgroundColor(
  details: TabDetails,
): Promise<extensionTypes.ColorArray>

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

พารามิเตอร์

รายละเอียด

TabDetails

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

Promise<extensionTypes.ColorArray>

getBadgeText()

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

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

พารามิเตอร์

รายละเอียด

TabDetails

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

Promise<string>

getBadgeTextColor()

Chrome 110 ขึ้นไป เบราว์เซอร์* ตั้งแต่ Chrome 148

browser.action.getBadgeTextColor(
  details: TabDetails,
): Promise<extensionTypes.ColorArray>

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

พารามิเตอร์

รายละเอียด

TabDetails

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

Promise<extensionTypes.ColorArray>

getPopup()

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

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

พารามิเตอร์

รายละเอียด

TabDetails

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

Promise<string>

getTitle()

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

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

พารามิเตอร์

รายละเอียด

TabDetails

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

Promise<string>

getUserSettings()

Chrome 91 ขึ้นไป browser.* ตั้งแต่ Chrome 148

browser.action.getUserSettings(): Promise<UserSettings>

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

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

Promise<UserSettings>

isEnabled()

Chrome 110 ขึ้นไป เบราว์เซอร์* ตั้งแต่ Chrome 148

browser.action.isEnabled(
  tabId?: number,
): Promise<boolean>

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

พารามิเตอร์

tabId

number ไม่บังคับ

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

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

Promise<boolean>

openPopup()

Chrome 127 ขึ้นไป browser.* ตั้งแต่ Chrome 148

browser.action.openPopup(
  options?: OpenPopupOptions,
): Promise<void>

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

พารามิเตอร์

ตัวเลือก

OpenPopupOptions ไม่บังคับ

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

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

Promise<void>

setBadgeBackgroundColor()

browser.action.setBadgeBackgroundColor(
  details: object,
): Promise<void>

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

พารามิเตอร์

รายละเอียด

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

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

Promise<void>

setBadgeText()

browser.action.setBadgeText(
  details: object,
): Promise<void>

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

พารามิเตอร์

รายละเอียด

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

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

Promise<void>

setBadgeTextColor()

Chrome 110 ขึ้นไป เบราว์เซอร์* ตั้งแต่ Chrome 148

browser.action.setBadgeTextColor(
  details: object,
): Promise<void>

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

พารามิเตอร์

รายละเอียด

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

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

Promise<void>

setIcon()

browser.action.setIcon(
  details: object,
): Promise<void>

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

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

Promise<void>

Chrome 96 ขึ้นไป browser.* ตั้งแต่ Chrome 148

setPopup()

browser.action.setPopup(
  details: object,
): Promise<void>

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

พารามิเตอร์

รายละเอียด

ออบเจ็กต์
- ป๊อปอัป
  
  สตริง
  
  Relative Path ไปยังไฟล์ HTML ที่จะแสดงในป๊อปอัป หากตั้งค่าเป็นสตริงว่าง ('') ระบบจะไม่แสดงป๊อปอัป
- tabId
  
  number ไม่บังคับ
  
  จำกัดการเปลี่ยนแปลงเฉพาะเมื่อเลือกแท็บที่ต้องการ ระบบจะรีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ

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

Promise<void>

setTitle()

browser.action.setTitle(
  details: object,
): Promise<void>

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

พารามิเตอร์

รายละเอียด

ออบเจ็กต์
- tabId
  
  number ไม่บังคับ
  
  จำกัดการเปลี่ยนแปลงเฉพาะเมื่อเลือกแท็บที่ต้องการ ระบบจะรีเซ็ตโดยอัตโนมัติเมื่อปิดแท็บ
- title
  
  สตริง
  
  สตริงที่การดำเนินการควรแสดงเมื่อวางเมาส์เหนือ

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

Promise<void>

กิจกรรม

onClicked

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

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

พารามิเตอร์

callback

ฟังก์ชัน

พารามิเตอร์ callback จะมีลักษณะดังนี้
```
(tab: tabs.Tab) => void
```
- แท็บ
  
  tabs.Tab

onUserSettingsChanged

Chrome 130 ขึ้นไป browser.* ตั้งแต่ Chrome 148

browser.action.onUserSettingsChanged.addListener(
  callback: function,
)

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

พารามิเตอร์

callback

ฟังก์ชัน

พารามิเตอร์ callback จะมีลักษณะดังนี้
```
(change: UserSettingsChange) => void
```
- เปลี่ยน
  
  UserSettingsChange

browser.action จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

คำอธิบาย

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

ไฟล์ Manifest

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

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

ไอคอน

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

ป้าย

ป๊อปอัป

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

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

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

ตัวอย่าง

แสดงป๊อปอัป

แทรกสคริปต์เนื้อหาเมื่อคลิก

จำลองการดำเนินการด้วย declarativeContent

ประเภท

OpenPopupOptions

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

TabDetails

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

UserSettings

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

UserSettingsChange

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

เมธอด

disable()

พารามิเตอร์

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

enable()

พารามิเตอร์

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

getBadgeBackgroundColor()

พารามิเตอร์

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

getBadgeText()

พารามิเตอร์

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

getBadgeTextColor()

พารามิเตอร์

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

getPopup()

พารามิเตอร์

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

getTitle()

พารามิเตอร์

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

getUserSettings()

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

isEnabled()

พารามิเตอร์

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

openPopup()

พารามิเตอร์

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

setBadgeBackgroundColor()

พารามิเตอร์

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

setBadgeText()

พารามิเตอร์

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

setBadgeTextColor()

พารามิเตอร์

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

setIcon()

พารามิเตอร์

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

setPopup()

พารามิเตอร์

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

setTitle()

พารามิเตอร์

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

กิจกรรม

onClicked

พารามิเตอร์

onUserSettingsChanged

พารามิเตอร์

browser.action