Kelola tab

Buat pengelola tab pertama Anda.

Ringkasan

Tutorial ini membuat pengelola tab untuk mengatur ekstensi Chrome dan tab dokumentasi Chrome Web Store.

Pop-up ekstensi Tabs Manager
Ekstensi Pengelola Tab

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:

Dialog peringatan izin tab

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:

Dialog peringatan izin host

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:

Konten folder pengelola tab: manifest.json, popup.js, popup.css, popup.html, dan folder gambar.

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:

Klik pop-up. Kodenya akan terlihat seperti berikut:

Pop-up ekstensi Tabs Manager
Pop-up ekstensi Tab Manager

Klik tombol "Kelompokkan tab". Kodenya akan terlihat seperti berikut:

Tab yang Dikelompokkan Pengelola Tab
Tab yang dikelompokkan menggunakan ekstensi Pengelola Tab

🎯 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.