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

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

ภาพรวม

บทแนะนำนี้จะสร้างส่วนขยายที่เพิ่มเวลาการอ่านที่คาดไว้ให้กับส่วนขยาย Chrome และ หน้าเอกสารประกอบของ Chrome เว็บสโตร์

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

ในคู่มือนี้ เราจะอธิบายแนวคิดต่อไปนี้

  • ไฟล์ 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> มีคำว่า "*" ได้ อักขระ

💡 ส่วนขยายนี้จะแสดงคำเตือนเกี่ยวกับสิทธิ์ไหม

เมื่อผู้ใช้ติดตั้งส่วนขยาย เบราว์เซอร์จะแจ้งให้ผู้ใช้ทราบว่าส่วนขยายสามารถทำอะไรได้บ้าง สคริปต์เนื้อหาขอสิทธิ์ให้ทำงานในเว็บไซต์ที่ตรงกับเกณฑ์รูปแบบการจับคู่

ในตัวอย่างนี้ ผู้ใช้จะเห็นคำเตือนเกี่ยวกับสิทธิ์ต่อไปนี้

วันที่ คำเตือนสิทธิ์ที่ผู้ใช้จะเห็นเมื่อติดตั้งส่วนขยายเวลาอ่าน
คำเตือนเกี่ยวกับสิทธิ์การอ่าน

ดูรายละเอียดเพิ่มเติมเกี่ยวกับสิทธิ์ของส่วนขยายได้ที่การประกาศสิทธิ์และเตือนผู้ใช้

ขั้นตอนที่ 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 ที่น่าสนใจในโค้ดนี้

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

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

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

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

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

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

ต่อไปนี้คือหน้าเว็บบางส่วนที่คุณสามารถเปิดเพื่อดูระยะเวลาที่ใช้ในการอ่านแต่ละบทความ

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

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

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

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

พัฒนาต่อ

ยินดีด้วยที่บทแนะนำนี้จบแล้ว 🎉 สร้างทักษะของคุณต่อไปโดยการทำภารกิจอื่นๆ บทแนะนำในซีรีส์นี้:

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

สำรวจต่อ

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