Sederhanakan gaya halaman saat ini dengan mengklik ikon toolbar ekstensi.
Ringkasan
Tutorial ini membuat ekstensi yang menyederhanakan gaya halaman dokumentasi ekstensi Chrome dan Chrome Web Store agar lebih mudah dibaca.
Dalam panduan ini, kami akan menjelaskan cara melakukan hal berikut:
- Gunakan pekerja layanan ekstensi sebagai koordinator peristiwa.
- Pertahankan privasi pengguna melalui izin
"activeTab". - Jalankan kode saat pengguna mengklik ikon toolbar ekstensi.
- Menyisipkan dan menghapus sheet gaya menggunakan Scripting API.
- Gunakan pintasan keyboard untuk mengeksekusi kode.
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 focus-mode yang akan menyimpan file ekstensi. Jika
ingin, Anda dapat mendownload kode sumber lengkap dari GitHub.
Langkah 1: Tambahkan data dan ikon 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 tutorial "Menjalankan skrip di setiap tab" yang menjelaskan metadata dan ikon ekstensi secara lebih mendetail.
Buat folder images, lalu download ikon ke dalamnya.
Langkah 2: Lakukan inisialisasi ekstensi
Ekstensi dapat memantau peristiwa browser di latar belakang menggunakan pekerja layanan ekstensi. Pekerja layanan adalah lingkungan JavaScript khusus yang menangani peristiwa dan dihentikan saat tidak diperlukan.
Mulai dengan mendaftarkan pekerja layanan di file manifest.json:
{
...
"background": {
"service_worker": "background.js"
},
...
}
Buat file bernama background.js dan tambahkan kode berikut:
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
Peristiwa pertama yang akan diproses pekerja layanan kami adalah
runtime.onInstalled(). Metode ini memungkinkan ekstensi menetapkan status awal atau menyelesaikan beberapa tugas saat penginstalan. Ekstensi dapat menggunakan Storage API dan
IndexedDB untuk menyimpan status aplikasi. Namun, dalam hal ini, karena kita hanya menangani dua status, kita akan menggunakan teks badge tindakan itu sendiri untuk melacak apakah ekstensi 'AKTIF' atau 'NONAKTIF'.
Langkah 3: Aktifkan tindakan ekstensi
Tindakan ekstensi mengontrol ikon toolbar ekstensi. Jadi, setiap kali pengguna mengklik
ikon ekstensi, ikon tersebut 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 mengeksekusi kode
di tab aktif. Hal ini juga memungkinkan akses ke properti sensitif
tab saat ini.
Izin ini diaktifkan saat pengguna memanggil ekstensi. Dalam hal ini, pengguna memanggil ekstensi dengan mengklik tindakan ekstensi.
💡 Interaksi pengguna lain apa 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 secara sengaja memilih untuk menjalankan ekstensi di tab yang difokuskan; dengan cara ini, privasi pengguna akan terlindungi. Manfaat lainnya adalah tidak
memicu peringatan izin.
Untuk menggunakan izin "activeTab", tambahkan izin tersebut ke array izin manifes:
{
...
"permissions": ["activeTab"],
...
}
Langkah 4: Melacak status tab saat ini
Setelah pengguna mengklik tindakan ekstensi, ekstensi akan memeriksa apakah URL cocok dengan halaman dokumentasi. Selanjutnya, kode ini akan memeriksa status tab saat ini dan menetapkan 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 sheet 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 sheet gaya menggunakan Scripting API. Mulai dengan
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, bukan style sheet?
Ya. Anda dapat menggunakan scripting.executeScript() untuk memasukkan JavaScript.
Opsional: Menetapkan pintasan keyboard
Sebagai hiburan, tambahkan pintasan untuk mempermudah pengaktifan atau penonaktifan mode fokus. Tambahkan
kunci "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(), sehingga tidak diperlukan kode tambahan.
Menguji apakah berfungsi
Pastikan struktur file project Anda terlihat seperti berikut:
Memuat ekstensi secara lokal
Untuk memuat ekstensi yang diekstrak dalam mode developer, ikuti langkah-langkah di Hello World.
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.
Tampilannya akan berubah menjadi:
Menjadi seperti ini:
🎯 Potensi peningkatan
Berdasarkan hal yang telah Anda pelajari hari ini, coba selesaikan salah satu hal berikut:
- Meningkatkan kualitas sheet gaya CSS.
- Tetapkan pintasan keyboard yang berbeda.
- Mengubah tata letak blog atau situs dokumentasi favorit Anda.
Teruslah berkembang.
Selamat, Anda telah menyelesaikan tutorial ini 🎉. Tingkatkan keterampilan Anda dengan menyelesaikan tutorial lainnya dalam seri ini:
| Perluasan | Yang akan Anda pelajari |
|---|---|
| Waktu membaca | Untuk menyisipkan elemen di kumpulan halaman tertentu secara otomatis. |
| Pengelola Tab | Untuk membuat pop-up yang mengelola tab browser. |
Jelajahi lebih jauh
Kami harap Anda menikmati proses pembuatan ekstensi Chrome ini dan berharap dapat melanjutkan perjalanan pembelajaran pengembangan ekstensi Anda. Sebaiknya ikuti jalur pembelajaran berikut:
- Panduan developer memiliki puluhan link tambahan ke bagian dokumentasi yang relevan dengan pembuatan ekstensi lanjutan.
- Ekstensi memiliki akses ke API canggih di luar yang tersedia di web terbuka. Dokumentasi Chrome API menjelaskan setiap API.