chrome.readingList

คำอธิบาย

ใช้ chrome.readingList API เพื่ออ่านและแก้ไขรายการในเรื่องรออ่าน

สิทธิ์

readingList

หากต้องการใช้ Reading List API ให้เพิ่มสิทธิ์ "readingList" ในไฟล์ manifest ของส่วนขยาย

manifest.json:

{
  "name": "My reading list extension",
  ...
  "permissions": [
    "readingList"
  ]
}

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

Chrome 120 ขึ้นไป MV3 ขึ้นไป

Chrome มีเรื่องรออ่านอยู่ในแผงด้านข้าง ซึ่งช่วยให้ผู้ใช้บันทึกหน้าเว็บไว้อ่านภายหลังหรืออ่านขณะออฟไลน์ได้ ใช้ Reading List API เพื่อเรียกข้อมูลรายการที่มีอยู่ และเพิ่มหรือนำรายการออกจากรายการ

เรื่องรออ่านที่แสดงบทความจำนวนหนึ่ง
เรื่องรออ่านที่แสดงจำนวนบทความ

แนวคิดและการใช้งาน

การจัดเรียงสินค้า

รายการในเรื่องรออ่านไม่ได้อยู่ในลำดับที่แน่นอน

เอกลักษณ์ของสินค้า

รายการจะคีย์ตาม URL ซึ่งรวมถึงแฮชและสตริงการค้นหา

กรณีการใช้งาน

ส่วนต่อไปนี้แสดงกรณีการใช้งานทั่วไปบางรายการของ Reading List API ดูตัวอย่างส่วนขยายทั้งหมดได้ที่ตัวอย่างส่วนขยาย

เพิ่มรายการ

หากต้องการเพิ่มรายการลงในเรื่องรออ่าน ให้ใช้ chrome.readingList.addEntry() โดยทำดังนี้

chrome.readingList.addEntry({
  title: "New to the web platform in September | web.dev",
  url: "https://developer.chrome.com/",
  hasBeenRead: false
});

แสดงรายการ

หากต้องการแสดงรายการจากรายการอ่าน ให้ใช้เมธอด chrome.readingList.query() เพื่อเรียกข้อมูลเหล่านั้นขึ้นมา 

const items = await chrome.readingList.query({});

for (const item of items) {
  // Do something do display the item
}

ทำเครื่องหมายรายการว่าอ่านแล้ว

คุณใช้ chrome.readingList.updateEntry() เพื่ออัปเดตชื่อ, URL และสถานะการอ่านได้ โค้ดต่อไปนี้จะทําเครื่องหมายรายการว่าอ่านแล้ว

chrome.readingList.updateEntry({
  url: "https://developer.chrome.com/",
  hasBeenRead: true
});

นำรายการออก

หากต้องการนำรายการออก ให้ใช้ chrome.readingList.removeEntry() โดยทำดังนี้

chrome.readingList.removeEntry({
  url: "https://developer.chrome.com/"
});

ตัวอย่างชิ้นงาน

ดูการสาธิตส่วนขยาย Reading List API เพิ่มเติมได้ในตัวอย่าง Reading List API

ประเภท

AddEntryOptions

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

  • hasBeenRead

    บูลีน

    จะมีค่าเป็น true หากมีการอ่านรายการ

  • title

    สตริง

    ชื่อของรายการ

  • URL

    สตริง

    URL ของรายการ

QueryInfo

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

  • hasBeenRead

    บูลีน ไม่บังคับ

    ระบุว่าจะค้นหารายการที่อ่านแล้ว (true) หรือยังไม่อ่าน (false)

  • title

    สตริง ไม่บังคับ

    ชื่อที่จะค้นหา

  • URL

    สตริง ไม่บังคับ

    URL ที่จะค้นหา

ReadingListEntry

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

  • creationTime

    ตัวเลข

    เวลาที่สร้างรายการ บันทึกเป็นมิลลิวินาทีนับตั้งแต่วันที่ 1 ม.ค. 1970

  • hasBeenRead

    บูลีน

    จะมีค่าเป็น true หากมีการอ่านรายการ

  • lastUpdateTime

    ตัวเลข

    ครั้งล่าสุดที่อัปเดตรายการ ค่านี้เป็นมิลลิวินาทีนับตั้งแต่วันที่ 1 มกราคม 1970

  • title

    สตริง

    ชื่อของรายการ

  • URL

    สตริง

    URL ของรายการ

