chrome.pageAction

คำอธิบาย

ใช้ chrome.pageAction API เพื่อวางไอคอนในแถบเครื่องมือหลักของ Google Chrome ทางด้านขวาของแถบที่อยู่ การดำเนินการของหน้าเว็บคือการดำเนินการที่ทำได้ในหน้าปัจจุบัน แต่ไม่ได้ใช้กับหน้าเว็บทั้งหมด การดำเนินการของหน้าเว็บจะแสดงเป็นสีเทาเมื่อไม่มีการใช้งาน

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

≤ MV2

ตัวอย่างมีดังต่อไปนี้

  • สมัครรับฟีด RSS ของหน้านี้
  • สร้างภาพสไลด์จากรูปภาพของหน้านี้

ไอคอน RSS ในภาพหน้าจอต่อไปนี้แสดงการทำงานของหน้าเว็บที่ช่วยให้คุณสมัครรับข้อมูลฟีด RSS สำหรับหน้าปัจจุบันได้

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

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

ไฟล์ Manifest

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

{
  "name": "My extension",
  ...
  "page_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
  },
  ...
}

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

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

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

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

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

คุณทำให้การดำเนินการของหน้าเว็บปรากฏขึ้นและเป็นสีเทาโดยใช้เมธอด pageAction.show และ pageAction.hide ตามลำดับ การดำเนินการของหน้าเว็บจะเป็นสีเทาโดยค่าเริ่มต้น เมื่อคุณแสดงไอคอน ให้กำหนดแท็บที่ไอคอนควรปรากฏ ไอคอนจะยังคงปรากฏจนกว่าแท็บจะปิด หรือเริ่มต้นแสดง URL อื่น (เช่น เนื่องจากผู้ใช้คลิกลิงก์)

เคล็ดลับ

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

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

ประเภท

ImageDataType

ข้อมูลพิกเซลสำหรับรูปภาพ ต้องเป็นออบเจ็กต์ ImageData (เช่น จากองค์ประกอบ canvas)

ประเภท

ImageData

TabDetails

Chrome เวอร์ชัน 88 ขึ้นไป

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

  • tabId

    ตัวเลข ไม่บังคับ

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

วิธีการ

getPopup()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ฟังก์ชัน ไม่บังคับ

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

    (result: string)=>void

    • ผลลัพธ์

      string

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

  • คำสัญญา<string>

    Chrome 101 ขึ้นไป

    Promiss รองรับเฉพาะไฟล์ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ

getTitle()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ฟังก์ชัน ไม่บังคับ

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

    (result: string)=>void

    • ผลลัพธ์

      string

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

  • คำสัญญา<string>

    Chrome 101 ขึ้นไป

    Promiss รองรับเฉพาะไฟล์ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ

hide()

สัญญา 
chrome.pageAction.hide(
  tabId: number,
  callback?: function,
)

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

พารามิเตอร์

  • tabId

    ตัวเลข

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

  • Callback

    ฟังก์ชัน ไม่บังคับ

    Chrome เวอร์ชัน 67 ขึ้นไป

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

    ()=>void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

    Promiss รองรับเฉพาะไฟล์ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ

setIcon()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • iconIndex

      ตัวเลข ไม่บังคับ

      เลิกใช้งานแล้ว ระบบจะไม่สนใจอาร์กิวเมนต์นี้

    • imageData

      ImageData|object ไม่บังคับ

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

    • เส้นทาง

      string|object ไม่บังคับ

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

    • tabId

      ตัวเลข

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

  • Callback

    ฟังก์ชัน ไม่บังคับ

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

    ()=>void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

    Promiss รองรับเฉพาะไฟล์ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ

setPopup()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • ป๊อปอัป

      string

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

    • tabId

      ตัวเลข

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

  • Callback

    ฟังก์ชัน ไม่บังคับ

    Chrome เวอร์ชัน 67 ขึ้นไป

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

    ()=>void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

    Promiss รองรับเฉพาะไฟล์ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ

setTitle()

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

ตั้งชื่อการดำเนินการของหน้าเว็บ โดยจะแสดงเป็นเคล็ดลับเครื่องมือเหนือการทำงานของหน้าเว็บ

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • tabId

      ตัวเลข

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

    • title

      string

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

  • Callback

    ฟังก์ชัน ไม่บังคับ

    Chrome เวอร์ชัน 67 ขึ้นไป

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

    ()=>void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

    Promiss รองรับเฉพาะไฟล์ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ

show()

สัญญา 
chrome.pageAction.show(
  tabId: number,
  callback?: function,
)

แสดงการทำงานของหน้าเว็บ การดำเนินการของหน้าเว็บจะแสดงเมื่อคุณเลือกแท็บ

พารามิเตอร์

  • tabId

    ตัวเลข

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

  • Callback

    ฟังก์ชัน ไม่บังคับ

    Chrome เวอร์ชัน 67 ขึ้นไป

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

    ()=>void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

    Promiss รองรับเฉพาะไฟล์ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ

กิจกรรม

onClicked

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

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

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (tab: tabs.Tab)=>void