สร้างส่วนขยายแรกที่แทรกองค์ประกอบใหม่ในหน้าเว็บ
ภาพรวม
บทแนะนำนี้จะสร้างส่วนขยายที่เพิ่มเวลาการอ่านที่คาดไว้ให้กับส่วนขยาย Chrome และ หน้าเอกสารประกอบของ Chrome เว็บสโตร์
![การขยายเวลาการอ่านในหน้ายินดีต้อนรับของส่วนขยาย](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/reading-extension-the-e-0070620f12665.png?authuser=19&hl=th)
ในคู่มือนี้ เราจะอธิบายแนวคิดต่อไปนี้
- ไฟล์ Manifest ของส่วนขยาย
- ไอคอนขนาดใดที่ส่วนขยายใช้
- วิธีแทรกโค้ดลงในหน้าเว็บโดยใช้สคริปต์เนื้อหา
- วิธีใช้รูปแบบการจับคู่
- สิทธิ์ของส่วนขยาย
ก่อนจะเริ่ม
คู่มือนี้จะถือว่าคุณมีประสบการณ์พื้นฐานในการพัฒนาเว็บ เราขอแนะนำให้ดูที่ บทแนะนำ สวัสดีโลก สำหรับข้อมูลเบื้องต้นเกี่ยวกับเวิร์กโฟลว์การพัฒนาส่วนขยาย
สร้างส่วนขยาย
ในการเริ่มต้น ให้สร้างไดเรกทอรีใหม่ที่ชื่อว่า reading-time
เพื่อเก็บไฟล์ของส่วนขยาย หากคุณ
คุณสามารถดาวน์โหลดซอร์สโค้ดที่สมบูรณ์จาก GitHub ได้
ขั้นตอนที่ 1: เพิ่มข้อมูลเกี่ยวกับส่วนขยาย
ต้องการไฟล์ Manifest JSON เพียงไฟล์เดียว ซึ่งมีข้อมูลสำคัญเกี่ยวกับ
ส่วนขยาย สร้างไฟล์ manifest.json
ในรูทของโปรเจ็กต์และเพิ่มโค้ดต่อไปนี้
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
คีย์เหล่านี้มีข้อมูลเมตาพื้นฐานสำหรับส่วนขยาย โดยจะควบคุมการแสดงส่วนขยายในหน้าส่วนขยายและเมื่อเผยแพร่ใน Chrome เว็บสโตร์ หากต้องการเจาะลึกมากขึ้น ให้ไปที่
คีย์ "name"
, "version"
และ "description"
บน
ไฟล์ Manifest หน้าภาพรวม
💡 ข้อเท็จจริงอื่นๆ เกี่ยวกับไฟล์ Manifest ของส่วนขยาย
- ซึ่งต้องอยู่ที่รากของโปรเจ็กต์
- คีย์ที่จำเป็นมีเพียง
"manifest_version"
,"name"
และ"version"
- เบราว์เซอร์นี้รองรับความคิดเห็น (
//
) ในระหว่างการพัฒนา แต่ต้องนำความคิดเห็นเหล่านี้ออกก่อนที่จะอัปโหลดโค้ดไปยัง Chrome เว็บสโตร์
ขั้นตอนที่ 2: ระบุไอคอน
แล้วทำไมคุณจึงต้องมีไอคอนด้วย แม้ว่าไอคอนจะเป็นตัวเลือกที่ไม่บังคับในระหว่างการพัฒนา แต่ก็เป็น หากคุณวางแผนที่จะเผยแพร่ส่วนขยายใน Chrome เว็บสโตร์ และยังปรากฏใน อย่างเช่น หน้าการจัดการส่วนขยาย
สร้างโฟลเดอร์ images
แล้ววางไอคอนไว้ด้านใน คุณสามารถดาวน์โหลดไอคอน
GitHub จากนั้นเพิ่มโค้ดที่ไฮไลต์ลงในไฟล์ Manifest เพื่อประกาศไอคอนดังนี้
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
เราขอแนะนำให้ใช้ไฟล์ PNG แต่อนุญาตให้ใช้รูปแบบไฟล์อื่นๆ ยกเว้นไฟล์ SVG
💡 ไอคอนขนาดต่างๆ เหล่านี้ปรากฏที่ใด
ขนาดไอคอน | การใช้ไอคอน |
---|---|
16x16 | ไอคอน Fav บนหน้าและเมนูตามบริบทของส่วนขยาย |
32x32 | คอมพิวเตอร์ Windows มักต้องใช้ขนาดนี้ |
48x48 | แสดงในหน้าส่วนขยาย |
128x128 | แสดงเมื่อติดตั้งและใน Chrome เว็บสโตร์ |
ขั้นตอนที่ 3: ประกาศสคริปต์เนื้อหา
ส่วนขยายสามารถเรียกใช้สคริปต์ที่อ่านและแก้ไขเนื้อหาของหน้าเว็บ ทั้งหมดนี้เรียกว่าเนื้อหา สคริปต์ โปรแกรมเหล่านี้อาศัยอยู่ในโลกที่โดดเดี่ยว ซึ่งหมายความว่าสามารถเปลี่ยนแปลงสภาพแวดล้อม JavaScript ได้โดยไม่ขัดแย้งกับหน้าโฮสต์หรือส่วนขยายอื่นๆ สคริปต์เนื้อหา
เพิ่มโค้ดต่อไปนี้ลงใน manifest.json
เพื่อลงทะเบียนสคริปต์เนื้อหาที่ชื่อว่า
content.js
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
ฟิลด์ "matches"
อาจมีรูปแบบการจับคู่อย่างน้อย 1 รายการ ซึ่งช่วยให้เบราว์เซอร์
ระบุเว็บไซต์ที่จะแทรกสคริปต์เนื้อหาลงไป รูปแบบการจับคู่ประกอบด้วย 3 ส่วนดังนี้
<scheme>://<host><path>
มีคำว่า "*
" ได้ อักขระ
💡 ส่วนขยายนี้จะแสดงคำเตือนเกี่ยวกับสิทธิ์ไหม
เมื่อผู้ใช้ติดตั้งส่วนขยาย เบราว์เซอร์จะแจ้งให้ผู้ใช้ทราบว่าส่วนขยายสามารถทำอะไรได้บ้าง สคริปต์เนื้อหาขอสิทธิ์ให้ทำงานในเว็บไซต์ที่ตรงกับเกณฑ์รูปแบบการจับคู่
ในตัวอย่างนี้ ผู้ใช้จะเห็นคำเตือนเกี่ยวกับสิทธิ์ต่อไปนี้
![คำเตือนสิทธิ์ที่ผู้ใช้จะเห็นเมื่อติดตั้งส่วนขยายเวลาอ่าน](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/permission-warning-user-af0cb023a0128.png?authuser=19&hl=th)
ดูรายละเอียดเพิ่มเติมเกี่ยวกับสิทธิ์ของส่วนขยายได้ที่การประกาศสิทธิ์และเตือนผู้ใช้
ขั้นตอนที่ 4: คำนวณและแทรกเวลาที่อ่าน
สคริปต์เนื้อหาสามารถใช้ Document Object Model (DOM) มาตรฐานเพื่ออ่านและเปลี่ยนแปลง
เนื้อหาของหน้าเว็บ ส่วนขยายจะตรวจสอบก่อนว่าหน้าเว็บมีองค์ประกอบ <article>
หรือไม่
จากนั้น ระบบจะนับคำทั้งหมดภายในองค์ประกอบนี้ และสร้างย่อหน้าที่แสดงจำนวนคำทั้งหมด
ในการอ่าน
สร้างไฟล์ชื่อ content.js
ภายในโฟลเดอร์ชื่อ scripts
และเพิ่มโค้ดต่อไปนี้
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge);
}
💡 มีการใช้ JavaScript ที่น่าสนใจในโค้ดนี้
- เบนซินธรรมดา
นิพจน์ ใช้เพื่อนับเฉพาะคำภายในองค์ประกอบ
<article>
insertAdjacentElement()
ใช้เพื่อแทรกโหนดเวลาการอ่านหลังองค์ประกอบ- พร็อพเพอร์ตี้ classList ที่ใช้ในการเพิ่มชื่อคลาส CSS ลงในแอตทริบิวต์คลาสองค์ประกอบ
- การทำเชนที่ไม่บังคับซึ่งใช้เพื่อเข้าถึงพร็อพเพอร์ตี้ออบเจ็กต์ที่อาจไม่ได้กำหนดหรือ Null
- การรวมศูนย์แบบ Nullish จะแสดงผล
<heading>
หาก<date>
เป็นค่าว่างหรือไม่ระบุ
ทดสอบว่าใช้งานได้
ยืนยันว่าโครงสร้างไฟล์ของโปรเจ็กต์มีลักษณะดังนี้
โหลดส่วนขยายในเครื่อง
หากต้องการโหลดส่วนขยายที่คลายการแพคข้อมูลในโหมดนักพัฒนาซอฟต์แวร์ ให้ทำตามขั้นตอนในการพัฒนา ข้อมูลเบื้องต้น
เปิดส่วนขยายหรือเอกสารประกอบของ Chrome เว็บสโตร์
ต่อไปนี้คือหน้าเว็บบางส่วนที่คุณสามารถเปิดเพื่อดูระยะเวลาที่ใช้ในการอ่านแต่ละบทความ
ซึ่งควรมีลักษณะดังนี้
![เวลาอ่านที่ทำงานในหน้ายินดีต้อนรับ](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/reading-running-the-wel-1d750346edcea.png?authuser=19&hl=th)
🎯 เพิ่มประสิทธิภาพได้
ลองทำตามสิ่งที่ได้เรียนรู้ในวันนี้
- เพิ่มรูปแบบการจับคู่อื่นในไฟล์ Manifest.json เพื่อสนับสนุนนักพัฒนาซอฟต์แวร์ Chrome รายอื่น หน้า เช่น เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome หรือกล่องงาน
- เพิ่มสคริปต์เนื้อหาใหม่ที่คำนวณเวลาการอ่านบล็อกโปรดของคุณ หรือ เว็บไซต์เอกสาร
พัฒนาต่อ
ยินดีด้วยที่บทแนะนำนี้จบแล้ว 🎉 สร้างทักษะของคุณต่อไปโดยการทำภารกิจอื่นๆ บทแนะนำในซีรีส์นี้:
ส่วนขยาย | สิ่งที่คุณจะได้เรียนรู้ |
---|---|
โหมดโฟกัส | หากต้องการเรียกใช้โค้ดในหน้าปัจจุบันหลังจากคลิกการดำเนินการของส่วนขยาย |
ตัวจัดการแท็บ | เพื่อสร้างป๊อปอัปที่จัดการแท็บของเบราว์เซอร์ |
สำรวจต่อ
เราหวังว่าคุณจะเพลิดเพลินกับการสร้างส่วนขยาย Chrome นี้ และตื่นเต้นที่จะได้ใช้ Chrome ต่อไป เพื่อพัฒนาเส้นทางการเรียนรู้ได้ เราขอแนะนำเส้นทางการเรียนรู้ต่อไปนี้
- คู่มือสำหรับนักพัฒนาซอฟต์แวร์มีลิงก์เพิ่มเติมอีกหลายสิบรายการไปยังเอกสารต่างๆ ที่เกี่ยวข้องกับการสร้างส่วนขยายขั้นสูง
- ส่วนขยายมีสิทธิ์เข้าถึง API ที่มีประสิทธิภาพมากกว่าที่มีในโอเพนเว็บ เอกสารประกอบของ Chrome API จะอธิบายเกี่ยวกับ API แต่ละรายการ