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 ของส่วนขยาย ฟังก์ชันนอกหน้าจอ 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 ในเมธอดการตั้งค่าของ API action ตัวอย่างเช่น หากต้องการ ตั้งค่าข้อความป้ายสำหรับแท็บที่เฉพาะเจาะจง ให้ทำดังต่อไปนี้

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

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

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

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

โดยค่าเริ่มต้น การทำงานของแถบเครื่องมือจะเปิดใช้ (คลิกได้) ในทุกแท็บ คุณสามารถควบคุมตัวเลือกนี้ได้โดยใช้ 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

    boolean

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

UserSettingsChange

รอดำเนินการ

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

  • isOnToolbar

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

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

เมธอด

disable()

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

ปิดใช้การดำเนินการของแท็บ

พารามิเตอร์

  • tabId

    หมายเลข ไม่บังคับ

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

  • Callback

    ไม่บังคับ

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

    () => void

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

  • คำมั่นสัญญา<โมฆะ>

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

enable()

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

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

พารามิเตอร์

  • tabId

    หมายเลข ไม่บังคับ

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

  • Callback

    ไม่บังคับ

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

    () => void

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

  • คำมั่นสัญญา<โมฆะ>

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

getBadgeBackgroundColor()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ไม่บังคับ

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

    (result: ColorArray) => void

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

  • Promise&lt;browserAction.ColorArray&gt;

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

getBadgeText()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ไม่บังคับ

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

    (result: string) => void

    • ผลลัพธ์

      สตริง

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

  • คำมั่นสัญญา<สตริง>

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

getBadgeTextColor()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ไม่บังคับ

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

    (result: ColorArray) => void

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

  • Promise&lt;browserAction.ColorArray&gt;

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

getPopup()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ไม่บังคับ

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

    (result: string) => void

    • ผลลัพธ์

      สตริง

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

  • คำมั่นสัญญา<สตริง>

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

getTitle()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ไม่บังคับ

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

    (result: string) => void

    • ผลลัพธ์

      สตริง

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

  • คำมั่นสัญญา<สตริง>

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

getUserSettings()

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

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

พารามิเตอร์

  • Callback

    ไม่บังคับ

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

    (userSettings: UserSettings) => void

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

  • Promise&lt;UserSettings&gt;

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

isEnabled()

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

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

พารามิเตอร์

  • tabId

    หมายเลข ไม่บังคับ

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

  • Callback

    ไม่บังคับ

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

    (isEnabled: boolean) => void

    • isEnabled

      boolean

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

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

  • Promise&lt;boolean&gt;

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

openPopup()

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

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

พารามิเตอร์

  • ตัวเลือก

    OpenPopupOptions ไม่บังคับ

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

  • Callback

    ไม่บังคับ

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

    () => void

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

  • คำมั่นสัญญา<โมฆะ>

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

setBadgeBackgroundColor()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • สี

      string | ColorArray

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

    • tabId

      หมายเลข ไม่บังคับ

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

  • Callback

    ไม่บังคับ

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

    () => void

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

  • คำมั่นสัญญา<โมฆะ>

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

setBadgeText()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • tabId

      หมายเลข ไม่บังคับ

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

    • ข้อความ

      string ไม่บังคับ

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

  • Callback

    ไม่บังคับ

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

    () => void

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

  • คำมั่นสัญญา<โมฆะ>

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

setBadgeTextColor()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • สี

      string | ColorArray

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

    • tabId

      หมายเลข ไม่บังคับ

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

  • Callback

    ไม่บังคับ

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

    () => void

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

  • คำมั่นสัญญา<โมฆะ>

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

setIcon()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • ข้อมูลรูปภาพ

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

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

    • เส้นทาง

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

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

    • tabId

      หมายเลข ไม่บังคับ

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

  • Callback

    ไม่บังคับ

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

    () => void

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

  • คำมั่นสัญญา<โมฆะ>

    Chrome 96 ขึ้นไป

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

setPopup()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • ป๊อปอัป

      สตริง

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

    • tabId

      หมายเลข ไม่บังคับ

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

  • Callback

    ไม่บังคับ

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

    () => void

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

  • คำมั่นสัญญา<โมฆะ>

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

setTitle()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • tabId

      หมายเลข ไม่บังคับ

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

    • title

      สตริง

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

  • Callback

    ไม่บังคับ

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

    () => void

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

  • คำมั่นสัญญา<โมฆะ>

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

กิจกรรม

onClicked

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

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

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (tab: tabs.Tab) => void

onUserSettingsChanged

รอดำเนินการ
chrome.action.onUserSettingsChanged.addListener(
  callback: function,
)

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

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (change: UserSettingsChange) => void