จัดการแท็บ

สร้างเครื่องมือจัดการแท็บรายการแรก

ภาพรวม

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

ป๊อปอัปส่วนขยายตัวจัดการแท็บ
ส่วนขยายตัวจัดการแท็บ

ในคู่มือนี้ เราจะอธิบายวิธีทําสิ่งต่อไปนี้

  • สร้างป๊อปอัปของส่วนขยายโดยใช้ Action API
  • ค้นหาแท็บที่เฉพาะเจาะจงโดยใช้ Tabs API
  • รักษาความเป็นส่วนตัวของผู้ใช้ผ่านสิทธิ์ของโฮสต์ที่แคบ
  • เปลี่ยนโฟกัสของแท็บ
  • ย้ายแท็บไปยังหน้าต่างเดียวกันและจัดกลุ่ม
  • เปลี่ยนชื่อกลุ่มแท็บโดยใช้ TabGroups API

ก่อนจะเริ่ม

คู่มือนี้จะถือว่าคุณมีประสบการณ์ด้านการพัฒนาเว็บขั้นพื้นฐาน เราขอแนะนําให้ดูตัวอย่างHello World เพื่อดูข้อมูลเบื้องต้นเกี่ยวกับเวิร์กโฟลว์การพัฒนาส่วนขยาย

สร้างส่วนขยาย

ในการเริ่มต้น ให้สร้างไดเรกทอรีใหม่ชื่อ tabs-manager เพื่อเก็บไฟล์ของส่วนขยาย หากต้องการ คุณดาวน์โหลดซอร์สโค้ดฉบับเต็มได้ใน GitHub

ขั้นตอนที่ 1: เพิ่มข้อมูลและไอคอนส่วนขยาย

สร้างไฟล์ชื่อ manifest.json แล้วเพิ่มโค้ดต่อไปนี้

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับคีย์ไฟล์ Manifest เหล่านี้ได้ในบทแนะนำเกี่ยวกับเวลาในการอ่านที่อธิบายข้อมูลเมตาและไอคอนของส่วนขยายอย่างละเอียด

สร้างโฟลเดอร์ images แล้วดาวน์โหลดไอคอนลงในโฟลเดอร์ดังกล่าว

ขั้นตอนที่ 2: สร้างและจัดสไตล์ป๊อปอัป

Action API จะควบคุมการดำเนินการของส่วนขยาย (ไอคอนแถบเครื่องมือ) เมื่อผู้ใช้คลิกการดำเนินการของส่วนขยาย ระบบจะเรียกใช้โค้ดบางอย่างหรือเปิดป๊อปอัป เช่นในกรณีนี้ เริ่มต้นด้วยการประกาศป๊อปอัปใน manifest.json โดยทำดังนี้

{
  "action": {
    "default_popup": "popup.html"
  }
}

ป๊อปอัปคล้ายกับหน้าเว็บ โดยมีข้อยกเว้น 1 ข้อคือไม่สามารถเรียกใช้ JavaScript ในบรรทัด สร้างไฟล์ popup.html แล้วเพิ่มโค้ดต่อไปนี้

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./popup.css" />
  </head>
  <body>
    <template id="li_template">
      <li>
        <a>
          <h3 class="title">Tab Title</h3>
          <p class="pathname">Tab Pathname</p>
        </a>
      </li>
    </template>

    <h1>Google Dev Docs</h1>
    <button>Group Tabs</button>
    <ul></ul>

    <script src="./popup.js" type="module"></script>
  </body>
</html>

ขั้นตอนถัดไปคือการจัดรูปแบบป๊อปอัป สร้างไฟล์ popup.css แล้วเพิ่มโค้ดต่อไปนี้

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

ขั้นตอนที่ 3: จัดการแท็บ

Tabs API ช่วยให้ส่วนขยายสร้าง ค้นหา แก้ไข และจัดเรียงแท็บในเบราว์เซอร์ได้

ขอสิทธิ์

คุณใช้เมธอดหลายรายการใน Tabs API ได้โดยไม่ต้องขอสิทธิ์ใดๆ อย่างไรก็ตาม เราจำเป็นต้องเข้าถึง title และ URL ของแท็บ เนื่องจากพร็อพเพอร์ตี้ที่มีความละเอียดอ่อนเหล่านี้จำเป็นต้องมีสิทธิ์ เราขอสิทธิ์ "tabs" ได้ แต่จะเป็นการให้สิทธิ์เข้าถึงพร็อพเพอร์ตี้ที่มีความละเอียดอ่อนของแท็บทั้งหมด เนื่องจากเราจัดการเฉพาะแท็บของเว็บไซต์หนึ่งๆ เราจะขอสิทธิ์โฮสต์แบบจำกัด

สิทธิ์ของโฮสต์แบบจำกัดช่วยให้เราปกป้องความเป็นส่วนตัวของผู้ใช้ได้โดยการให้สิทธิ์ที่สูงขึ้นแก่เว็บไซต์ที่เฉพาะเจาะจง ซึ่งจะให้สิทธิ์เข้าถึงพร็อพเพอร์ตี้ title และ URL รวมถึงความสามารถเพิ่มเติม เพิ่มโค้ดที่ไฮไลต์ลงในไฟล์ manifest.json

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 ความแตกต่างหลักระหว่างสิทธิ์แท็บกับสิทธิ์โฮสต์มีอะไรบ้าง

