สร้างส่วนขยายแรกที่แทรกองค์ประกอบใหม่ในหน้าเว็บ
ภาพรวม
บทแนะนำนี้จะสร้างส่วนขยายที่เพิ่มเวลาที่คาดว่าจะอ่านในส่วนขยาย Chrome และหน้าเอกสารประกอบของ Chrome เว็บสโตร์
ในคู่มือนี้ เราจะอธิบายแนวคิดต่อไปนี้
- ไฟล์ Manifest ของส่วนขยาย
- ไอคอนขนาดที่ส่วนขยายใช้
- วิธีแทรกโค้ดลงในหน้าเว็บโดยใช้สคริปต์เนื้อหา
- วิธีใช้รูปแบบการจับคู่
- สิทธิ์ของส่วนขยาย
ก่อนจะเริ่ม
คู่มือนี้จะถือว่าคุณมีประสบการณ์ในการพัฒนาเว็บขั้นพื้นฐาน เราขอแนะนำให้ดูบทแนะนำ Hello World เพื่อดูคำแนะนำเกี่ยวกับเวิร์กโฟลว์การพัฒนาส่วนขยาย
สร้างส่วนขยาย
หากต้องการเริ่มต้น ให้สร้างไดเรกทอรีใหม่ที่ชื่อว่า 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>
มีอักขระ "*
" ได้
💡 ส่วนขยายนี้แสดงคำเตือนเกี่ยวกับสิทธิ์ใช่ไหม
เมื่อผู้ใช้ติดตั้งส่วนขยาย เบราว์เซอร์จะแจ้งให้ผู้ใช้ทราบว่าส่วนขยายทำอะไรได้บ้าง สคริปต์เนื้อหาจะขอสิทธิ์ให้ทำงานบนเว็บไซต์ที่ตรงกับเกณฑ์รูปแบบการจับคู่
ในตัวอย่างนี้ ผู้ใช้จะเห็นคำเตือนเกี่ยวกับสิทธิ์ต่อไปนี้
หากต้องการเจาะลึกเกี่ยวกับสิทธิ์ของส่วนขยาย โปรดดูการประกาศสิทธิ์และเตือนผู้ใช้
ขั้นที่ 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 ลงในแอตทริบิวต์คลาสขององค์ประกอบ
- ห่วงโซ่ที่ไม่บังคับที่ใช้ในการเข้าถึงพร็อพเพอร์ตี้ออบเจ็กต์ที่อาจไม่ได้ระบุหรือไม่มีข้อมูล
- การรวมสีแบบ Nullish จะแสดงผล
<heading>
หาก<date>
เป็นค่าว่างหรือไม่ได้ระบุ
ทดสอบว่าใช้งานได้
ยืนยันว่าโครงสร้างไฟล์ของโครงการมีลักษณะดังต่อไปนี้
โหลดส่วนขยายในเครื่อง
หากต้องการโหลดส่วนขยายที่คลายการแพคแล้วในโหมดนักพัฒนาซอฟต์แวร์ ให้ทำตามขั้นตอนในพื้นฐานการพัฒนา
เปิดเอกสารประกอบของส่วนขยายหรือ Chrome เว็บสโตร์
ต่อไปนี้เป็น 2-3 หน้าที่คุณสามารถเปิดเพื่อดูระยะเวลาที่จะอ่านแต่ละบทความ
ซึ่งควรมีลักษณะดังนี้
🎯 การเพิ่มประสิทธิภาพที่เป็นไปได้
จากสิ่งที่ได้เรียนรู้ในวันนี้ ลองนำสิ่งต่อไปนี้ไปใช้
- เพิ่มรูปแบบการจับคู่อื่นใน manifest.json เพื่อรองรับหน้านักพัฒนาซอฟต์แวร์ Chrome อื่นๆ เช่น เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome หรือพื้นที่ทำงาน
- เพิ่มสคริปต์เนื้อหาใหม่ที่คํานวณเวลาในการอ่านในบล็อกหรือเว็บไซต์เอกสารโปรดของคุณ
สร้างชุมชนให้เติบโตไปเรื่อยๆ
ยินดีด้วยสำหรับบทแนะนำนี้จบแล้ว 🎉 สร้างทักษะต่อด้วยบทแนะนำอื่นๆ ในซีรีส์นี้
ส่วนขยาย | สิ่งที่คุณจะได้เรียนรู้ |
---|---|
โหมดโฟกัส | หากต้องการเรียกใช้โค้ดในหน้าปัจจุบันหลังจากคลิกการทำงานของส่วนขยาย |
เครื่องมือจัดการแท็บ | เพื่อสร้างป๊อปอัปที่จัดการแท็บของเบราว์เซอร์ |
สำรวจต่อ
เราหวังว่าคุณจะสนุกกับการสร้างส่วนขยาย Chrome นี้ และรู้สึกตื่นเต้นที่จะได้เดินหน้าเรียนรู้ การพัฒนา Chrome ต่อไป เราขอแนะนำเส้นทางการเรียนรู้ต่อไปนี้
- คู่มือนักพัฒนาซอฟต์แวร์มีลิงก์เพิ่มเติมลิงก์ไปยังเอกสารต่างๆ ที่เกี่ยวข้องกับการสร้างส่วนขยายขั้นสูงอีกหลายสิบรายการ
- ส่วนขยายสามารถเข้าถึง API ที่มีประสิทธิภาพมากกว่าที่มีอยู่ในเว็บแบบเปิด เอกสารประกอบของ Chrome API จะอธิบายแต่ละ API