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.5x หรือ 1.2x กำลังได้รับความนิยมมากขึ้น เราจึงขอแนะนำให้คุณระบุไอคอนหลายขนาด 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

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

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

เมธอด

getPopup()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • callback

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

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

    (result: string) => void

    • ผลลัพธ์

      สตริง

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

  • Promise<string>

    Chrome 101 ขึ้นไป

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

getTitle()

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

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

พารามิเตอร์

  • รายละเอียด

    TabDetails

  • callback

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

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

    (result: string) => void

    • ผลลัพธ์

      สตริง

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

  • Promise<string>

    Chrome 101 ขึ้นไป

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

hide()

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

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

พารามิเตอร์

  • tabId

    ตัวเลข

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

  • callback

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

    Chrome 67 ขึ้นไป

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

    () => void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

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

setIcon()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • iconIndex

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

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

    • imageData

      ImageData | ออบเจ็กต์ ไม่บังคับ

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

    • เส้นทาง

      สตริง | ออบเจ็กต์ ไม่บังคับ

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

    • tabId

      ตัวเลข

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

  • callback

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

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

    () => void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

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

setPopup()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • ป๊อปอัป

      สตริง

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

    • tabId

      ตัวเลข

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

  • callback

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

    Chrome 67 ขึ้นไป

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

    () => void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

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

setTitle()

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

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

พารามิเตอร์

  • รายละเอียด

    ออบเจ็กต์

    • tabId

      ตัวเลข

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

    • title

      สตริง

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

  • callback

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

    Chrome 67 ขึ้นไป

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

    () => void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

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

show()

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

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

พารามิเตอร์

  • tabId

    ตัวเลข

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

  • callback

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

    Chrome 67 ขึ้นไป

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

    () => void

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

  • Promise<void>

    Chrome 101 ขึ้นไป

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

กิจกรรม

onClicked

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

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

พารามิเตอร์

  • callback

    ฟังก์ชัน

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

    (tab: tabs.Tab) => void