chrome.pageAction

refresh date: 2026-09-25 robots: noindex

คำอธิบาย

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

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

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

    number ไม่บังคับ

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

เมธอด

getPopup()

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

รับชุดเอกสาร HTML เป็นป๊อปอัปสำหรับการดำเนินการของหน้านี้

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • callback

    function ไม่บังคับ

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

    (result: string) => void

    • ผลลัพธ์

      สตริง

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

  • Promise<string>

    Chrome 101 ขึ้นไป

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

getTitle()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • callback

    function ไม่บังคับ

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

    (result: string) => void

    • ผลลัพธ์

      สตริง

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

  • Promise<string>

    Chrome 101 ขึ้นไป

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

hide()

Promise 
chrome.pageAction.hide(
  tabId: number,
  callback?: function,
): Promise<void>

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

พารามิเตอร์

  • tabId

    ตัวเลข

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

  • callback

    function ไม่บังคับ

    Chrome 67 ขึ้นไป

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

    () => void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

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

setIcon()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • iconIndex

      number ไม่บังคับ

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

    • imageData

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

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

    • เส้นทาง

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

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

    • tabId

      ตัวเลข

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

  • callback

    function ไม่บังคับ

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

    () => void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

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

setPopup()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • ป๊อปอัป

      สตริง

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

    • tabId

      ตัวเลข

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

  • callback

    function ไม่บังคับ

    Chrome 67 ขึ้นไป

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

    () => void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

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

setTitle()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • tabId

      ตัวเลข

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

    • title

      สตริง

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

  • callback

    function ไม่บังคับ

    Chrome 67 ขึ้นไป

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

    () => void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

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

show()

Promise 
chrome.pageAction.show(
  tabId: number,
  callback?: function,
): Promise<void>

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

พารามิเตอร์

  • tabId

    ตัวเลข

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

  • callback

    function ไม่บังคับ

    Chrome 67 ขึ้นไป

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

    () => void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

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

กิจกรรม

onClicked

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

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

พารามิเตอร์

  • callback

    ฟังก์ชัน

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

    (tab: tabs.Tab) => void