chrome.browserAction

refresh date: 2026-09-25 robots: noindex

คำอธิบาย

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

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

หากต้องการสร้างไอคอนที่ไม่ทำงานตลอดเวลา ให้ใช้การดำเนินการในหน้าเว็บแทนการดำเนินการในเบราว์เซอร์

ไฟล์ Manifest

ลงทะเบียนการดำเนินการของเบราว์เซอร์ในไฟล์ Manifest ของส่วนขยายดังนี้

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {                // optional
      "16": "images/icon16.png",     // optional
      "24": "images/icon24.png",     // optional
      "32": "images/icon32.png"      // optional
    },
    "default_title": "Google Mail",  // optional, shown in tooltip
    "default_popup": "popup.html"    // optional
  },
  ...
}

คุณสามารถระบุไอคอนขนาดใดก็ได้เพื่อใช้ใน Chrome และ Chrome จะเลือกไอคอนที่ใกล้เคียงที่สุดและปรับขนาด ให้มีขนาดที่เหมาะสมเพื่อเติมเต็มพื้นที่ 16 DIP อย่างไรก็ตาม หากไม่ได้ระบุขนาดที่แน่นอน การปรับขนาดนี้อาจทำให้ไอคอนสูญเสียรายละเอียดหรือดูเบลอ

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

ระบบยังคงรองรับไวยากรณ์เก่าสำหรับการลงทะเบียนไอคอนเริ่มต้น

{
  "name": "My extension",
  ...
  "browser_action": {
    ...
    "default_icon": "images/icon32.png"  // optional
    // equivalent to "default_icon": { "32": "images/icon32.png" }
  },
  ...
}

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

การดำเนินการของเบราว์เซอร์อาจมีไอคอน เคล็ดลับเครื่องมือ ป้าย และป๊อปอัป

ไอคอน

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

คุณตั้งค่าไอคอนได้ 2 วิธี ได้แก่ ใช้รูปภาพแบบคงที่หรือใช้องค์ประกอบ canvas ของ HTML5 การใช้ รูปภาพแบบคงที่นั้นง่ายกว่าสำหรับแอปพลิเคชันอย่างง่าย แต่คุณสามารถสร้าง UI แบบไดนามิกมากขึ้น เช่น ภาพเคลื่อนไหวที่ราบรื่น โดยใช้องค์ประกอบ Canvas

รูปภาพนิ่งสามารถอยู่ในรูปแบบใดก็ได้ที่ WebKit แสดงได้ ซึ่งรวมถึง BMP, GIF, ICO, JPEG หรือ PNG สำหรับส่วนขยายที่ไม่ได้แพ็ก รูปภาพต้องอยู่ในรูปแบบ PNG

หากต้องการตั้งค่าไอคอน ให้ใช้ฟิลด์ default_icon ของ browser_action ใน manifest หรือเรียกใช้เมธอด browserAction.setIcon

หากต้องการแสดงไอคอนอย่างถูกต้องเมื่อความหนาแน่นของพิกเซลหน้าจอ (อัตราส่วน size_in_pixel / size_in_dip) ไม่เท่ากับ 1 คุณสามารถกำหนดไอคอนเป็นชุดรูปภาพที่มีขนาดต่างๆ ได้ ระบบจะเลือกรูปภาพจริงที่จะแสดงจากชุดรูปภาพให้เหมาะสมกับขนาดพิกเซล 16 DIP มากที่สุด ชุดไอคอนอาจมีข้อกำหนดไอคอนขนาดใดก็ได้ และ Chrome จะเลือกไอคอนที่เหมาะสมที่สุด

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

หากต้องการตั้งค่าเคล็ดลับเครื่องมือ ให้ใช้ฟิลด์ default_title ของ browser_action ใน manifest หรือ เรียกใช้เมธอด browserAction.setTitle คุณระบุสตริงเฉพาะภาษาสำหรับฟิลด์ default_title ได้ โปรดดูรายละเอียดที่การทำให้เป็นสากล

ป้าย

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

เนื่องจากป้ายมีพื้นที่จำกัด จึงควรมีอักขระไม่เกิน 4 ตัว

ตั้งค่าข้อความและสีของป้ายโดยใช้ browserAction.setBadgeText และ browserAction.setBadgeBackgroundColor ตามลำดับ

ป๊อปอัป

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

หากต้องการเพิ่มป๊อปอัปไปยังการดำเนินการของเบราว์เซอร์ ให้สร้างไฟล์ HTML ที่มีเนื้อหาของป๊อปอัป ระบุไฟล์ HTML ในช่อง default_popup ของ browser_action ใน manifest หรือเรียกใช้เมธอด browserAction.setPopup

เคล็ดลับ

โปรดปฏิบัติตามหลักเกณฑ์ต่อไปนี้เพื่อให้ได้ภาพที่น่าสนใจที่สุด

• ทำ ใช้การดำเนินการของเบราว์เซอร์สำหรับฟีเจอร์ที่สมเหตุสมผลในหน้าเว็บส่วนใหญ่
• อย่าใช้การดำเนินการของเบราว์เซอร์กับฟีเจอร์ที่เหมาะกับหน้าเว็บเพียงไม่กี่หน้า โปรดใช้ page actions แทน
• ใช้ไอคอนขนาดใหญ่และมีสีสันสดใสซึ่งใช้พื้นที่ 16x16 dp ได้อย่างคุ้มค่า ไอคอนการดำเนินการของเบราว์เซอร์ ควรมีขนาดใหญ่และหนากว่าไอคอนการดำเนินการของหน้าเว็บเล็กน้อย
• อย่าพยายามเลียนแบบไอคอนเมนูขาวดำของ Google Chrome ซึ่งไม่ค่อยเหมาะกับธีม และอย่างไรก็ตาม ส่วนขยายควรโดดเด่นเล็กน้อย
• ทำ ใช้ความโปร่งใสแบบอัลฟ่าเพื่อเพิ่มขอบที่นุ่มนวลให้กับไอคอน เนื่องจากผู้ใช้จำนวนมากใช้ธีม ไอคอนของคุณจึงควรดูดีบนพื้นหลังสีต่างๆ
• อย่าสร้างภาพเคลื่อนไหวให้ไอคอนอยู่ตลอดเวลา ซึ่งเป็นเรื่องที่น่ารำคาญ

ตัวอย่าง

คุณดูตัวอย่างการใช้การดำเนินการของเบราว์เซอร์อย่างง่ายได้ในไดเรกทอรี examples/api/browserAction ดูตัวอย่างอื่นๆ และความช่วยเหลือในการดูซอร์สโค้ดได้ที่ตัวอย่าง

chrome.browserAction.disable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.enable(
  tabId?: number,
  callback?: function,
): Promise<void>

chrome.browserAction.getBadgeBackgroundColor(
  details: TabDetails,
  callback?: function,
): Promise<extensionTypes.ColorArray>

chrome.browserAction.getBadgeText(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getPopup(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.getTitle(
  details: TabDetails,
  callback?: function,
): Promise<string>

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setBadgeText(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setIcon(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setPopup(
  details: object,
  callback?: function,
): Promise<void>

chrome.browserAction.setTitle(
  details: object,
  callback?: function,
): Promise<void>

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