จัดการแท็บ

สร้างตัวจัดการแท็บแรกของคุณ

ภาพรวม

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

ป๊อปอัปส่วนขยายตัวจัดการแท็บ
ส่วนขยาย 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: สร้างและจัดรูปแบบป๊อปอัป

Action API จะควบคุมการทำงานของส่วนขยาย (ไอคอนแถบเครื่องมือ) เมื่อผู้ใช้คลิกที่การทำงานของส่วนขยาย ส่วนขยายจะเรียกใช้โค้ดหรือเปิดป๊อปอัปดังเช่นในกรณีนี้ เริ่มต้นด้วยการประกาศป๊อปอัปใน 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/*",
  ]
});

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

หน้าป๊อปอัปและหน้าส่วนขยายอื่นๆ เรียกใช้ 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()

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

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 หน้า

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

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

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

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

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

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

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

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

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

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

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

สำรวจต่อ

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

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