Kelola tab

Buat pengelola tab pertama Anda.

Ringkasan

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

Pop-up ekstensi Pengelola Tab
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.
  • Menjaga privasi pengguna melalui izin host yang sempit.
  • Ubah fokus tab.
  • Pindahkan tab ke jendela yang sama dan kelompokkan.
  • Ganti nama grup tab menggunakan TabGroups API.

Sebelum memulai

Panduan ini mengasumsikan bahwa Anda memiliki pengalaman pengembangan web dasar. Sebaiknya pelajari Hello World untuk pengantar alur kerja pengembangan ekstensi.

Membangun ekstensi

Untuk memulai, buat direktori baru bernama tabs-manager untuk menyimpan file ekstensi. Jika Anda Atau, Anda dapat mendownload kode sumber lengkap di GitHub.

Langkah 1: Tambahkan ikon dan data ekstensi

Buat file bernama manifest.json, lalu 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 baca 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, ia akan menjalankan beberapa kode atau membuka {i>pop-up<i}, seperti dalam kasus ini. Mulai paling lambat mendeklarasikan pop-up di manifest.json:

{
  "action": {
    "default_popup": "popup.html"
  }
}

Pop-up mirip dengan halaman web dengan satu pengecualian: 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 mengatur gaya 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 untuk 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 ini akan memberikan akses ke properti sensitif dari semua tab. Karena kami hanya mengelola tab di situs tertentu, kami akan meminta izin akses 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?

Baik izin "tabs" maupun 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 saat penginstalan:

Dialog peringatan izin tab

Izin host memungkinkan ekstensi membaca dan mengkueri properti sensitif tab yang cocok, serta memasukkan skrip di tab ini. Pengguna akan melihat pesan peringatan berikut pada waktu penginstalan:

Dialog peringatan izin host

Peringatan ini dapat mengganggu pengguna. Untuk pengalaman orientasi yang lebih baik, sebaiknya terapkan izin opsional.

Membuat kueri tab

Anda dapat mengambil tab dari URL tertentu menggunakan metode tabs.query(). Membuat 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?

Halaman pop-up dan halaman ekstensi lainnya dapat memanggil Chrome API apa pun karena ditayangkan dari skema chrome. Misalnya, chrome-extension://EXTENSION_ID/popup.html.

Fokus ke tab

Pertama, ekstensi akan mengurutkan nama tab (judul dari halaman HTML yang dimuat) menurut abjad. Kemudian, ketika item daftar diklik, item itu akan fokus pada tab tersebut menggunakan tabs.update() dan pindahkan 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 dalam kode ini

  • Collator digunakan untuk mengurutkan array tab berdasarkan bahasa pilihan pengguna.
  • Tag template yang digunakan untuk menentukan elemen HTML yang dapat digandakan, bukan menggunakan document.createElement() untuk membuat setiap item.
  • Konstruktor URL digunakan untuk membuat dan mengurai URL.
  • Sintaksis Spread digunakan untuk mengonversi Set elemen menjadi argumen dalam panggilan append().

Mengelompokkan tab

TabGroups API memungkinkan ekstensi untuk memberi nama grup dan memilih latar belakang {i>color<i}. 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 aktif.

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 kode berfungsi

Pastikan struktur file project Anda cocok dengan hierarki direktori berikut:

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

Memuat ekstensi Anda secara lokal

Untuk memuat ekstensi yang belum dibuka dalam mode developer, ikuti langkah-langkah dalam Halo Dunia.

Buka beberapa halaman dokumentasi

Buka dokumen berikut di jendela yang berbeda:

Klik pop-up tersebut. Kodenya akan terlihat seperti berikut:

Pop-up ekstensi Pengelola Tab
Pop-up ekstensi Pengelola Tab

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

Pengelola Tab Tab yang dikelompokkan
Mengelompokkan tab menggunakan ekstensi Tabs Manager

🎯 Potensi peningkatan

Berdasarkan apa yang telah Anda pelajari hari ini, cobalah untuk menerapkan salah satu dari hal berikut:

  • Sesuaikan lembar gaya pop-up.
  • Ubah warna dan judul grup tab.
  • Mengelola tab situs dokumentasi lain.
  • Menambahkan dukungan untuk memisahkan tab yang dikelompokkan.

Teruslah membangun!

Selamat, Anda telah menyelesaikan tutorial ini 🎉. Terus kembangkan keterampilan Anda dengan menyelesaikan tutorial 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 menikmati proses pembuatan ekstensi Chrome ini dan bersemangat untuk melanjutkan penggunaan Chrome Anda dalam perjalanan pembelajaran pengembangan aplikasi. Kami merekomendasikan jalur pembelajaran berikut:

  • Panduan developer memiliki banyak 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 Chrome API akan memandu setiap API.