ทั้งสิทธิ์ "tabs" และสิทธิ์ของโฮสต์มีข้อเสีย

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

กล่องโต้ตอบคําเตือนสิทธิ์ของแท็บ

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

กล่องโต้ตอบคําเตือนสิทธิ์ของโฮสต์

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

ค้นหาแท็บ

คุณเรียกข้อมูลแท็บจาก URL ที่เฉพาะเจาะจงได้โดยใช้เมธอด tabs.query() สร้างไฟล์ popup.js แล้วเพิ่มโค้ดต่อไปนี้

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 ฉันจะใช้ Chrome API ในป๊อปอัปได้โดยตรงไหม

ป๊อปอัปและหน้าส่วนขยายอื่นๆ สามารถเรียกใช้ Chrome API ใดก็ได้เนื่องจากแสดงจากสคีมา Chrome เช่น chrome-extension://EXTENSION_ID/popup.html

โฟกัสที่แท็บ

ก่อนอื่น ส่วนขยายจะจัดเรียงชื่อแท็บ (ชื่อของหน้า HTML ที่มี) ตามลําดับตัวอักษร จากนั้นเมื่อมีการคลิกรายการ ระบบจะโฟกัสที่แท็บนั้นโดยใช้ tabs.update() และนำหน้าต่างมาไว้ที่ด้านหน้าโดยใช้ windows.update() เพิ่มโค้ดต่อไปนี้ลงในไฟล์ popup.js

...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));

const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title.split("-")[0].trim();
  const pathname = new URL(tab.url).pathname.slice("/docs".length);

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // need to focus window as well as the active tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}
document.querySelector("ul").append(...elements);
...

💡 JavaScript ที่น่าสนใจที่ใช้ในโค้ดนี้

  • Collator ที่ใช้จัดเรียงอาร์เรย์แท็บตามภาษาที่ผู้ใช้ต้องการ
  • แท็กเทมเพลตที่ใช้เพื่อกำหนดองค์ประกอบ HTML ที่สามารถโคลนได้แทนการใช้ document.createElement() เพื่อสร้างแต่ละรายการ
  • Constructor ของ URL ที่ใช้สร้างและแยกวิเคราะห์ URL
  • ไวยากรณ์การกระจายที่ใช้แปลงชุดองค์ประกอบเป็นอาร์กิวเมนต์ในการเรียก append()

จัดกลุ่มแท็บ

TabGroups API ช่วยให้ส่วนขยายตั้งชื่อกลุ่มและเลือกสีพื้นหลังได้ เพิ่มสิทธิ์ "tabGroups" ลงในไฟล์ Manifest โดยเพิ่มโค้ดที่ไฮไลต์ไว้ดังนี้

{
  "permissions": [
    "tabGroups"
  ]
}

ใน popup.js ให้เพิ่มโค้ดต่อไปนี้เพื่อสร้างปุ่มที่จะจัดกลุ่มแท็บทั้งหมดโดยใช้ tabs.group() และย้ายแท็บเหล่านั้นไปยังหน้าต่างปัจจุบัน

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  if (tabIds.length) {
    const group = await chrome.tabs.group({ tabIds });
    await chrome.tabGroups.update(group, { title: "DOCS" });
  }
});

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

ตรวจสอบว่าโครงสร้างไฟล์ของโปรเจ็กต์ตรงกับลําดับชั้นไดเรกทอรีต่อไปนี้

เนื้อหาในโฟลเดอร์ตัวจัดการแท็บ: manifest.json, popup.js, popup.css, popup.html และโฟลเดอร์รูปภาพ

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

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

เปิดหน้าเอกสารประกอบ 2-3 หน้า

เปิดเอกสารต่อไปนี้ในหน้าต่างต่างๆ

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

ป๊อปอัปส่วนขยายตัวจัดการแท็บ
ป๊อปอัปส่วนขยายตัวจัดการแท็บ

คลิกปุ่ม "จัดกลุ่มแท็บ" ซึ่งควรมีลักษณะดังนี้

แท็บที่จัดกลุ่มของเครื่องมือจัดการแท็บ
แท็บที่จัดกลุ่มโดยใช้ส่วนขยายตัวจัดการแท็บ

🎯 การปรับปรุงที่เป็นไปได้

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

  • ปรับแต่งสไตล์ชีตของป๊อปอัป
  • เปลี่ยนสีและชื่อของกลุ่มแท็บ
  • จัดการแท็บของเว็บไซต์เอกสารประกอบอื่น
  • เพิ่มการรองรับการเลิกจัดกลุ่มแท็บที่จัดกลุ่มไว้

สร้างต่อไป

ยินดีด้วยที่อ่านบทแนะนำนี้จบแล้ว 🎉 พัฒนาทักษะของคุณต่อไปโดยดูบทแนะนำอื่นๆ ในชุดนี้

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

สำรวจต่อ

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