chrome.browserAction

คำอธิบาย

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

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

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

ไฟล์ 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

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

Icon

ไอคอนการดำเนินการของเบราว์เซอร์ใน 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 dip ได้อย่างคุ้มค่า ไอคอนการทำงานของเบราว์เซอร์ ควรมีขนาดใหญ่และหนากว่าไอคอนการทำงานของหน้าเว็บเล็กน้อย
• อย่าพยายามเลียนแบบไอคอนเมนูขาวดำของ 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,
)