จัดการแท็บ

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

ภาพรวม

บทแนะนำนี้จะสร้างตัวจัดการแท็บเพื่อจัดระเบียบส่วนขยาย 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"
  }
}

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

เปิดหน้าเอกสารประกอบบางหน้า

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

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

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

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

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

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

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

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

สร้างสรรค์ผลงานต่อไป!

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

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

สำรวจต่อ

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