เรียกใช้สคริปต์ในทุกหน้า

สร้างส่วนขยายแรกที่แทรกองค์ประกอบใหม่ในหน้าเว็บ

ภาพรวม

บทแนะนำนี้จะสร้างส่วนขยายที่เพิ่มเวลาที่คาดว่าจะอ่านในส่วนขยาย 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> เป็นค่าว่างหรือไม่ได้ระบุ

ทดสอบว่าใช้งานได้

ยืนยันว่าโครงสร้างไฟล์ของโครงการมีลักษณะดังต่อไปนี้

เนื้อหาของโฟลเดอร์เวลาอ่าน: Manifest.json, content.js ในโฟลเดอร์สคริปต์ และโฟลเดอร์รูปภาพ

โหลดส่วนขยายในเครื่อง

หากต้องการโหลดส่วนขยายที่คลายการแพคแล้วในโหมดนักพัฒนาซอฟต์แวร์ ให้ทำตามขั้นตอนในพื้นฐานการพัฒนา

เปิดเอกสารประกอบของส่วนขยายหรือ Chrome เว็บสโตร์

ต่อไปนี้เป็น 2-3 หน้าที่คุณสามารถเปิดเพื่อดูระยะเวลาที่จะอ่านแต่ละบทความ

ซึ่งควรมีลักษณะดังนี้

เวลาในการอ่านในหน้ายินดีต้อนรับ
หน้าต้อนรับของส่วนขยายที่มีส่วนขยายเวลาในการอ่าน

🎯 การเพิ่มประสิทธิภาพที่เป็นไปได้

จากสิ่งที่ได้เรียนรู้ในวันนี้ ลองนำสิ่งต่อไปนี้ไปใช้

สร้างชุมชนให้เติบโตไปเรื่อยๆ

ยินดีด้วยสำหรับบทแนะนำนี้จบแล้ว 🎉 สร้างทักษะต่อด้วยบทแนะนำอื่นๆ ในซีรีส์นี้

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

สำรวจต่อ

เราหวังว่าคุณจะสนุกกับการสร้างส่วนขยาย Chrome นี้ และรู้สึกตื่นเต้นที่จะได้เดินหน้าเรียนรู้ การพัฒนา Chrome ต่อไป เราขอแนะนำเส้นทางการเรียนรู้ต่อไปนี้

  • คู่มือนักพัฒนาซอฟต์แวร์มีลิงก์เพิ่มเติมลิงก์ไปยังเอกสารต่างๆ ที่เกี่ยวข้องกับการสร้างส่วนขยายขั้นสูงอีกหลายสิบรายการ
  • ส่วนขยายสามารถเข้าถึง API ที่มีประสิทธิภาพมากกว่าที่มีอยู่ในเว็บแบบเปิด เอกสารประกอบของ Chrome API จะอธิบายแต่ละ API