Memasukkan skrip ke tab aktif

Sederhanakan gaya halaman aktif dengan mengklik ikon toolbar ekstensi.

Ringkasan

Tutorial ini membangun ekstensi yang menyederhanakan penataan gaya ekstensi Chrome dan halaman dokumentasi Chrome Web Store agar lebih mudah dibaca.

Dalam panduan ini, kami akan menjelaskan cara melakukan hal berikut:

  • Menggunakan pekerja layanan ekstensi sebagai koordinator acara.
  • Jaga privasi pengguna melalui izin "activeTab".
  • Jalankan kode saat pengguna mengklik ikon toolbar ekstensi.
  • Sisipkan dan hapus lembar gaya menggunakan Scripting API.
  • Gunakan pintasan keyboard untuk mengeksekusi kode.

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 focus-mode yang akan menyimpan file ekstensi. Jika Anda Namun, Anda dapat mendownload kode sumber lengkap dari GitHub.

Langkah 1: Tambahkan ikon dan data ekstensi

Buat file bernama manifest.json dan sertakan kode berikut.

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "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 "Menjalankan skrip di setiap tab" yang menjelaskan metadata dan ikon ekstensi secara lebih mendetail.

Buat folder images lalu download ikon ke dalamnya.

Langkah 2: Melakukan inisialisasi ekstensi

Ekstensi dapat memantau peristiwa browser di latar belakang menggunakan layanan ekstensi pekerja. Pekerja layanan adalah lingkungan JavaScript khusus yang menangani {i>event<i} dan berhenti saat tidak diperlukan.

Mulai dengan mendaftarkan pekerja layanan dalam file manifest.json:

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

Buat file bernama background.js, lalu tambahkan kode berikut:

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

Peristiwa pertama yang akan dideteksi pekerja layanan adalah runtime.onInstalled() Metode ini memungkinkan ekstensi menyetel status atau menyelesaikan beberapa tugas pada instalasi. Ekstensi dapat menggunakan Storage API dan IndexedDB untuk menyimpan status aplikasi. Namun, dalam kasus ini, karena kita hanya menangani dua status, kita akan menggunakan teks badge tindakan itu sendiri untuk melacak apakah ekstensi 'ON' atau tidak atau 'NONAKTIF'.

Langkah 3: Aktifkan tindakan ekstensi

Tindakan ekstensi mengontrol ikon toolbar ekstensi. Jadi, setiap kali pengguna mengklik , aplikasi akan menjalankan beberapa kode (seperti dalam contoh ini) atau menampilkan pop-up. Tambahkan kode berikut untuk mendeklarasikan tindakan ekstensi dalam file manifest.json:

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

Menggunakan izin activeTab untuk melindungi privasi pengguna

Izin activeTab memberikan kemampuan sementara ekstensi untuk menjalankan kode pada tab aktif. Alat ini juga memungkinkan akses ke properti sensitif tab saat ini.

Izin ini diaktifkan saat pengguna memanggil ekstensi. Dalam hal ini, pengguna memanggil metode ekstensi dengan mengklik tindakan ekstensi.

💡 Apa saja interaksi pengguna lain yang mengaktifkan izin activeTab di ekstensi saya sendiri?

  • Menekan kombinasi pintasan keyboard.
  • Memilih item menu konteks.
  • Menerima saran dari omnibox.
  • Membuka pop-up ekstensi.

Izin "activeTab" memungkinkan pengguna dengan sengaja memilih menjalankan ekstensi di tab terfokus; dengan cara ini, akan melindungi privasi pengguna. Manfaat lainnya adalah bahwa memicu peringatan izin.

Untuk menggunakan izin "activeTab", tambahkan ke array izin manifes:

{
  ...
  "permissions": ["activeTab"],
  ...
}

Langkah 4: Lacak status tab saat ini

Setelah pengguna mengklik tindakan ekstensi, ekstensi akan memeriksa apakah URL cocok dengan . Selanjutnya, alat akan memeriksa status tab saat ini dan menyetel status berikutnya. Tambahkan kode berikut ke background.js:

const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

Langkah 5: Tambahkan atau hapus lembar gaya

Sekarang saatnya mengubah tata letak halaman. Buat file bernama focus-mode.css dan sertakan kode berikut:

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

Sisipkan atau hapus lembar gaya menggunakan Scripting API. Mulai paling lambat mendeklarasikan izin "scripting" dalam manifes:

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

Terakhir, di background.js, tambahkan kode berikut untuk mengubah tata letak halaman:

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡 Dapatkah saya menggunakan Scripting API untuk memasukkan kode sebagai ganti lembar gaya?

Ya. Anda dapat menggunakan scripting.executeScript() untuk memasukkan JavaScript.

Opsional: Tetapkan pintasan keyboard

Untuk bersenang-senang, tambahkan pintasan untuk mempermudah mengaktifkan atau menonaktifkan mode fokus. Tambahkan "commands" ke manifes.

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

Tombol "_execute_action" menjalankan kode yang sama dengan peristiwa action.onClicked(), jadi tidak ada tambahan kode tertentu diperlukan.

Menguji apakah kode berfungsi

Pastikan struktur file project Anda terlihat seperti berikut:

Konten folder mode fokus: folder manifest.json, background.js, focus-mode.css, dan gambar.

Memuat ekstensi Anda secara lokal

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

Menguji ekstensi di halaman dokumentasi

Pertama, buka salah satu halaman berikut:

Kemudian, klik tindakan ekstensi. Jika menyiapkan pintasan keyboard, Anda dapat mengujinya dengan menekan Ctrl + B atau Cmd + B.

Kodenya harus dimulai dari berikut ini:

Ekstensi Mode Fokus NONAKTIF
Ekstensi Mode Fokus nonaktif

Ubah menjadi:

Ekstensi Mode Fokus AKTIF
Ekstensi Mode Fokus aktif

🎯 Potensi peningkatan

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

  • Koreksi lembar gaya CSS.
  • Tetapkan pintasan keyboard lain.
  • Ubah tata letak blog atau situs dokumentasi favorit Anda.

Teruslah berkembang.

Selamat, Anda telah menyelesaikan tutorial ini 🎉. Terus tingkatkan keterampilanmu dengan menyelesaikan tutorial di seri ini:

Perluasan Yang akan Anda pelajari
Waktu membaca Untuk menyisipkan elemen pada kumpulan halaman tertentu secara otomatis.
Pengelola Tab Untuk membuat pop-up yang mengelola tab browser.

Jelajahi lebih jauh

Kami harap Anda menikmati proses membangun ekstensi Chrome ini dan bersemangat untuk melanjutkan ekstensi 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.