Jalankan skrip di setiap halaman

Buat ekstensi pertama yang menyisipkan elemen baru di halaman.

Ringkasan

Tutorial ini membangun ekstensi yang menambahkan waktu membaca yang diharapkan ke setiap 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 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 pengantar alur kerja pengembangan ekstensi.

Membangun ekstensi

Untuk memulai, buat direktori baru bernama reading-time untuk menyimpan file ekstensi. Jika Anda Namun, Anda dapat mendownload kode sumber lengkap dari GitHub.

Langkah 1: Tambahkan informasi tentang ekstensi

File JSON manifes adalah satu-satunya file yang diperlukan. Halaman ini menyimpan informasi penting tentang . 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 ini mengontrol cara ekstensi muncul di halaman ekstensi dan, saat dipublikasikan, di Chrome Web Store. Untuk mempelajari lebih lanjut, lihat Tombol "name", "version", dan "description" pada Halaman ringkasan Manifes.

💡 Fakta lain tentang manifes ekstensi

• ID tersebut harus berada di root project.
• Satu-satunya kunci yang diperlukan adalah "manifest_version", "name", dan "version".
• Editor ini mendukung komentar (//) selama pengembangan, tetapi komentar ini harus dihapus sebelum mengupload kode ke Chrome Web Store.

Langkah 2: Berikan ikon

Jadi, mengapa Anda membutuhkan ikon? Meskipun ikon bersifat opsional selama pengembangan, ikon diperlukan jika Anda berencana untuk mendistribusikan ekstensi di Chrome Web Store. Mereka juga muncul di tempat-tempat seperti halaman Pengelolaan Ekstensi.

Buat folder images dan tempatkan ikon di dalamnya. Anda dapat mengunduh ikon pada 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, namun format file lain diizinkan, kecuali file SVG.

💡 Di mana ikon dengan ukuran yang berbeda ditampilkan?

Langkah 3: Deklarasikan skrip konten

Ekstensi dapat menjalankan skrip yang membaca dan mengubah konten halaman. Hal ini disebut konten skrip. Mereka hidup di dunia yang terisolasi, yang berarti mereka dapat membuat perubahan pada lingkungan JavaScript tanpa bertentangan dengan halaman host atau ekstensi lain skrip konten.

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. Ini memungkinkan {i>browser<i} untuk mengidentifikasi situs tempat memasukkan skrip konten. Pola pencocokan terdiri dari tiga bagian: <scheme>://<host><path>. Aset dapat berisi '*' karakter.

💡 Apakah ekstensi ini menampilkan peringatan izin?

Saat pengguna menginstal ekstensi, browser memberi tahu mereka fungsi ekstensi tersebut. Skrip konten meminta izin untuk dijalankan 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 membaca

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, perangkat akan menghitung semua kata dalam elemen ini dan membuat paragraf yang menampilkan waktu membaca.

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 dalam kode ini

• Reguler ekspresi yang digunakan untuk hanya menghitung kata dalam elemen <article>.
• insertAdjacentElement() digunakan untuk menyisipkan node waktu baca setelah elemen.
• Properti classList yang digunakan untuk menambahkan nama class CSS ke atribut class elemen.
• Perantaian opsional digunakan untuk mengakses properti objek yang mungkin tidak ditentukan atau null.
• Penggabungan nullish akan menampilkan <heading> jika <date> bernilai null atau belum ditentukan.

Menguji apakah kode berfungsi

Pastikan struktur file project Anda terlihat seperti berikut:

Memuat ekstensi Anda secara lokal

Untuk memuat ekstensi yang belum dibuka dalam mode developer, ikuti langkah-langkah di Pengembangan Dasar-dasar.

Membuka ekstensi atau dokumentasi Chrome Web Store

Berikut adalah beberapa halaman yang dapat Anda buka untuk melihat berapa lama waktu yang dibutuhkan untuk membaca setiap artikel.

• Memublikasikan di Chrome Web Store
• Memahami Skrip Konten

Kodenya akan terlihat seperti berikut:

🎯 Potensi peningkatan

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

• Tambahkan pola pencocokan lain di manifest.json untuk mendukung developer Chrome lainnya halaman, seperti misalnya, Chrome DevTools atau Workbox.
• Tambahkan skrip konten baru yang menghitung waktu membaca pada blog favorit atau situs dokumentasi tersebut.

Terus membangun

Selamat, Anda telah menyelesaikan tutorial ini 🎉. Terus bangun keterampilan Anda dengan menyelesaikan tutorial di seri ini:

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.