Buat pengelola tab pertama Anda.
Ringkasan
Tutorial ini membuat pengelola tab untuk mengatur ekstensi Chrome dan tab dokumentasi Chrome Web Store.
Dalam panduan ini, kami akan menjelaskan cara melakukan hal berikut:
- Buat pop-up ekstensi menggunakan Action API.
- Buat kueri untuk tab tertentu menggunakan Tabs API.
- Jaga privasi pengguna melalui izin host yang sempit.
- Ubah fokus tab.
- Memindahkan tab ke jendela yang sama dan mengelompokkannya.
- Ganti nama grup tab menggunakan TabGroups API.
Sebelum memulai
Panduan ini mengasumsikan bahwa Anda memiliki pengalaman pengembangan web dasar. Sebaiknya lihat Hello World untuk mengetahui pengantar alur kerja pengembangan ekstensi.
Mem-build ekstensi
Untuk memulai, buat direktori baru bernama tabs-manager
untuk menyimpan file ekstensi. Jika ingin, Anda dapat mendownload kode sumber lengkap di GitHub.
Langkah 1: Tambahkan data dan ikon ekstensi
Buat file bernama manifest.json
dan tambahkan kode berikut:
{
"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"
}
}
Untuk mempelajari kunci manifes ini lebih lanjut, lihat tutorial Waktu membaca yang menjelaskan metadata dan ikon ekstensi secara lebih mendetail.
Buat folder images
, lalu download ikon ke dalamnya.
Langkah 2: Membuat dan menata gaya pop-up
Action API mengontrol tindakan ekstensi (ikon toolbar). Saat pengguna mengklik tindakan ekstensi, tindakan tersebut akan menjalankan beberapa kode atau membuka pop-up, seperti dalam kasus ini. Mulailah dengan
mendeklarasikan pop-up di manifest.json
:
{
"action": {
"default_popup": "popup.html"
}
}
Pop-up mirip dengan halaman web dengan satu pengecualian: pop-up tidak dapat menjalankan JavaScript inline. Buat file popup.html
dan tambahkan kode berikut:
<!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>
Selanjutnya, Anda akan memberi gaya pada pop-up. Buat file popup.css
dan tambahkan kode berikut:
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;
}
Langkah 3: Kelola tab
Tabs API memungkinkan ekstensi membuat, mengkueri, mengubah, dan mengatur ulang tab di browser.
Meminta izin
Banyak metode di Tabs API yang dapat digunakan tanpa meminta izin apa pun. Namun, kita memerlukan akses ke title
dan URL
tab; properti sensitif ini memerlukan izin. Kita dapat meminta izin "tabs"
, tetapi tindakan ini akan memberikan akses ke properti sensitif semua tab. Karena kami hanya mengelola tab dari situs tertentu, kami akan meminta izin host yang sempit.
Izin host yang sempit memungkinkan kami melindungi privasi pengguna dengan memberikan izin yang ditingkatkan ke situs tertentu. Tindakan ini akan memberikan akses ke properti title
dan URL
, serta kemampuan tambahan. Tambahkan kode yang ditandai ke file manifest.json
:
{
"host_permissions": [
"https://developer.chrome.com/*"
]
}
💡 Apa perbedaan utama antara izin tab dan izin host?
Izin "tabs"
dan izin host memiliki kekurangan.
Izin "tabs"
memberikan ekstensi kemampuan untuk membaca data sensitif di semua tab. Seiring waktu, informasi ini dapat digunakan untuk mengumpulkan histori penjelajahan pengguna. Oleh karena itu, jika Anda meminta izin ini, Chrome akan menampilkan pesan peringatan berikut pada waktu penginstalan:
Izin host memungkinkan ekstensi membaca dan mengkueri properti sensitif tab yang cocok, serta memasukkan skrip pada tab tersebut. Pengguna akan melihat pesan peringatan berikut pada waktu penginstalan:
Peringatan ini dapat membuat pengguna khawatir. Untuk pengalaman orientasi yang lebih baik, sebaiknya terapkan izin opsional.
Membuat kueri tab
Anda dapat mengambil tab dari URL tertentu menggunakan metode tabs.query()
. Buat file popup.js
dan tambahkan kode berikut:
const tabs = await chrome.tabs.query({
url: [
"https://developer.chrome.com/docs/webstore/*",
"https://developer.chrome.com/docs/extensions/*",
]
});
💡 Dapatkah saya menggunakan Chrome API langsung di pop-up?
Pop-up dan halaman ekstensi lainnya dapat memanggil Chrome API apa pun karena ditampilkan dari skema chrome. Contohnya, chrome-extension://EXTENSION_ID/popup.html
.
Fokus pada tab
Pertama, ekstensi akan mengurutkan nama tab (judul halaman HTML yang ada) menurut abjad. Kemudian, saat diklik, item daftar akan
berfokus pada tab tersebut menggunakan tabs.update()
dan menampilkan jendela ke depan menggunakan windows.update()
.
Tambahkan kode berikut ke file 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 menarik yang digunakan di kode ini
- Collator yang digunakan untuk mengurutkan array tab menurut bahasa pilihan pengguna.
- Tag template digunakan untuk
menentukan elemen HTML yang dapat digandakan, bukan menggunakan
document.createElement()
untuk membuat setiap item. - Konstruktor URL yang digunakan untuk membuat dan mengurai URL.
- Sintaksis Spread yang digunakan untuk mengonversi Set elemen menjadi argumen dalam panggilan
append()
.
Mengelompokkan tab
TabGroups API memungkinkan ekstensi memberi nama grup dan memilih warna latar belakang. Tambahkan izin "tabGroups"
ke manifes dengan menambahkan kode yang ditandai:
{
"permissions": [
"tabGroups"
]
}
Di popup.js
, tambahkan kode berikut untuk membuat tombol yang akan mengelompokkan semua tab menggunakan tabs.group()
dan
memindahkannya ke jendela saat ini.
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" });
}
});
Menguji apakah berfungsi
Pastikan struktur file project Anda sesuai dengan hierarki direktori berikut:
Memuat ekstensi secara lokal
Untuk memuat ekstensi yang belum dibuka dalam mode developer, ikuti langkah-langkah di Halo Dunia.
Buka beberapa halaman dokumentasi
Buka dokumen berikut di jendela yang berbeda:
- Mendesain antarmuka pengguna
- Penemuan di Chrome Web Store
- Ringkasan pengembangan ekstensi
- Format file manifes
- Memublikasikan di Chrome Web Store
Klik pop-up. Kodenya akan terlihat seperti berikut:
Klik tombol "Kelompokkan tab". Kodenya akan terlihat seperti berikut:
🎯 Potensi peningkatan
Berdasarkan apa yang telah Anda pelajari hari ini, coba terapkan salah satu hal berikut:
- Sesuaikan lembar gaya pop-up.
- Mengubah warna dan judul grup tab.
- Mengelola tab situs dokumentasi lain.
- Menambahkan dukungan untuk memisahkan tab yang dikelompokkan.
Teruslah berkembang!
Selamat, Anda telah menyelesaikan tutorial ini 🎉. Terus kembangkan keterampilan Anda dengan menyelesaikan tutorial lainnya di seri ini:
Perluasan | Yang akan Anda pelajari |
---|---|
Waktu membaca | Untuk menyisipkan elemen di setiap halaman secara otomatis. |
Mode Fokus | Untuk menjalankan kode di halaman saat ini setelah mengklik tindakan ekstensi. |
Jelajahi lebih jauh
Kami harap Anda senang membuat ekstensi Chrome ini dan bersemangat untuk melanjutkan perjalanan pembelajaran pengembangan Chrome Anda. Kami merekomendasikan jalur pembelajaran berikut:
- Panduan developer ini berisi puluhan link tambahan ke bagian dokumentasi yang relevan dengan pembuatan ekstensi lanjutan.
- Ekstensi memiliki akses ke API yang canggih selain yang tersedia di web terbuka. Dokumentasi API Chrome menjelaskan setiap API.