RemoveOptions

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

  • URL

    สตริง

    URL ที่จะนําออก

UpdateEntryOptions

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

  • hasBeenRead

    บูลีน ไม่บังคับ

    สถานะการอ่านที่อัปเดต สถานะที่มีอยู่จะยังคงอยู่หากไม่ได้ระบุค่า

  • title

    สตริง ไม่บังคับ

    ชื่อใหม่ ไทล์ที่มีอยู่จะยังคงอยู่หากไม่ได้ระบุค่า

  • URL

    สตริง

    URL ที่จะอัปเดต

เมธอด

addEntry()

สัญญา 
chrome.readingList.addEntry(
  entry: AddEntryOptions,
  callback?: function,
)

เพิ่มรายการลงในเรื่องรออ่านหากยังไม่มี

พารามิเตอร์

  • รายการ

    AddEntryOptions

    รายการที่จะเพิ่มไปยังเรื่องรออ่าน

  • Callback

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

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

    () => void

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

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่ก็มีคอลแบ็กไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

query()

สัญญา 
chrome.readingList.query(
  info: QueryInfo,
  callback?: function,
)

ดึงข้อมูลรายการทั้งหมดที่ตรงกับพร็อพเพอร์ตี้ QueryInfo ระบบจะไม่จับคู่ที่พักที่ไม่ได้ระบุ

พารามิเตอร์

  • ข้อมูล

    QueryInfo

    พร็อพเพอร์ตี้ที่จะค้นหา

  • Callback

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

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

    (entries: ReadingListEntry[]) => void

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

  • Promise<ReadingListEntry[]>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่ก็มีคอลแบ็กไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

removeEntry()

สัญญา 
chrome.readingList.removeEntry(
  info: RemoveOptions,
  callback?: function,
)

นำรายการออกจากเรื่องรออ่าน หากมี

พารามิเตอร์

  • ข้อมูล

    RemoveOptions

    รายการที่จะนำออกจากเรื่องรออ่าน

  • Callback

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

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

    () => void

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

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่ก็มีคอลแบ็กไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

updateEntry()

สัญญา 
chrome.readingList.updateEntry(
  info: UpdateEntryOptions,
  callback?: function,
)

อัปเดตรายการในรายการอ่าน (หากมี)

พารามิเตอร์

  • ข้อมูล

    UpdateEntryOptions

    รายการที่จะอัปเดต

  • Callback

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

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

    () => void

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

  • Promise<void>

    ไฟล์ Manifest เวอร์ชัน 3 ขึ้นไปรองรับ Promise แต่ก็มีคอลแบ็กไว้เพื่อให้ใช้กับเวอร์ชันก่อนหน้าได้ คุณใช้ทั้ง 2 รูปแบบในการเรียกใช้ฟังก์ชันเดียวกันไม่ได้ พรอมต์จะได้รับการแก้ไขด้วยประเภทเดียวกันกับที่ส่งไปยังการเรียกกลับ

กิจกรรม

onEntryAdded

chrome.readingList.onEntryAdded.addListener(
  callback: function,
)

ทริกเกอร์เมื่อเพิ่ม ReadingListEntry ไปยังเรื่องรออ่าน

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (entry: ReadingListEntry) => void

onEntryRemoved

chrome.readingList.onEntryRemoved.addListener(
  callback: function,
)

ทริกเกอร์เมื่อนำ ReadingListEntry ออกจากเรื่องรออ่าน

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (entry: ReadingListEntry) => void

onEntryUpdated

chrome.readingList.onEntryUpdated.addListener(
  callback: function,
)

ทริกเกอร์เมื่อมีการอัปเดต ReadingListEntry ในรายการอ่าน

พารามิเตอร์

  • Callback

    ฟังก์ชัน

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

    (entry: ReadingListEntry) => void