คำอธิบาย
ใช้ chrome.pageAction
API เพื่อวางไอคอนในแถบเครื่องมือหลักของ Google Chrome ทางด้านขวาของแถบที่อยู่ การดำเนินการของหน้าเว็บคือการดำเนินการที่ทำได้ในหน้าปัจจุบัน แต่ไม่ได้ใช้กับหน้าเว็บทั้งหมด การดำเนินการของหน้าเว็บจะแสดงเป็นสีเทาเมื่อไม่มีการใช้งาน
ความพร้อมใช้งาน
ตัวอย่างมีดังต่อไปนี้
- สมัครรับฟีด 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
พร็อพเพอร์ตี้
-
tabId
ตัวเลข ไม่บังคับ
รหัสของแท็บสถานะการค้นหา หากไม่มีการระบุแท็บ ระบบจะแสดงผลสถานะที่ไม่ใช่แท็บเฉพาะ
วิธีการ
getPopup()
chrome.pageAction.getPopup(
details: TabDetails,
callback?: function,
)
รับเอกสาร HTML ที่ตั้งค่าเป็นป๊อปอัปสำหรับการดำเนินการกับหน้านี้
พารามิเตอร์
-
รายละเอียด
-
Callback
ฟังก์ชัน ไม่บังคับ
พารามิเตอร์
callback
มีลักษณะดังนี้(result: string) => void
-
ผลลัพธ์
string
-
การคืนสินค้า
-
คำสัญญา<string>
Chrome 101 ขึ้นไปPromiss รองรับเฉพาะไฟล์ Manifest V3 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ
getTitle()
chrome.pageAction.getTitle(
details: TabDetails,
callback?: function,
)
รับชื่อของการดำเนินการของหน้าเว็บ
พารามิเตอร์
-
รายละเอียด
-
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 | ออบเจ็กต์ ไม่บังคับ
เป็นออบเจ็กต์ 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 ขึ้นไป ส่วนแพลตฟอร์มอื่นๆ จะต้องใช้โค้ดเรียกกลับ