จัดการแท็บ

สร้างตัวจัดการแท็บแรก

ภาพรวม

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

ป๊อปอัปส่วนขยาย Tabs Manager
ส่วนขยาย Tabs Manager

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

  • สร้างป๊อปอัปส่วนขยายโดยใช้ 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: สร้างและจัดรูปแบบป๊อปอัป

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

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

ป๊อปอัปจะคล้ายกับหน้าเว็บ ยกเว้นอย่างหนึ่งคือเรียกใช้ 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() เพื่อสร้างแต่ละรายการ
  • เครื่องมือสร้าง URL ที่ใช้ในการสร้างและแยกวิเคราะห์ URL
  • ไวยากรณ์การกระจายที่ใช้เพื่อแปลงชุดองค์ประกอบเป็นอาร์กิวเมนต์ในการเรียก append()

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

API TabGroups ช่วยให้ส่วนขยายตั้งชื่อกลุ่มและเลือกสีพื้นหลังได้ เพิ่มสิทธิ์ "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 หน้า

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

คลิกป๊อปอัป โดยควรมีลักษณะดังนี้

ป๊อปอัปส่วนขยาย Tabs Manager
ป๊อปอัปส่วนขยาย Tabs Manager

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

แท็บที่จัดกลุ่มในตัวจัดการแท็บ
แท็บที่จัดกลุ่มโดยใช้ส่วนขยาย Tabs Manager

🎯 การปรับปรุงที่อาจเกิดขึ้น

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

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

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

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

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

สำรวจต่อ

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