สร้างตัวจัดการแท็บแรกของคุณ
ภาพรวม
บทแนะนำนี้จะสร้างตัวจัดการแท็บเพื่อจัดระเบียบส่วนขยาย 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/*",
]
});
💡 ฉันจะใช้ 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" });
}
});
ทดสอบว่าใช้งานได้
ยืนยันว่าโครงสร้างไฟล์ของโครงการตรงกับโครงสร้างไดเรกทอรีต่อไปนี้:
โหลดส่วนขยายในเครื่อง
หากต้องการโหลดส่วนขยายที่คลายการแพคแล้วในโหมดนักพัฒนาซอฟต์แวร์ ให้ทำตามขั้นตอนใน Hello World
เปิดหน้าเอกสารประกอบ 2-3 หน้า
เปิดเอกสารต่อไปนี้ในหน้าต่างต่างๆ
- ออกแบบอินเทอร์เฟซผู้ใช้
- การค้นพบใน Chrome เว็บสโตร์
- ภาพรวมการพัฒนาส่วนขยาย
- รูปแบบไฟล์ Manifest
- เผยแพร่ใน Chrome เว็บสโตร์
คลิกป๊อปอัป ซึ่งควรมีลักษณะดังนี้
คลิกปุ่ม "จัดกลุ่มแท็บ" ซึ่งควรมีลักษณะดังนี้
🎯 การเพิ่มประสิทธิภาพที่เป็นไปได้
จากสิ่งที่ได้เรียนรู้ในวันนี้ ลองนำสิ่งต่อไปนี้ไปใช้
- กำหนดสไตล์ชีตแบบป๊อปอัป
- เปลี่ยนสีและชื่อของกลุ่มแท็บ
- จัดการแท็บของเว็บไซต์เอกสารประกอบอื่น
- เพิ่มการรองรับการยกเลิกการจัดกลุ่มแท็บที่จัดกลุ่มไว้
สร้างชุมชนให้เติบโตไปเรื่อยๆ
ยินดีด้วยกับบทแนะนำนี้จบแล้ว 🎉 พัฒนาทักษะของคุณต่อไปโดยจบบทแนะนำอื่นๆ ในซีรีส์นี้
ส่วนขยาย | สิ่งที่คุณจะได้เรียนรู้ |
---|---|
เวลาในการอ่าน | แทรกองค์ประกอบในทุกหน้าโดยอัตโนมัติ |
โหมดโฟกัส | หากต้องการเรียกใช้โค้ดบนหน้าปัจจุบันหลังจากคลิกการทำงานของส่วนขยาย |
สำรวจต่อ
เราหวังว่าคุณจะสนุกกับการสร้างส่วนขยาย Chrome นี้ และรู้สึกตื่นเต้นที่จะได้เดินหน้าเรียนรู้ การพัฒนา Chrome ต่อไป เราขอแนะนำเส้นทางการเรียนรู้ต่อไปนี้
- คู่มือนักพัฒนาซอฟต์แวร์มีลิงก์เพิ่มเติมลิงก์ไปยังเอกสารต่างๆ ที่เกี่ยวข้องกับการสร้างส่วนขยายขั้นสูงอีกหลายสิบรายการ
- ส่วนขยายสามารถเข้าถึง API ที่มีประสิทธิภาพมากกว่าที่มีอยู่ในเว็บแบบเปิด เอกสารประกอบของ Chrome API จะอธิบายแต่ละ API