Buat ekstensi pertama yang menyisipkan elemen baru pada halaman.
Ringkasan
Tutorial ini mem-build ekstensi yang menambahkan waktu baca yang diharapkan ke semua ekstensi Chrome dan halaman dokumentasi Chrome Web Store.
Dalam panduan ini, kami akan menjelaskan konsep berikut:
- Manifes ekstensi.
- Ukuran ikon yang digunakan ekstensi.
- Cara memasukkan kode ke dalam halaman menggunakan skrip konten.
- Cara menggunakan pola pencocokan.
- Izin ekstensi.
Sebelum memulai
Panduan ini mengasumsikan bahwa Anda memiliki pengalaman pengembangan web dasar. Sebaiknya lihat tutorial Halo Dunia untuk mengetahui pengantar alur kerja pengembangan ekstensi.
Mem-build ekstensi
Untuk memulai, buat direktori baru bernama reading-time untuk menyimpan file ekstensi. Jika ingin, Anda dapat mendownload kode sumber lengkap dari GitHub.
Langkah 1: Tambahkan informasi tentang ekstensi
File JSON manifes adalah satu-satunya file yang diperlukan. Parameter ini menyimpan informasi penting tentang ekstensi. Buat file manifest.json di root project dan tambahkan kode berikut:
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
Kunci ini berisi metadata dasar untuk ekstensi. Kebijakan mengontrol cara ekstensi muncul di halaman ekstensi dan, saat dipublikasikan, di Chrome Web Store. Untuk mempelajari lebih lanjut, lihat kunci
"name", "version", dan "description" di
halaman ringkasan Manifes.
💡 Fakta lain tentang manifes ekstensi
- Project ID harus berada di root project.
- Satu-satunya kunci yang diperlukan adalah
"manifest_version","name", dan"version". - Kode ini mendukung komentar (
//) selama pengembangan, tetapi harus dihapus sebelum mengupload kode ke Chrome Web Store.
Langkah 2: Menyediakan ikon
Jadi, mengapa Anda membutuhkan ikon? Meskipun bersifat opsional selama pengembangan, ikon diperlukan jika Anda berencana mendistribusikan ekstensi di Chrome Web Store. Ekstensi tersebut juga muncul di tempat lain seperti halaman Pengelolaan Ekstensi.
Buat folder images dan tempatkan ikonnya di dalamnya. Anda dapat mendownload ikon ini di GitHub. Berikutnya, tambahkan kode yang ditandai ke manifes untuk mendeklarasikan ikon:
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
Sebaiknya gunakan file PNG, tetapi format file lainnya diizinkan, kecuali untuk file SVG.
💡 Di mana ikon yang berukuran berbeda ini ditampilkan?
| Ukuran ikon | Penggunaan ikon |
|---|---|
| 16x16 | Favicon di halaman ekstensi dan menu konteks. |
| 32x32 | Komputer Windows sering kali memerlukan ukuran ini. |
| 48x48 | Ditampilkan di halaman Ekstensi. |
| 128x128 | Ditampilkan saat diinstal dan di Chrome Web Store. |
Langkah 3: Deklarasikan skrip konten
Ekstensi dapat menjalankan skrip yang membaca dan mengubah konten halaman. Ini disebut skrip konten. Skrip ini berada di dunia yang terisolasi, yang berarti dapat membuat perubahan pada lingkungan JavaScript tanpa bertentangan dengan halaman host atau skrip konten ekstensi lainnya.
Tambahkan kode berikut ke manifest.json untuk mendaftarkan skrip konten yang disebut
content.js.
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
Kolom "matches" dapat memiliki satu atau beberapa pola pencocokan. Atribut ini memungkinkan browser
mengidentifikasi situs mana yang akan diinjeksikan skrip konten. Pola pencocokan terdiri dari tiga bagian:
<scheme>://<host><path>. Kolom tersebut dapat berisi karakter '*'.
💡 Apakah ekstensi ini menampilkan peringatan izin?
Saat pengguna menginstal ekstensi, browser memberi tahu mereka apa yang dapat dilakukan ekstensi. Skrip konten meminta izin untuk berjalan di situs yang memenuhi kriteria pola pencocokan.
Dalam contoh ini, pengguna akan melihat peringatan izin berikut:
Untuk mempelajari izin ekstensi lebih lanjut, lihat Mendeklarasikan izin dan memperingatkan pengguna.
Langkah 4: Hitung dan masukkan waktu baca
Skrip konten dapat menggunakan Document Object Model (DOM) standar untuk membaca dan mengubah konten halaman. Ekstensi akan memeriksa terlebih dahulu apakah halaman berisi elemen <article>.
Kemudian, LLM akan menghitung semua kata dalam elemen ini dan membuat paragraf yang menampilkan total
waktu baca.
Buat file bernama content.js di dalam folder bernama scripts, lalu tambahkan kode berikut:
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge);
}
💡 JavaScript menarik yang digunakan di kode ini
- Ekspresi
reguler digunakan untuk menghitung hanya kata di dalam elemen
<article>. insertAdjacentElement()digunakan untuk menyisipkan node waktu membaca setelah elemen.- Properti classList yang digunakan untuk menambahkan nama class CSS ke atribut class elemen.
- Perantaian opsional yang digunakan untuk mengakses properti objek yang mungkin tidak ditentukan atau null.
- Penggabungan null akan menampilkan
<heading>jika<date>adalah null atau belum ditentukan.
Menguji apakah berfungsi
Pastikan struktur file project Anda terlihat seperti berikut:
Memuat ekstensi secara lokal
Untuk memuat ekstensi yang belum dibuka dalam mode developer, ikuti langkah-langkah di Dasar-Dasar Pengembangan.
Membuka ekstensi atau dokumentasi Chrome Web Store
Berikut adalah beberapa halaman yang dapat Anda buka untuk mengetahui berapa lama waktu yang diperlukan untuk membaca setiap artikel.
Kodenya akan terlihat seperti berikut:
🎯 Potensi peningkatan
Berdasarkan apa yang telah Anda pelajari hari ini, coba terapkan salah satu hal berikut:
- Tambahkan pola pencocokan lainnya di manifest.json untuk mendukung halaman developer Chrome lainnya, seperti misalnya, Chrome DevTools atau Workbox.
- Tambahkan skrip konten baru yang menghitung waktu membaca ke blog atau situs dokumentasi favorit Anda.
Teruslah berkembang
Selamat, Anda telah menyelesaikan tutorial ini 🎉. Terus tingkatkan keterampilan Anda dengan menyelesaikan tutorial lainnya di seri ini:
| Perluasan | Yang akan Anda pelajari |
|---|---|
| Mode Fokus | Untuk menjalankan kode di halaman saat ini setelah mengklik tindakan ekstensi. |
| Pengelola Tab | Untuk membuat pop-up yang mengelola tab browser. |
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.