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 จุด อย่างไรก็ตาม หากไม่ได้ระบุขนาดที่แน่นอน การลดขนาดอาจทำให้ไอคอนสูญเสียรายละเอียดหรือดูเบลอ

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

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

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

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

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

Icon

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

คุณตั้งค่าไอคอนได้ 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 ดิปให้ได้มากที่สุด ไอคอนการดำเนินการในเบราว์เซอร์ควรดูใหญ่กว่าและหนักกว่าไอคอนการดำเนินการบนหน้าเว็บเล็กน้อย
• อย่าพยายามเลียนแบบไอคอนเมนูโมโนโครมของ Google Chrome การดำเนินการดังกล่าวไม่เหมาะกับธีม และส่วนขยายควรโดดเด่นขึ้นมาบ้าง
• ควรใช้ความโปร่งแสงอัลฟ่าเพื่อเพิ่มขอบที่นุ่มนวลให้กับไอคอน เนื่องจากผู้ใช้จำนวนมากใช้ธีม ไอคอนของคุณจึงควรดูดีในพื้นหลังสีต่างๆ
• อย่าทำให้ไอคอนเคลื่อนไหวอย่างต่อเนื่อง ปัญหานี้น่ารำคาญมาก

ตัวอย่าง

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

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

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

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

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

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

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

chrome.browserAction.setBadgeBackgroundColor(
  details: object,
  callback?: function,
)

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

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

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

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

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