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 ลดลง ซึ่งช่วยให้แน่ใจว่าหาก ขนาดการแสดงผลไอคอน มีการเปลี่ยนแปลง ต้องทำงานมากขึ้นเพื่อสร้างไอคอนต่างๆ! แต่ถ้าขนาดแตกต่างกันมากเกินไป การปรับขนาดนี้อาจทําให้ไอคอนเสียรายละเอียดหรือดูไม่ชัด

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

{
  "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

    • ผลลัพธ์

      สตริง

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

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

    Chrome 101 ขึ้นไป

    Promise รองรับไฟล์ Manifest V3 ขึ้นไปเท่านั้น ส่วนแพลตฟอร์มอื่นๆ ต้องใช้ Callback

getTitle()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • Callback

    ไม่บังคับ

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

    (result: string) => void

    • ผลลัพธ์

      สตริง

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

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

    Chrome 101 ขึ้นไป

    Promise รองรับไฟล์ Manifest V3 ขึ้นไปเท่านั้น ส่วนแพลตฟอร์มอื่นๆ ต้องใช้ Callback

hide()

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

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

พารามิเตอร์

  • tabId

    ตัวเลข

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

  • Callback

    ไม่บังคับ

    Chrome 67 ขึ้นไป

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

    () => void

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

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

    Chrome 101 ขึ้นไป

    Promise รองรับไฟล์ Manifest V3 ขึ้นไปเท่านั้น ส่วนแพลตฟอร์มอื่นๆ ต้องใช้ Callback

setIcon()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • iconIndex

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

      เลิกใช้งานแล้ว อาร์กิวเมนต์นี้จะถูกละเว้น

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

      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 101 ขึ้นไป

    Promise รองรับไฟล์ Manifest V3 ขึ้นไปเท่านั้น ส่วนแพลตฟอร์มอื่นๆ ต้องใช้ Callback

setPopup()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • ป๊อปอัป

      สตริง

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

    • tabId

      ตัวเลข

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

  • Callback

    ไม่บังคับ

    Chrome 67 ขึ้นไป

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

    () => void

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

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

    Chrome 101 ขึ้นไป

    Promise รองรับไฟล์ Manifest V3 ขึ้นไปเท่านั้น ส่วนแพลตฟอร์มอื่นๆ ต้องใช้ Callback

setTitle()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • tabId

      ตัวเลข

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

    • title

      สตริง

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

  • Callback

    ไม่บังคับ

    Chrome 67 ขึ้นไป

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

    () => void

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

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

    Chrome 101 ขึ้นไป

    Promise รองรับไฟล์ Manifest V3 ขึ้นไปเท่านั้น ส่วนแพลตฟอร์มอื่นๆ ต้องใช้ Callback

show()

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

แสดงการทำงานของหน้าเว็บ การทำงานของหน้าเว็บจะปรากฏเมื่อมีการเลือกแท็บ

พารามิเตอร์

  • tabId

    ตัวเลข

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

  • Callback

    ไม่บังคับ

    Chrome 67 ขึ้นไป

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

    () => void

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

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

    Chrome 101 ขึ้นไป

    Promise รองรับไฟล์ Manifest V3 ขึ้นไปเท่านั้น ส่วนแพลตฟอร์มอื่นๆ ต้องใช้ Callback

กิจกรรม

onClicked

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

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

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (tab: tabs.Tab) => void